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