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 above.

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

About us

Cog Graphics is a Bulgarian design studio.
We specialize in print and screen design.

We have vast expertise creating stuff for many different businesses.  Among our clients are influential brands and organizations, including technogy providers, media, NGO's, IT companies, merchants, and more.

Contact us

Visit: 10 Khan Presiyan Str., Sofia 1612 Bulgaria

Call: +359 88 800 1300

Send an message: info@coggraphics.com

Follow us: Facebook or Instagram

The undisrupted operation of this website requires an advanced technology called user-side cookie. By using the website you accept that you like chocolate cookies.