Wattbike
Hub App UI Design

Wattbike is the ultimate indoor bike. It is used by both amateur and professional athletes worldwide. We love riding bikes and working on complex UI challenges, so the fate smiled upon us.

© Wattbike

Wattbike Hub is a mobile app, which connects to every Wattbike and gives its user access to bike's full potential. That includes training plans, statistics, challenges, tests, session history, etc. The app is runs smoothly on a wide range of mobile devices - iPhone, iPads, and the myriad of Android phones and tables.

Our work as UI designers included creating a vast array of screens to suit every possible scenario and providing detailed spec for the developers to use when building the app components.

Wattbike is the right choice for those obsessed with improving cycling performance. The most important part of the app is the ride screen. It provides extensive data about your pedaling effectiveness, time elapsed, heart rate, power pushed, etc.

There are several types of workouts to choose from. Most spectacular are the climb simulations. They are modelled after some of the hardest climb segments in the world. You get a visual representation of the climb you've chosen, in detail and as overall progress.

Another interesting ride is the time-based workout, which consists of several segments with varying intensity, and the rider part is to stay in the green zone for each segment.

There are many more workouts to choose from. The ride screen  is built on a grid system and uses modular components..

The design process spanned over many more screens and followed the same dark aesthetics. Of course, all screens were adapted for both iOS and Android OS specifics. for landscape mode, and for tablet users.

And since developers don't like tampering with Photoshop files, layers, typography specifics, etc, we created a separate document, which described every detail of the interface in, well, detail. Thankfully, UI design software like Adobe XD now allows automatic design spec creation, so we don't have to do this anymore.

Our work for Wattbike continues, and we've learned so much in the process. Stay tuned.

Like most big projects, this one required coordination between several companies in different time zones. Our work on the interface was facilitated but the wonderful brand identity created by Onwards, which trickled down to a brand book full of inspiration. We kept a very close connection with the guys from Tumba Solutions, who gave us detailed technical insight throughout the project.

You can download the app for your favorite device from the buttons below.

You can also learn more about the range of Wattbikes on their website.

Spread the love

If you like the icons, share this page
and like us on Facebook.

About us

Cog Graphics is a design studio based in Sofia, Bulgaria, and led by Ivan Ginev. Among our clients are some of the most influential Bulgarian brands and organizations, including newspapers, foundations, IT companies, and merchants.

We have fluent expertise in many business sectors. We find the right approach for each task quickly and deliver a professional result.

Like what you see?

Visit us for a cup of coffee:
10 Khan Presyan Str.
Sofia 1612 Bulgaria
See map

Call us: +359 88 800 1300

Send us a message: info (at) coggraphics.com