Introduction
Runnr is a running app that tracks your runs and your progress but also provides you with free streaming music depending on the mood, pace, type of run or distance you want to do. Runnr not only keeps you on track with your progress but also keeps you motivated by providing you with the tunes to keep moving.
I worked with Jimmy Foulds for this project. It was clear from the beginning that we needed two different art directions. From there, we eventually ended up with two very different looking designs that function exactly the same but are geared towards different kinds of users.
Research
Through research, we found that the target user was 23–35 years old. They could be male or female, and they could be students or young professionals. We designed for iOS users. Our keywords were “newbie”, “zen”, “driven”, and “work hard play hard”.
While this seemed quite broad, it did help us split into two different directions: one would be centred around “newbie” and “zen”, while the other would be geared towards those who are “driven” and “work hard play hard”.
The Design Process
Design Inception
The why: A personalized experience to help positively impact lives through exercise
This was shared between both directions, since at its core, this is what Runnr is intended to do. It was the mood and the visual language that had to be different.
Mood: motivating, strong, progress, fast, steady
Since I chose the direction that was geared towards runners who are more driven, I came up with a set of words that described the mood in terms that would be more relevant to them. This led to the visual language that would be used for later parts of the design process.
Colour: bold, dark
Space: tiled, full use
Shape: square, angular, hexagonal
Movement: forward, deliberate
Style Tile & Brand Guideline
I started by creating a mood board based on the design inception:
Having decided on a colour scheme from the mood board, I went about creating a style tile:
For the style tile, I created a logo that was in line with the art direction: to help users become faster runners. The typeface, Trade Gothic, was quite useful for conveying that, especially the Bold Oblique styles. The graphics are kept simple in order to emphasize the app’s functionality while having as little nonsense as possible.
The bottom nav bar and the general appearance of tiles and buttons were defined in the style guide. Hex codes for colours were defined so that the colour scheme would remain consistent across all the screens. I also settled on a black background to complement the flat design and to keep the app’s functionality in focus.
User Testing
Throughout the design process, I tested my designs and adjusted them accordingly based on feedback. In particular, the size of various buttons, text, etc. were altered.
Testing showed that users wanted a smaller nav bar on the bottom, so I adjusted it accordingly:
In addition to the bottom nav, the font in the title of the screen was also changed a number of times to provide a sense of hierarchy. After finalizing this, I updated the style tile and style guide to reflect those changes.
Prototype
Conclusion
Through this project, I improved my use of colours, typography, and space. I also found out that I naturally tend towards simpler, flatter designs. The highlight of the project for me was creating screens in Sketch, since I have a background in UX design and I’m quite interested in seeing where they intersect and how they interact with each other.
For future projects, I would like to add more graphics to improve my versatility as a designer. While a flat, semi-minimalist design worked quite well for this project, it would be nice to try something different for a change.