Zwift is the industry-leading platform for cyclists and runners training indoors to have more fun.

We set out to...

Make it easier for members to choose an activity, find a crew, and reach their fitness goals.

Measure success for our business goals with key member engagement and subscription performance indicators.

Elevate the Zwift brand by creating a new design system library—paired with new engineering components in an entirely new tech stack.

What we released

Results

37%

Increase in the median number of activities for new members during their first seven days.

5.1pp

Increase in members joining social activities, a key indicator for retention on the platform.

My contributions

Discovery & Definition
UX design & documentation
UI design partner & design system contribution
Moderated & unmoderated research
Internal stakeholder and team reviews
Program management
In sprint engineering partnership and QA support 
Release planning and communication support

Partners

Product Owner
External agency project management and engineering 
Internal development teams with embedded QA
Lead UI Designer 
UX Researcher 
Lead Data Analyst 
Marketing & Community Support teams

Where we started

Before the redesign, the Zwift Game home screen had many opportunities for improvement. This is the view that members previously used to choose an activity and launch into the game experience.

It was difficult to understand and navigate. Not all elements were interactive, and many lacked key information to start an activity confidently.

Accessibility first

The Zwift Game app is available for download on iOS, Android, Apple TV, Mac, and PC devices. This wide variety of input types meant that we would need to solve for accessible navigation across touch, cursor, keyboard, Apple TV remote, and new 'Zwift Play' controllers that would be available for purchase soon after launch.

Establishing new navigation patterns

Starting with low fidelity, I wireframed a new card system and carousel structure, following a familiar pattern for recommended content discovery.

This included introducing a new navigation approach, allowing members multiple ways to browse recommended or activity-specific content. We also solved a long-requested improvement from the community by introducing the ability to view game achievements and swap out virtual gear in the garage before launching into the in-world game experience.

Aligning priorities

With so many great opportunities before us, I ran a MoSCoW workshop with a large cross-functional group to help facilitate alignment for our minimum lovable requirements.

A significant portion of the work throughout this project included partnering with other teams to realize our collective goals, including data analysis, sound design, game art, and tech feasibility across several services powering the game experience platform.

Defining content requirements

We defined the content requirements for a new carousel card and detailed side panel view for each unique activity type, from guided workouts to social group rides, competitive racing, or solo free riding or running activities. Focusing on the most important information to help a member join an event that is right for them.

I led numerous cross-functional reviews with leadership, design peers, and tech leads, gathering feedback and iterating until we were aligned on our information display and content hierarchy approach.

Elevating the Zwift brand

Much of this project involved creating a new design system library that other design team members could leverage.

I partnered closely with a Lead UI designer for this portion of the work. We met regularly to jam together directly in Figma and collaborate with the engineering leads to develop the new components and patterns for our new user interface.

Listening to members

With our Figma prototype ready to go, I ran unmoderated task-based tests with 10 current members on Usertesting.com. Intentionally recruiting higher-level Zwifters to gather feedback from those who were very familiar with the platform to start.

Participants described the new UI as less overwhelming, cleaner, and easier to use.

Leading with recommendations

As members tended to launch the game app while standing on their treadmill or sitting on their indoor bike trainer, reducing the time needed to start an activity was a top priority.

The 'For You' carousel would deliver a personalized mix of planned and recommended content that became more robust with each release.

Helping people find their crew

Participating in social activities is among the greatest indicators for members continuing their subscription to Zwift. In the legacy UI, necessary event information could not be seen in the game app; members needed to use the Zwift website or companion app to find and join an event confidently.

Improving this experience was one of the most celebrated changes in the community.

Taking care of the details

With many different event types available on Zwift, I captured and defined solutions for numerous variants and edge cases. Here are just a few examples:

cycling and running specific event information;
women-only sub-groups which male riders could not join;
category-enforced races where faster riders are prevented from joining slower groups to increase fairness and fun;
differing start times for sub-groups and the ability for event admins to configure by laps, distance, or duration;
RSVP functionality for meetup event invites.

Highlighting fun and beautiful routes

The 'Just Ride' (or Just Run) carousel would help members jump into a solo activity more easily. This was particularly important for newer folks who were less likely to join social events.

We selected a variety of favorite routes to randomly display for each session. With hopes to improve with smarter recommendations in the future. We partnered with the Game Art team to source the required imagery for the new card display.

Making it easier to choose a route

During discovery, we heard that members often had difficulty choosing a route. To improve this experience, we added estimated duration and effort ratings.

I collaborated with a Lead Game Designer who devised how to capture this data. Effort ratings were categorized based on distance, elevation, and the types of climbs available on a particular route. Meanwhile, duration estimates leveraged Strava data to define a range for most riders.

I captured this information in our growing documentation for cross-functional future reference.

Browsing between worlds

We started with a simple list view to allow members to browse all available routes with sort and filter controls. As most riders end their activity at 30 minutes, we defaulted to shorter-duration routes, using elevation as the secondary sort mechanism within the effort and duration categories.

Though we hoped to ultimately default to an interactive map view with an available list toggle, resource constraints prevented us from reaching this goal.

Supporting achievement enthusiasts

An interesting discovery during research was that some of the more avid Zwifters were using spreadsheets to track their completed routes. We used this learning to improve the experience for new and tenured members alike by including visual indicators and filter controls for completion.

Making it easy to join a friend

We designed a simple list modal to help members teleport to a specific Zwifter, showing who was actively riding. Improvements that we realized for this preexisting feature included leveraging the social 'favorite' functionality from the mobile companion app to find friends more easily. Along with the addition of elapsed time to better understand if someone was beginning a ride or had been pedaling for some time.

I was quite surprised by the usage data for members choosing to drop into a ride within real-life 'Pro' cyclists training on the platform; it was much higher than I had anticipated, given how fast some of these riders are!

Gathering additional feedback from members

With the initial launch drawing nearer, we began using local development builds to conduct in-depth interviews with various member types.

Key results indicated that the new user interface would help members onboard into the platform and quickly find an activity, and make it easier to join a social event or find a friend to ride with. We included the action items from our findings in the topline reports and shared the community feedback widely with our internal teams.

Receiving support from key influencers

To build excitement and awareness, we presented changes that were coming to a group of media and selected influencers, providing imagery that could be used in their coverage. This resulted in a huge number of impressions, further elevating the Zwift brand.

What we heard from the community

The dedication to providing feedback from a core group of the Zwift community was unlike any I had experienced before this project. To mitigate risk, we phased the rollout by both platform and member tenure on the platform. Though some folks grumbled about the change in the new interface, we were thrilled to receive positive feedback from this group. Change can be hard!

We celebrated realizing the goals we had set out to achieve and set our sights on the roadmap ahead!

If you'd like to learn more about me or my work let's chat!