RUNNR
inspire your runs
TASK
Design a user interface library for an IOS app with two design outlooks.
TOOLS
Hand-drawing, Sketch, InVision
CLIENT BRIEF
Runnr is a running app that tracks your runs and the progress but also provides free streaming music. The curated playlists are divided by mood, pace, type of run or distance that is desired by user. Runnr keeps you on track with your progress and motivates with tunes to keep you moving.
Key Functionality
- Tracks: distance, speed, intervals, calories
- Curated mood playlists: strong, zen, fast, sluggish, happy, sad
- Curated
Target Audience
- 23–35 yo male and female
- student or young professional
- Keywords: newbie, zen, driven, work hard play hard
PROCESS
_RESEARCH
I first started by interviewing those near me that fit the target audience to see what they thought about running apps with music, and which ones are their favourites. These were some questions asked:
- What is the purpose of your runs?
- Where do you like to run?
- Do you listen to music when you run? Does it influence how you run?
- Do you listen to your own music or use an app?
- What type of music do you listen to?
- What do you look for in a music app?
- Is it important to track your running performance? If so, what are they?
- What are the colours you associate with a music/running app?
- Do you have a music/running app that you are currently using?
- What do you like/dislike about it?
_FINDINGS
Results showed two distinct type of users:
Leisure runner (Energetic)
WHY —
To feel energized and relieve stress during workouts

MOOD —
Refreshing, energetic, relaxing
COLOURS —
bright, rainbow
SHAPE —
Rounded edges, powder explosion,
SPACE & MOVEMENT —
Minimal, purposeful
Based on the design inception, the mood board above was created. The mood board is inspired by the colour run and music festivals. Both are events where music and running is celebrated, and expressed with a lot of colour. The mood of the board is very energetic, vibrant and happy.
Intense runner (Badass)
WHY —
To feel motivated and empowered for/during a run

MOOD —
Strong, super charged, intense, badass
COLOURS —
Black and white, accent colour,
SHAPE —
Arrows, straight sharp lines, sleek
SPACE & MOVEMENT —
Directional, moving forward
The above mood board was created based on the design inception. The colours are black and white, straight lines moving forward, and arrows. The animals represent strength, wild and power.
_STYLE TILE

Then, I created a style tile was to visualize the colour elements and icons. A logo was created incorporating headphones to make it known to the users that it is both a running and fitness app. The headphones mimic the shape of an ’n’ and is the same height as the rest of the letters, and the speaker part of the headphone is the same shape as the rounded circles in ‘R’, making the logo appear simple and clean.

The style tile above was created to match the logo, icons and images to see if it aligns with the creative direction. The logo was created using a very bold font, Anurati. The sharp edge of the ‘U’ was adjusted to match the angle of the ‘N’s to make the logo appear sleeker and have movement.
DELIVERABLE
STYLE GUIDE

I then created a style guide to flush out the elements from the style tile by including the typography, logo, icons, buttons, and image inspirations.
I chose to use the typeface Source Sans Pro, as it is a very simple, easy to read, and friendly. It goes well with the style of the logo as well as the theme of the design approach.

This style guide was created based on the elements in the style tile. Tungsten was chosen as a typeface for the text of the wireframes because it is a strong and simple font that is clearly legible.
WIREFRAMES
These are the finished visual wireframes.

The wireframes are kept simple as it is an app that would be used while running. The colour run theme is present in all of the pages, with bursts of colour in different parts of the slide. The different moods are represented by a variety of bursts in colour to reflect the mood, while adding to the energetic personality of the app.
Interact with design on InVision here

The wireframes are kept simple with clear icons, black and white colours with accents of red for emphasis. The layout is sleek with black background to motivate the user to push through their run. The different moods are represented with a variety of animals that are powerful ‘runnrs’.
Interact with design on InVision here
REFLECTION
I wanted to make sure to create two visual designs that were very different to each other, but both reflect the functions of the app. These two were created based on the initial interview process, with two very different types of runners. I am proud of how I was able to come up with two very drastic, yet powerful layouts. I do feel that it was difficult juggling two layouts and some of the wireframes don’t look as polished as I’d like them to be.
