Zwift.com
Zwift is a massively multiplayer online training game that connects cyclists around the world to work out, compete and interact in a virtual environment. We partnered with them to drive account creation through a new commerce experience.
When Zwift came to us, their website didn’t represent the way their brand was evolving, they had a separate “shop” for gear, but were planning to sell more hardware, and finally were seeing a low conversion rate for new account sign-ups.
We started by defining Zwift’s opportunity audience—performing in-depth user research interviews and existing site evaluation with prospective customers.
Research helped us identify two key areas of focus to achieve Zwift's goal of increasing new account creations: (1) Bring gameplay to the forefront. Potential customers we interviewed had a hard time understanding what Zwift is, let along that it’s a beautiful virtual world! And (2) Simplifying the explanation of what you need to get started with Zwift. There are a lot of different combinations of hardware you can use with Zwift, which can make it tricky to understand. So, we set about the process of solving for each user need - starting with the brand.
The Zwift brand has always been deeply connected to the company’s gaming roots—with a chunky and playful visual aesthetic unique to the home fitness space. We needed to dial up the vibrant in-game world of Watopia while matching it to a high-converting web interface.
We established a design system—built around the iconic Z logo curves—that combines the digital experience with real world physicality to create a simple and easy-to-understand visual language.
Mapping to our KPIs of improving account sign-ups and conversion, we ran multiple rounds of usability testing throughout our design processes—focusing on navigation, checkout flow, and content. This helped us radically simplify the explanation of Zwift’s product while building confidence that our new designs would perform.
Ultimately, our three rounds of research, investment in reducing load times, the brilliant new design, and content strategy worked together to deliver results we are truly proud of:
24% decrease in page load times
21% decrease in homepage bounce rate
81% increase in account creation rate
This and the following slides I wrote and designed for our north star strategy deck that set the tone for and guided the direction of the entire project.
One of many user flows in different forms we created to illustrate different sign-up, conversion, shopping, and education journeys.
We did multiple rounds of testing on navigation to land on a radically simplified solution. Our research made the case for convincing stakeholders across the company who were hesitant to change navigation. The previous design had many more items, not divided between utility and primary placement, while also using coded brand-specific language that was hard for users to navigate. Our “plain language” approach to navigation was fine-tuned with each study to land on just the right three words to encompass Zwift’s product and content with affordances for account-holder utilities.
With intense attention to detail, we unified Zwift previously account sign-up flow that had unclear language and multiple UI styles. This also underwent user testing with multiple versions to land on the flow that we chose to launch.
In parallel with account sign-up we helped Zwift introduce hardware + subscription bundles that would help new users get started more easily. Flows for this feature were also user tested to determine the best language and user experience prior to launch.
The first homepage after Zwift.com relaunched featured in-game footage video alternating with footage of riders on their bikes in front of a screen participating on Zwift to reinforce the message that Zwift is experienced while riding indoors, connecting the game and real-life experience, which was previously mis-understood by potential customers.
A selection of the beautiful work our UI design team did showing how the Z-curve component system fits together in a vertical stack.
We put a lot of energy into communication not just the “racing” and “training” side of Zwift, but also the vast exploration available to riders. We found in our initial research that many of the enthusiast riders we were working to reach were more attracted to this part of Zwift vs. the more competitive side that had traditionally been marketed.
Our final cart and sign-up flow after UI design.
To get the nice lift metrics we achieved, we had to benchmark and set goals early in the project to ensure we had something to track against once the site launched. I lead the Zwift brand and marketing teams through exercises to organize goals, collect benchmark, and success metrics for the new site.