HFnGG

Helping gamers learn and improve their skills

My Role
Branding, product design, prototyping, workshops
Industry
Gaming
HFnGG learning dashboard with a practice time summary, recent tutorials and a course list

A starting point for new players

HFnGG brought gaming education and competitive play into one platform. I worked on the experience that helped new players get started, discover learning content and track their progress.

My work covered the visual identity, onboarding, learning dashboard and course experience.

HFnGG course page in a browser window: video player with an episode list

Getting to know the player

Not every player comes to HFnGG with the same experience or goals. Some want to get better at their favorite game, while others are interested in streaming or competitive gaming.

I designed a short onboarding flow to learn about their experience, interests and ambitions.

The answers helped tailor course recommendations, while contextual hints made each step easier to understand.

Course page with a video player and an episode list
Onboarding step 2: choosing gaming experience, Newbie or Pro
Email verification screen
Onboarding step 1: welcome screen asking for a nickname
HFnGG landing page
Learning dashboard with tutorials, articles and game categories
Sign-up screen with an email form and social login buttons
Onboarding step 4: choosing goals such as Content Creator, Streamer or Pro Gamer
Onboarding step 2: gaming experience selection with a hint panel
Onboarding step 3: choosing what you love in gaming

A shared visual language

I created a visual style built around dark backgrounds, bold typography and bright aqua and pink accents. The same colors, components and interaction states were used across the landing page, onboarding and learning experience to keep the product consistent.

HFnGG landing page, full lengthOnboarding goals step in an app windowIsometric overview of primary and secondary button states
Dark theme typography styles: Display 1, Display 2 and Heading 1Dark mode colour palette: transparent white, aqua, red and pink scales

Making progress feel rewarding

Learning a game takes time, and I wanted players to feel that their effort was paying off. I explored ways to make progress more visible through practice-time summaries, achievements and small rewards for reaching milestones.

I used Joseph Campbell's hero's journey as a reference for how players progress.

The Hero's Journey cycle: call to adventure, crossing the threshold, abyss, metamorphosis, the ultimate boon, returning the boonIsometric role cards: Content Creator, Streamer, Pro Gamer and Community Manager
Practice time summary widget with lessons, achievements and an upcoming 1v1 lessonMy Courses list with a tooltip announcing a practice time record