MENTOROID · UI/UX DESIGN
Designing an AI coach that knows when to speak.
An AI coaching assistant for Dota 2: hero suggestions before a match, voice guidance during it, and clear insights after it.
Dota 2 players have plenty of stats but no help in the moment. In 4 weeks, we turned a broad “AI gaming coach” idea into a development-ready product. I designed the screens around the match: pre-game strategy, Game History, Player Profile with subscriptions, voice coaching settings, and Steam login.
Role
UI/UX Designer, GeekyAnts
Timeline
4 weeks, 2025
Platform
Web · Figma
AT A GLANCE
From dashboard to coach, across the whole match.
01
Before the match
A pre-game plan with goals and focus areas, instead of hero stats to browse.
02
During the match
Short voice guidance, instead of an on-screen overlay competing for the player’s eyes.
03
After the match
Patterns, and whether coaching helped, instead of a list of games.
01 · THE CHALLENGE
How do you make an AI helpful without distracting a player who’s already at full attention?
Dota 2 decisions happen in seconds, but players only learn after the match, from replays, tutorials or coaches. Many play hundreds of matches without knowing what they’re doing wrong.
Mentoroid set out to coach players while they play.
Constraints
01
AI response times
Coaching had to feel useful without breaking the player’s focus mid-match.
02
Imperfect game reads
The AI couldn’t read every situation perfectly, so guidance had to stay clear and lightweight.
03
No on-screen clutter
No room for heavy metrics or stacked notifications while the player is in combat.
04
4 weeks to deliver
We went deep on the core coaching experience instead of every scenario.
02 · MY ROLE
I designed the screens around the match.
Nuthan and I shared research, user flows, wireframes and visual design, with screens assigned by our lead.
Screens I owned: Login, Goal Setting, Game History, Player Profile (including the subscription flow), Settings
Also: client revision rounds, the Russian version of the screens, and shared UI system and developer handoff work
How every design round worked
01
Design
→
02
Team review
→
03
Lead review
→
04
Client approval
03 · RESEARCH
Players don’t need more data. They need the right guidance at the right moment, without taking their eyes off the game.
We compared 5 AI gaming coaches (itero.gg, Razer, Backseat.ai, Dota Plus, Mobalytics) across 23 features before, during and after a match.
What we learned: the basics are already covered, so another stats dashboard wouldn’t set Mentoroid apart. And during a match, coaching is almost always on screen, competing with the game for the player’s eyes.
How many of the 5 competitors offer each feature
Hero recommendations
5 / 5
Match history & analysis
5 / 5
In-game overlay
5 / 5
Real-time coaching
4 / 5
Voice coaching
The gap Mentoroid chose to fill
2 / 5
⤢ Click to expand
FIGMA
Competitive Analysis
Research boards for itero.gg, Backseat AI, Dota Plus, Razer AVA, Overwolf and Mobalytics
Open in Figma ↗
04 · KEY DECISIONS
A dashboard only answers “What happened?” A coach answers “What should I do next?”
Our first instinct was the usual dashboards and match stats. We shifted the product toward a coach instead.
01
Coach across the whole journey
Before, during and after the match, so each match informs the next one.
02
Voice during the match
Keeps the player’s eyes on the game, and only 2 of 5 competitors offered it. The tradeoff: every prompt has to be short.
03
Next steps over raw stats
Turn data into actions players can take, and keep the player in control.
⤢ Click to expand
FIGMA
Game History: Wireframe to Final Design
Before and after of the Game History screen, from wireframe to final visual design
Open in Figma ↗
05 · THE SOLUTION
A continuous coaching loop: prepare, play, learn, improve.
I designed the screens that prepare a player for a match, show what happened after it, and give them control over the coach.
The player’s journey
01
Sign in with Steam
→
02
Set goals
→
03
Play with voice coaching
→
04
Review the match
→
05
Track your plan
→
06
Repeat
⤢ Click to expand
FIGMA
User Flow
From Steam sign-in and goal setting to the match, post-game analysis and the next game
Open in Figma ↗
05 · LOGIN
One step into the product.
Players sign in with the Steam account they already use for Dota 2. There’s no separate Mentoroid username or password.
Sign in screen
01
The benefit, up front
“Sign in with Steam to unlock AI-powered insights” tells players what they get.
02
One focused action
Sign in with Steam is the only primary button on the screen.
03
A path for new players
“Create Steam Account” helps players who don’t have Steam yet.
05 · GOAL SETTING
Pre-game strategy, before the player launches a match.
AI recommendations based on the player’s performance and the current meta.
Players can accept the suggested goals, or switch to Custom and pick up to two roles to tailor the suggestions and focus areas.
Suggested goal setting
01
Suggested or custom goals
Accept the AI’s goals or set your own.
02
Comfort heroes vs. meta picks
With the player’s own win rate on each.
03
Focus areas
Short, actionable tips for the match.
04
Launch Game
Preparation leads straight into playing.
05 · GAME HISTORY · MY FAVORITE
Is the coach working?
The client wanted players to compare coached and uncoached games. I built the screen in three levels.
It turns a list of past games into learning: players spot patterns and can see whether coaching is paying off.
Scroll inside the window to explore the screen
Mentoroid
05 · PLAYER PROFILE
A personal coaching plan and a subscription flow.
A personalized coaching plan built around one habit with a deadline (“Build a 3–4s minimap habit… 6 days left”). The layout is ready for more games beyond Dota 2.
Subscription flow I designed and got approved by the client
05 · SETTINGS
Control over the AI voice.
If the coach becomes distracting, the player can turn it down or off without leaving the product.
Settings & Preferences
01
Voice Change
A dropdown to change the coach’s voice.
02
Voice Feedback
A toggle to turn voice coaching on or off, with its status shown: “Voice coaching is active”.
03
Voice Volume
A slider to adjust how loud the coach’s voice is, with the level shown as a percentage.
04
Delete My Data
Permanently deletes the account and all associated data, warns that it can’t be undone, and links to the data deletion process.
05
Delete My Account
Permanently removes the account and its data.
06 · IMPACT
In 4 weeks, a broad AI idea became a clickable, development-ready product.
Mentoroid is still in development, so there are no launch metrics yet.
What the 4 weeks delivered is a clickable prototype of the experience, so the client and developers could walk through the product before it was built.
Next, I’d validate: whether tips land at the right moment, whether players act on them without losing focus, and whether coached players improve over multiple matches.
What the design delivered in 4 weeks
01
A defined product
A broad “AI gaming coach” idea became a clear, focused experience.
02
A clear difference
Built around coaching, not another analytics dashboard.
03
A clickable prototype
The designed screens connected into a flow, ready to test and hand off to development.
⤢ Click to expand
FIGMA
Mentoroid Prototype
Two clickable flows in Figma: the main journey from sign-in, and post-game analysis
View main flow ↗
View post-game analysis ↗
07 · REFLECTION
Two lessons from designing an AI coach.
01
Bring real players in earlier.
Timing and how much information players can take in during a match can only be validated in real gameplay.
02
Design when the AI speaks, not what it can do.
Designing AI isn’t about showing what the AI can do. It’s deciding when it should speak, how much it should say, and when it should stay quiet.
Credits: Chetan (Design Lead) · Nuthan & Sinchana (UI/UX) · Prachitha (Branding) · GeekyAnts
