Wahoo releases biggest software update yet

Why and how we took on this massive design and engineering initiative

At Wahoo we’re focused on creating tools that help endurance athletes achieve their goals. We’re thrilled to be releasing the most momentous software update we’ve ever had. Significant visual and structural updates to our ELEMNT companion app and Wahoo app are available today on both Android and iOS.

Wahoo app (iOS + Android), ELEMNT companion app (iOS + Android)

Why

We think the best product design is invisible — when products just work, effortlessly, and when they are easy to set up and equally easy to customize. We set out everyday to create products that perfectly complement and inform your workouts, so your focus can be on those workouts and your goals, not fiddling around with tech.

We’re proud of our strong legacy of creating well-designed products, and we decided to continue that legacy by pushing our apps to be even easier to use, more beautiful and more delightful.

So we wrote some general goals:

1. streamline the look and feel of these four apps and
2. audit and improve their usability.

With those goals in mind, we got to work.

The start — a new design system

The design team started by creating a new design system (things like icons, colors, fonts, and components) that could be used and reused across iOS, Android, and the web.

Selected colors and components from our Android design system.

We wanted to ensure all four apps look and feel like Wahoo, so consistency was a major focus: The ELEMNT companion app should feel familiar to someone who has used the Wahoo app, and vice versa.

The iOS ELEMNT Companion App & the Wahoo app share UI components where functionality matches.

Simultaneously, we know ease of use is dependent on familiarity, so we wanted our apps to feel like they belong on their respective platforms.

iOS users will see components and layouts that are familiar (because they are found elsewhere on iOS). Same on Android. We like to think our Android UI is a Wahoo-flavored version of Material Design, Google’s design language.

Both Android apps use our own flavor of Google’s Material Design.

Applying the design system

Next, we set out to apply this design system to every nook and cranny of the existing functionality, while also auditing each flow and screen to ensure tasks are easy to accomplish, text is clear and concise, and we’re providing the right amount of information.

In some cases, this meant redesigning the layout altogether:

Previous home screen of the Wahoo Android app. It lacked clear hierarchy, and information that we know is important to users (like sensor management and historical workout data) was buried. We moved to a tabbed layout (the same tab bar is also used in the other three apps).

In other cases, the information provided and the way it was organized (also known as information architecture) was great, it just needed to use our new components.

The functionality didn’t change much in the Routes browser, where users can create, view, and select routes.

Implementation

Our engineering teams put together a Herculean effort to implement this new UI. There are easily more than four hundred screens across these four apps and our developers worked tirelessly to ensure each perfectly matches the design spec.

At the same time, they also refactored large portions of the apps so code is shared between apps where functionality matches. This means overall quality and consistency have improved and building new features will be faster due to a strong foundation.

Massive shoutout to the engineering and QA teams that made this release happen. They crushed it and we are so proud that we get to work alongside such talented individuals.

Looking ahead

We can’t wait to show you what we’re building next. We think you’ll love it.

Also, this is just the start of our product design blog. Other posts (like deep dives into specific features) are already in the works.