Mech Showdown Onboarding Experience

Mech Showdown is a battleground game with unique mechanics. The game is available on mobile, PC, and consoles. It targets both casual and competitive gamers, but data shows high drop-off rate from new players. As part of the core development team, I was tasked to design an intuitive and engaging onboarding experience for cross-platform.

Role

UX Architect
UI Designer
Quality Insurance

Team

Product Manager
Game Developer

Tools

Figma
After Effects
Lucidchart
Midjourney

Duration

1 month

Problems & Challenges

⭕️ No Existing Framework
No guidance and need to build an onboarding flow from scratch.

⏱️ Low session time
New users session time is below benchmark.

👥 Diverse Audience
The game targets casual gamers, competitive players, and newcomers to the battleground genre, each with different needs and expectations.

📱 Cross-Platform Complexity
The onboarding experience needed to work seamlessly across mobile, PC, and consoles, each with unique input methods and user behaviors.

Goals

Introduce core mechanics in an engaging way.

Make the onboarding process rewarding and motivating.

Create a consistent experience across mobile, PC, and consoles.

Research

Competitive Analysis


Jujustu Infinite

Flow

Opening scene > Learn fundamental mechanics (basic movements and abilities) > Closing scene > Introduce essential game features (ex, Boss fight, Missions)

Key insights

  • Tutorial is mandatory

  • Step-by-step tutorial

  • Visual interaction

  • Practice each move multiple times

  • Blend basic mechanics tutorial into the storyline

Apex: Legends

Flow

Opening scene > Experience selector (Training, bot royale, Battle royale) > Fundamental mechanics > Bot royal

Key insights

  • Tutorial is optional

  • Step-by-step tutorial

  • Low-pressure first match

Player interview and survey

Conduct interview and survey with the players in the communities to mark their pain points and expectations

Persona

Casual Player
Dylan, 10

Plays for fun, prefers simple instructions, and enjoys exploring at his own pace.

Competitive Gamer
Max, 15

Wants to quickly understand advanced mechanics to start competing.

New to Genre
Hazel, 14

Has little experience with battleground games and needs extra guidance.

Key insights

  • ⏳ Players want to feel in control of their learning pace.

  • 👁️ Visual and interactive tutorials are preferred over text-heavy instructions.

  • 🏆 Early wins and rewards are crucial for engagement.

Design

Design Principles

📈 Progressive Learning
Introduce game elements step-by-step to avoid overwhelming players.

📖 Interactive Tutorials
Use hands-on, interactive elements to teach mechanics.

📱 Platform Adaptability
Ensure the experience feels native to each platform (touch for mobile, keyboard/mouse for PC, controller for console).

🏆 Early Rewards
Provide immediate feedback and rewards to keep players engaged.

[Prototype screenshot with highlight]

Onboarding flow

Character selection
Provide diverse mech class for users to choose from

Reward: Skills
Players receive early rewards and unlock new features as they progress.

Low-pressure first match
Players are paired with bots in a simplified match to practice their skills.

Tutorial introduction
Encourage players to learn the unique mechanics and promote rewards

Practice match
Practice with AI to build confidence

Reward and Unlock character
Inform players that there are more mech classes and they are growing. Keep players motivated for retention

Basic combat
Step-by-step guidance on basic attacks and special abilities using platform-specific controls (touch gestures, keyboard and mouse, or controller)

Reward: Currencies
Introduce currencies and inform players the use of it

Cross-platform Considerations

Keep the steps consistence while alternating input graphic and wording for platform specific

Mobile: Highlight button with pulsing effect as guidance

PC: Highlighted keyboard shortcuts and mouse controls with interactive overlays. Alternate wording for specific platform.

Console: Emphasized controller inputs with button prompts.

Iteration

Hunt the churns

I worked tightly with our game developers to monitor the performance. We located the major churns through data analytic. After testing and analyzing the problems, I iterated the design while my colleague fixing the bugs.

We have successfully reduced the overall churn by 46%.

Start training

14.81% 8.88%

Analysis

  • Skip button is weighted too high and too encouraging

  • Intro text is not encouraging

  • Server teleportation

Iteration

  • Deemphasize the skip button

  • Reword

Target lock-on

8.54% 2.71%

Analysis

  • Camera was not facing the dummy initially

  • Instruction is too wordy

Iteration

  • Correct the camera facing issue

  • Simplify the instruction and associate with graphics

Block

6.22% 2.27%

Analysis

  • Visual indication is not clear (only reply on character’s gesture)

Iteration

  • Add 2D indicator

Equip skill: Menu

9.06% 3.60%

Analysis

  • Player got distracted by all the other menu options

Iteration

  • Narrow down the focus by disabling other menu options

Counter skill

7.85% 0.58%

Analysis

  • All 4 skills are available to trigger

Iteration

  • Disable all other buttons and only highlight the Counter skill

Practice match

19.36% 8.62%

Analysis

  • Missing HP bar on the dummy. Players reported that the dummy is unbeatable and they ended up quitting.

Iteration

  • Display the HP bar for clear feedback

Impact

Player retention

New player session time increased by 25.6%

11/1/2024-11/24/2024: 7.8min

11/25/2024 - 12/1/2024: 9.8min

Day 1 retention increased by 25.7%

Day 7 retention increased by 81.3%

Business impact: Lead to a 21.1% rise in in-game purchases

[Graphic: % change]

Learnings & Reflections

Reflections

  • Start with the User: Understanding the diverse needs of our audience was crucial for designing an effective onboarding experience.

  • Iterate and Test: Usability testing revealed insights that we couldn’t have predicted, leading to meaningful improvements.

  • Consistency with Flexibility: While maintaining a unified experience, adapting to each platform’s strengths was key to success.

Previous
Previous

Avatar Editor