The goal of this project was to create an engaging, impactful and well-designed app utilizing a User Interface library.
In order to do this, I was tasked with developing a Mood Board, Style Tile, and Style Guide, which when combined together created a UI Library design that both relates and engages with the target audience.
What is RUNNR?
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. (RUNNR Design Brief)
The design brief provided me with some initial research such as the target audience the client was trying to reach. This was a great start as I was able to gage an initial art direction based on the keywords they provided (newbie, zen, driven, work hard play hard).
The Target Audience is listed as:
- 23–35 y/o
- Male or Female
- Student or young professional
These although didn’t allow me to understand the insights and emotion of the target audience. I decided to do further research by looking at competitor apps and asking colleagues what motivated them to run and what they liked in a running app.
Competitor Apps
The top running app in the Apple App Store is the Nike Run Club app. I assumed that there was a lot of research dedicated to the visuals of this app and decided to use it as the main competitor in my comparison research.
I noticed that the app design utilized contrasting colours such as black and white and complimentary colours red and blue. I concluded that the contrasting colours provided an easy to read design that could be understood quickly from a glance. Nike likes to use bold popping colours such as bright green to grab a user’s attention. The complimentary colours and bright colours give a sense of energy and are visually pleasing to look at.
User Opinions
Unanimously users I interviewed stated that they used a running app to track their runs and keep them motivated. They stated that the running screen was the most important screen because it provided them with key running metrics and allowed them to control their music easily.
Next, I asked what they looked for most in a running app’s visual design. Most said they need the app to be simple and easy to navigate as they didn’t want to waste their time figuring out the app instead of actually running.
From my research I knew that going into my design process the most important aspects of a running app were easy usability, motivation, music controls, and data tracking.
Why
Why would someone want to use Runnr? I need to establish a well-defined why before I could start thinking about putting the app together. I decided on the following:
“To provide a simple experience that seamlessly integrates motivating music into a user’s run.”
This why hit all the key points that I uncovered from my research and also established my design direction of “Easy Run”.
Mood
For the mood of the app I wanted to take key elements from the Nike Run Club app, but also make it feel different. I wanted the app to not look like a clone of every other running app on the market but have key competitive differences that would make it a viable alternative to other top apps.
I chose to make a simple, playful, bright, and casual mood. I wanted the app to feel inclusive and welcoming, while still motivating and simple to use.
Colour
Nike used complimentary colour harmony to get its visual cues across to the users. I wanted to do the same but keep with my simple and light mood. I decided the best option was to use three primary colours; blue, red, and yellow.
The colours are simple, yet the building blocks of every other colour. These colours are taught to us at the earliest age and thanks to colour psychology represent ease, simplicity, and playfulness.
Movement
When running there is a sense of intent. People run for a purpose. I wanted the movement of the app to match this feeling of constantly moving forward through a fluid movement.
Shape
The shape will take cues from a running track. A track is even and flat with linear lines and rounded oval corners.
Space
I want the spacing of the app to feel light, even, and open using white space where needed and gradients that flow through to transparencies.
When thinking about the mood of the app the main imagery that came to my head were retro athletic brands. The solid retro colours, gradients, and geometric shapes combined with the elements of the design inception create a design that is in line with Nike Run Club app but is visually different.
I chose to slightly tint my primary colours and add an 80’s print to give more of a retro feeling. The geometric shapes add a playful simple feeling but aren't too juvenile to keep with the target market. The abstract transparent track exemplifies the linear visual language and also creates interest. The man in the tracksuit showcases the athletic feeling of the app and the mountains create a sense of accomplishment and motivation.
Colour
Colour was key when designing the Style Tile and Style Guide. I wanted the user to feel like the app adapted to their selected difficulty of run. In order to do this, I looked at colour psychology again.
Yellow is described as being energetic, so I chose this colour to represent “Power Run” a combination of music set to push you harder then you normally run.
I selected red to represent “Your Run” a pace that you’re comfortable with, but also provided a feeling of determination to run your race.
Blue represents stability. I chose this colour to represent “Easy Run”. This curation of music is intended to motivate you during a cool down or longer steady runs.
Iconography
Another key factor when designing was iconography. Apps are condensed to a small screen and don’t leave room for worded CTAs. I wanted to use icons that were easy to understand, but also relative to my design. I chose sharp geometric shapes as my icons.
Typography
For Typography I decided on Century Gothic a geometric rounded san serif typeface. The shapes in the typeface resemble race lines on a running track and create a light simple feeling.
Logo
I wanted the logo to encompass the overall mood of the app. By combining the curved ends of a race track I was able to create an abstract R.
The tinted primary colours that are shown throughout the app are used again in the logo as well as the different opacities of each colour. I believe that this design showcases the mood of the app well.
Symbols and Buttons
The main app buttons are designed based on the same shape used to create the head of the R in the logo. They give off a feeling of moving forward. All other symbols and buttons are based off of this design having rounded points.
Each main button’s colour scheme changes based on what running mood is selected. When creating the symbol library in sketch this was a hassle. I had to create a different symbol for each of my screens because of the change in colour. There were some symbols that could carry over, but most need to be saved as a separate one because of their colour.
I used different opacities and gradients of the main colours to keep a light, airy and swift feeling. This can be seen in the clock symbol and the main run buttons.
The Ghost Buttons are rectangular and have a rounded edge. The design purpose of these buttons is to create a secondary feeling. The buttons aren't main action buttons, but take you to more information that isn't a part of the main function of the app.
Style Guide
I created a style guide that includes all the specific details that would be needed to create additional pages of the app. Since the app changes based on the runners selected run I created a section of main pages in grey that are back by the colour gradients.
For this project wireframes were provided. I decided to choose four frames that were connected and when placed together could easily show user flow in a final mockup. I selected the following pages:
- Sign Up / Login
- Select Type of Run / Mood
- Run Detector (tempo, timing, km, etc)
- Currently Playing
All the wireframes were basic layouts you would find in any running app. I took the wire frames and adapted them to fit an iPhone X. Since I had created a comprehensive style guide I was able to easily drape my design over the wire frames to create a first draft app. The symbol library ensured that the visual elements in Sketch were properly named and organized.
Only minor tweaks were needed due to utilizing atomic design. I mostly adjusted the size of text and buttons after previewing the app in Invision.
The final design I feel captured the “why” I set out to achieve. The design of the app provides a simple experience that seamlessly integrates motivating music into a user’s selected run style.
The retro feel is present but isn’t over powering and allows the app to still feel current. The primary colour scheme paired with white space executes what I intended allowing the app to feel simple light, inclusive, and easy to use.
I made sure to think out of the box and pay attention to small detail when applying the colour scheme across each run type. Below you can see as the intensity and colour of the selected run changes also do the mountains in the background. I felt this added a subtle variance between the running screens and made the app feel more personal.
Designing in Sketch was a new experience for me. It was important to optimize the symbol library during the style phase because once I started working with the wire frames everything fit together and felt cohesive across all pages. Learning the different design, typographical and layout tools in Sketch will help me create great prototypes much faster in the future.
Prototype
Follow the link below to view RUNNR in action!
See more on my portfolio at www.devonseidel.com
