New on Wahoo: Setup Wizard

Che Wei (Jacky) Lee
Wahoo Product Design
3 min readApr 16, 2019

We’re excited to roll out a slicker way to get you set up on new Wahoo products. This is one of many improvements we’re making in all of our app refresh.

At Wahoo design, we’re always looking for delightful ways to make our products simple to use. Especially for our KICKR customers, who may be their first time using any indoor smart trainers. Up until now they relied on visiting our website for instructions & videos for the initial setup. We can do better.

First Launch Onboarding

From the moment any Wahoo product is unboxed, we want to guide users through setting them up as quickly as it needs to be, no more, no less. When you open the Wahoo app for the first time, we will now take you through:

  1. Account creation / sign in
  2. Product setup (optional)
  3. Product firmware updates (if any)
  4. Calibrations (if any)
Wahoo app (iOS + Android), ELEMNT companion app (iOS + Android). Clay Mockup by Alexis Doreau

Product Setup

We encourage you to go through product setup whenever you pair with Wahoo products. This ensures firmwares are up to date and avoid any mid-workout hiccups in the future.

To do so, go to the Settings tab → SensorsAdd New Sensor. From there, tap Setup wizard. Regardless of what Wahoo products you own, you’ll feel right at home at the product families screen. If you want to skip firmware checking, tap quickly pair a new sensor and we won’t bother you with any setup screens.

No matter what Wahoo products you own, our new Product Setup wizard has got you covered.

Prototypes & Implementation

During the design phase of this feature, we used a combination of Sketch & Framer Classic to express our ideas. Countless throw-away working prototypes were created with Framer Classic for experimentation purposes. At the end we reached a solution that elegantly meets all requirements, with room to expand in the future.

Using Framer Classic was useful throughout the process. From ideation with product owners for scoping purposes, to the final handoff with developers. After many iterations, we reached this prototype to communicate the design.

We currently manage our design components with Sketch & Abstract, this meant extra work was needed to recreate them in Framer Classic. Syncing detailed design changes in both (Sketch / Framer) became cumbersome at some point, so at the end we came up with a rule of thumb for the engineers:

  • Use Sketch for pixel-perfect static visual handoff requirements.
  • Use Framer Classic Prototypes for dynamic behavioural requirements.

Despite the messy overhead for managing multiple design files & prototypes, this process has been beneficial. Especially when we’re a remote design team across different timezones, building working prototypes for project stakeholders eliminates a lot of ambiguity that comes with most static design tools; design notes and Slack conversations only go so far for explaining how something should behave. The engineering & QA team has done an incredible job sweating over the design details from our design artefacts, so a massive kudos to them for making this release happen!

An example for pairing a Wahoo TICKR X with the new Product Setup Wizard.

What’s next?

As we keep expanding our product offerings in the future, so will the product setup wizard. We intend to use this onboarding flow for setting up all your Wahoo products as quickly as possible, so you can get back to doing what you love. Whether you’re a seasoned expert or first time Wahooligan, we think this feature has something for everyone. We can’t wait to show you what’s coming. We think you’ll love it!

--

--

Che Wei (Jacky) Lee
Wahoo Product Design

cheweilee.com – Product Designer and Developer made in Kaohsiung, Taiwan, raised in Auckland, New Zealand, now based in New York, USA.