Adidas Runtastic

Runtastic is a leader in the digital health and fitness space, providing optimized tracking solutions for collecting, managing and analyzing training data. In my time with the company, I worked on their suite of apps both before and after the startup was acquired by Adidas in 2015.

Company

Adidas Runtastic

Timeframe

Sep 2014–Dec 2015

My role and the team

A successful suite of apps

Health and fitness is an extremely competitive space for mobile apps. In a team of four, I was one of the designers who took care of the design of the whole suite of Runtastic apps (about a dozen at the time). I took the lead on multiple projects for both iOS and Android, working closely with Apple and Google on their wearable operating systems and early versions of Material Design. I was part of cross-platform user research and user experience discussions, as well as producing assets like icons and illustrations.

Mini case study #1

Sleep Better app

As dedicated fitness and sleep trackers were increasing in popularity, Runtastic set to the vision of giving the community an app to learn more about their sleep patterns without the need of a device other than their phone. To build Sleep Better, the team perfected sleep algorithms working together with a sleep lab and gaining insights from sleep specialists. Note: the Sleep better app was discontinued in September 2019 - 4 years after Runtastic was aquired by Adidas.

Setting an alarm in the home screen.

When I joined Runtastic, in September 2014, the launch of Sleep Better was due in two months, but the Android design was far behind the iOS design, with many cross-platform decisions still to be made.

Two Android phones showing the home screen of the app and the statistics screen
The home screen changes color during the day (left). The statistics screen (right) gives the users plenty of data about their sleep patterns.

I took the responsibility of designing most of the Android screens of the app, also taking part in cross-platform discussions. Working close with the three other designers in the team, developers and the project manager was an effective way to get me up to speed quickly in the new company. Five months later, in March 2015, I was the main designer responsible for Sleep Better for iPad and Android tablets.

The sleep diary detail on a phone, and the sleep diary on a tablet in landscape, showing both list and detail
The sleep diary adapts its layout for phones (left) and tablets (right).

A great effort was put into aligning the two platforms (iOS and Android) as much as possible while making the experience feel native to both. Sleep Better for Android was the first Runtastic app designed following Google’s Material Design guidelines, which were extensive but still immature, and kept on changing quite often. As a result of this, we quickly had to find new solutions and adapt our designs. Feedback from internal and external users was core to how we iterated on our designs, and we run extensive user research to refine our concept and improve the usability of the app. In addition to this, we collaborated with the engineering team to improve the sleep tracking algorithm.

2 iPads showing the sleep diary
The sleep diary list (left) and detail (right) on iPad in portrait.

Sleep Better's launch was Runtastic’s most successful launch ever, with many downloads in the first week and huge featurings in the app stores and media coverage. The quality and speed of my work were really appreciated by the team and were very important for a timely launch of the app.

Mini case study #2

Libra for Android

Runtastic Libra is a smart scale that analyses body metrics — including weight, body fat and water percentage — and can transfer data to a smartphone using Bluetooth. The company had launched the scale in the Fall 2013, but one year later the companion app was still only available for iOS. Customers were often writing to the support team and on social media, asking when the Android app would finally be released. Note: after Runtastic was aquired by Adidas in August 2015, the company stopped selling hardware and the Libra app was discontinued in September 2019.

The Android robot in front of the Libra scale
The Android robot shows you the Runtastic Libra scale. Photo: Jakob Lehner.

I was the lead designer of the Android app, discussing the screens with the designer who had worked on the iOS version, and working closely with the developers who were implementing the UI. The synergy with the project manager and the developers was great, and led to a great human and professional esteem among the members of the team.

The Android robot in front of the Libra scale
Opening a measurement from the weight history.

The iOS design was taken as a starting point for the Android app, to offer a consistent experience across the platforms. Rather than just reskinning the iOS app, we gathered feedback from existing users to see how we could improve the experience. We identified and interviewed external users as well as some colleagues from other teams in the company who were using the scale with the iOS app.

Two Android phones showing two screens of Libra
The home screen of the app (left), and the screen that is displayed while a measurement is in progress (right).

While a few users complained about Bluetooth connectivity issues with the scale, the general feedback about the UX was positive. However, the graph showing the history of the measurements was obscure to many. The redesign of the legend at the right of the graph, with clear units of measurements for both weight and body fat percentage, led to a massive improvement in our usability testing sessions.

The weight history graph on iOS and Android. the Android version adds the units of measurement.
A comparison of the weight history graph in the old iOS design (left) and Android (right), with the redesigned legend at the right of the graph.

Some power users also complained it was hard to keep track of changes in their body composition. Opening one measurement at a time — and remembering each value — was the only way to do so. To make this comparison easier, we decided to provide the users with a full body composition graph showing the percentages of each value (body fat, muscles, tissue, bones) as they change through time.

In addition to this, when users set goals in the app (like “lose 4 kg by the 1st of June”) they were not able to see how they were progressing toward that goal in the weight history graph. With the addition of a simple dashed line, we made that very easy to understand at a glance.

The full screen body composition graph, and the weight history screen, which includes a graph of the measurements on the top and a list at on the bottom
The full body composition graph (left) satisfies the requests of power users. The dashed line (right) makes it easy to see the progress toward your goal.

The Runtastic community was really happy to finally be able to use the Libra scale with Android devices. The interface was one of the most praised aspects of the app in the reviews in the Store. In addition to this, the great team work on this project made the whole team look forward to working together again in our next project.

Mini case study #3

Runtastic app

Shortly after I started working at Runtastic, the company launched the Material Design overhaul of the flagship app. In the following months, we received some feedback from Google and I took the responsibility of redesigning some of the screens as well as designing some news ones. The newly introduced running leaderboard, for example, added an important social element that significantly increased user engagement.

The running leaderboard as it appears on Android devices
The running leaderboard lets users compare with their friends to know who is running the longest distance

Runtastic’s imagery was quite inconsistent when I joined the company. During my time there I produced many illustrations and assets, leading the team effort to find a consistent style. As a part of this work, I redesigned the the Runtastic icon set, optimizing the icons on the pixel grid and using consistent visual traits across over 100 icons.

Four icons of the old set compared with the icons from the new set
Some icons from the old set (top) compared with icons from the redesigned set (bottom). The new icons are simpler and more consistent.
Two icons of the new set showing that the design fits the pixel grid perfectly
All the icons from the redesigned set are based on a 48px grid and share common visual traits.

Following these updates, the Runtastic app for Android was included in the Editor’s choice collection and was one of the 15 apps included in the Material Design Showcase at Google I/O 2015.

A tablet showing Runtastic among the 'Apps with best-in-class Android design' on Google Play, and a phone showing Runtastic as number 1 app for Health & Fitness on Google Play.
Runtastic was featured in the Material Design Showcase at Google I/O 2015 (bottom left) and was the top health and fitness app in many markets (right).

In the Spring of 2015 Google UK launched a campaign for Android with the slogan “Be together. Not the same.”, in which Runtastic had a huge featuring.

The Android site featuring Runtastic on the home page
A screenshot of Android.com featuring the Runtastic app in 2015.
The London underground with a large Android billboard showing Runtastic
Android billboards featuring the Runtastic app in London in 2015. Photo: Google.

The Runtastic app was also featured in the “Build better” video series by Facebook, for the F8 conference in 2015. The video tells the story of rapper Masta Ace, and shows how Runtastic is part of his life and the lives of many other people around the world.