DUST APPLICATION
My best UX work
Introduction
As introduced in my Zar case study, my cofounders and I wanted to address the lack of efficient and scalable solutions to help gamers improve at their favorite competitive (esport) games.
So we launched Zar, and created "live guides", which coach gamers as they play, automatically.
I chose this example for this exercise because :
It was a great UX challenge and users loved the result.
A live guide is like a context-aware AI assistant that can follow you as you work and give you actionable advice, except it's in a game. Some principles in this UX may be useful in the future!
This kind of feature didn't exist, so I really had to start from scratch and think outside of the box.
… but if this is too original / specific, tell me and I'll redo this exercice with UX that is more conventional (e.g. the conversion funnel of a subscription).
Here's how we tackled it, including the challenges and outcomes.
Tested our product vision with a few cheap experiments
Voice vs Text
We considered using a synthetic voice for live guides but found it unsuitable because:
It sounded unatural and robotic.
One competitor had tried that, but our team and users we talked to felt that it disturbed a lot our game experience.
So we chose to test text tips first.
We ran a Wizard of Oz that validated 3 key hypotheses with 15 players
Players launched matches and followed coaching tips sent via Discord on a second screen.
We told them it was an automated bot, but it was actually Tom coaching them live!
Players loved the experience and wanted more.
Then built a quick prototype
We created a simple desktop app connected to the game API, with a basic "Live Guide" giving tips based on in-game events/triggers.
Players used 2 screens: one for the game, one for the tips.
Players loved being coached by our Live Guide, but reading tips on a separate screen was cumbersome. The guide was also a bit too spammy, averaging 1 tip every 25 seconds.
Built in 3 weeks an overlay to display the tips on top of the game
This allowed us to test the new format, logic, and visuals for live guide tips.
In-game UI overlay
Put on top
League of legends game window
Integrated seamlessly with the game
Each tip highlights the main information at the top and uses clear icons for faster reading.
Tips are displayed in the screen corner with smooth animations and reduced opacity.
Slides up and right when the tip is displayed
Minimizes after 1 min, maximizes when hovered
Based on good instructional design practices
Problem-oriented learning: face real challenges during matches.
Learn by doing: players retain more by applying tips in real situations.
Give several options: make users think about what to do so they better retain key principles.
Deliberate practice: face new scenarios, die often, and learn quickly in short intervals.
Simple logic for now. In short:
Display the first tip which has valid triggers (example : display tip X if Player is dead and Player is level 6).
Wait 45 seconds before showing the next tip to avoid spamming.
This 1st version was a great start, but users reported that the flow of tips was too chaotic.
Our simple logic didn't cut it
But it helped us identify key problems quickly. Sometimes, a tip:
Appears during active combat, so the player can't read it.
Becomes irrelevant after 10 seconds due to changing game context.
Is missed because the user is busy for various reasons.
So we fixed it.
Tips log
Along with other useful and actionable overlay widgets, we implemented a "tips log" displaying the last 3 tips. Users can check missed tips and plan their next move.
Displayed only when the user presses tab to check game scores, ensuring it doesn’t interfere with play.
Tips flow
Based on user testing insights, we created a flowchart to display the most relevant tips at optimal times when players can read and apply them.
Main properties used:
Triggers for a given tip are valid
User is available (not in active combat)
Tip priority (1 to 3)
Player is in default view (main game) VS Tab view (game scores)
Number of tips in Tab view
Tip display duration
We did tiny iterations on this flow in the subsequent sprints until users felt it was perfect (or close to it).
Then added more customization so users could personalize their experience
2 customization examples that delighted users
We let players customize all in-game widgets to find their perfect setup.
Drag & drop
Resize
Opacity
Enable/disable
We introduced the Guide Editor, letting creators build their own live guides and use different colors for tips. This helped convey different types of tips/advice and personal branding with colors.
Our vision of coaching players automatically was finally there, and it worked seamlessly.
86% weekly retention, 74% monthly.
2.3 hours average user session time. Players reported using Zar in every single match.
Principles that made it work
This is how lean we were.
3 guiding principles helped us iterate super fast and deliver great solutions that are laser-focused on user needs:
"Think big, start small, ship to learn". Interact daily with users and watch them use the product.
Seamless integration: Zar must feel like a natural part of the game experience.
Context-awareness was paramount in delivering a smooth experience with great value.
My best UI work
I'd like to show my last 2 projects.
Zar: had tons of fun creating its branding and UI from scratch, even though it's starting to age a bit and I'm a better designer now.
Imageau: I focused more on UX than UI, and I couldn't go to far from their existing product that has a rather aged and generic B2B UI. But I still managed to produce some quality work.
Zar: A sleek and dark design that keeps inspiring players beyond the game
Showcases an immersive experience consistent with the video game universe (but not tied to a specific game).
Dark mode: Gamers mainly play in the evening, making a dark interface particularly suitable (and in line with the universe).
Used Material UI for simple components to implement faster
Sign up (loved creating this illustration)
Post-game: show key performance metrics and suggest relevant Live Guides after the match.
Profile: track performance in previous matches and official rankings.
Imageau: a modern and light UI that highlights actionable insights for industrial executives
Modern muted color scheme to indicate different alert and resource levels.
Geographical mapping for a quick read of alert / resource levels across different production sites and geographical areas.
Various drop shadows to communicate hierarchy.
Highlighted changes and alerts to keep users informed about critical updates in real-time.
Map view: current state of drought alert levels
Map view: current and future state of water resources
Site view: resources and risks of water stress
Site view: water metrics. Wish I had more time to work on those graphs / indicators!