Intro
I recently had an interesting professional event that lead me back to riding at Zwift’s Watopia. Then I realized that I’ve been missing a lot as they’ve released new interesting features. However, one of these features was confusing so I thought why not show my love for the game and apply my UX skills and solve a problem.
Disclaimer: This is a self-initiated project and not associated with the company.
TIMELINE
4 Days
PLATFORM
Online Fitness Gaming App
INDUSTRY
Sports
Tech
Retail
MY ROLE
UX Designer
UX Research
Game Designer
TOOLS
Photoshop
Illustrator
After Effects
TEAM SIZE
Conceptual Project
Goals
01
Apply my UX skills in the world of games
02
To enhance engage-abilty for fellow Zwifters
03
In 4 days, try and make improvements to Zwift as the sole designer for the roles of user experience, interaction design, and user interface
Issue that I found in recent engagement with Zwift
Riding with a pacer bot is one of Zwift’s features that came out last year. The rider or “player” can choose from four different speeds. Supposedly you are training with a bot by pacing with it.
It’s a pretty neat idea because I myself like to train at a consistent speed. So I tried it out. Five minutes in and I had to pause the game, and when I got back in I had no idea where my pacer partner bot is. No indicator or anything. I kept cycling for 10 minutes more hoping I’d catch up but no sign of the pacer bot. Where is my supposed partner? How do I know if I can still catch up? What’s the point of having a pacer bot if I can’t see them?
Ideation & Animated Icon
This is my avatar trying to find the pacer bot
Initial notes: applying UX Principles for games
Player Journey
Information Architecture/Wireframes for the Pacer Bot Indicator
I made a “pacer icon” in green, yellow, and red in Illustrator and made them in 3D on After Effects to show the transition of the player doing well pacing with the bot to trying to catch up. Not trying to redesign the icon, I’m just not the best artist but at least it looks like an avocado.
Faded yellow and red indicating the Swifter is slowing down and riding 14m distance away from the bot. More than 30 secs of this distance, the indicator will turn red
Check out the short clip of the pacer bot icon in action!