RUNNR Application Case Study

Sayaka Sekishima
5 min readApr 30, 2018

Objective:

Design of UI for a mobile music and running application in two different art directions. The goal is to create the design for students and young professionals which they can maintain physical and mental well-being by running.

Art Directions and Team:

Nature and Zen: Julian

Case Study: https://medium.com/@tempestfunk/runnr-a-ui-app-design-exercise-944d5e72bdcb

InVision: https://invis.io/P4HO8GXWEKH

Sporty and Motivative: Sayaka

Case Study: This page

InVision: https://invis.io/RCHS5EA97KU#/293961838_Artboard_1

Tools: Adobe Illustrator, Photoshop, Sketch

Brief:

Function of the application

・Tracks data: distance, speed, intervals, and calories.

・Provides a playlist depending on users’ mood and run type.

・Allows users to play or custom their own music from their music library.

・Shares run progress and playlists to other users.

Keywords

Play hard and work hard, zen, newbie, energetic

Process:

Inception Worksheet

Based on the brief, I explored the main purpose of using RUNNR and the mood. Since target users are students and young professionals, I assumed they want convenient, enjoyable, and stress relieving application to use. Also, by considering the audience, I wanted the application to look friendly and exciting for both beginner and advanced runners.

WHY: Run to maintain physical and mental well-being.

MOOD: Friendly, Exciting, Relaxing, Feeling Good, Motivative, Cheerful

Colours: Neon, pop and bright colours: pink, blue, yellow, green

SPACE: Pop and Fresh look for the user to keep up with their running.

SHAPE: Soft geometry like rounded squares, rectangles, triangles and soft circle to show friendliness.

Movement: Spring, since I imagined young people want to run around or run in fast pace.

Mood Board

For the mood, I chose motivative, sporty, and feeling good since I wanted the application to be appealing to young adults. From chosen moods, I selected four primary colours: neon pink, neon blue, neon green, and neon yellow. I chose neon colours not only because of energizing and sporty mood but also because many people listen to techno like or EDM to have a productive workout. Also, I chose soft geometry, like rounded corners, to illustrate friendliness and decided to create spacious pages with flowing effect background to show openness.

Initial Mood board (left) & Revised Mood Board (right)

Shape and Movement

I selected rounded geometry to convey friendliness through its organic curved corners and lines and show trust and hint of crisp through geometric aspect. Together with soft geometric shapes and selected colours, I was able to create the movement that springs.

Comparison

My partner, Julian went opposite direction which he conveyed nature and zen feeling to his mood board. He selected mellow organic lines, earthy tone colours, nature pathways, and outdoor running image to show refreshening and soothing style.

Style Tile

After creating the mood board, I added more details to UI elements such as defining background, colour palette, and typeface.

Style Tile

Typography

I selected Open Sans, one of the popular typeface that is been used in mobile application. It is a neutral and friendly appearance that ables to deliver strong communication with users.

Colours

I selected following colours to create active, amusing, and relaxing atmosphere:

  1. Pink = calming, non-threatening, friendly
  2. Blue = focused, calming, motivative
  3. Yellow = upbeet, cheerful, optimistic
  4. Green = refreshing, well-paced energy, spring

These four colours represent strong liveliness and by using neon based colours give illusion effect which people can escape from the reality to de-stress themselves.

Overall, the style tile brought the whole energetic atmosphere and good vibes together that could contribute to productive and relaxing workout.

Style Guide

More specifications included with the delivery.

Style Guide

I specified typeface, font size and direction, colour palette with hues, logo, and icons. Also, included possible background colours and texture with sample types and icons as examples to use.

Drafts

I spent more time on Home and Mood Type screens to figure out the design by exploring colours, shapes, sizes, and texture.

Home Screen

I started with white plain background with a circle logo and the title. Overall, the first draft looked very plain and uninteresting so I added a neon background with radio effect texture. I also simplified the logo and created more openness. On final step, I re-sized the brand name and merged with the logo to have a uniformed look.

Mood Type Screen

For the mood type screen, I explored shapes to highlight the heading and icon and subtext sizes. I decided to use the soft square as an outline for the heading because the shape contrasts with rounded icons. Also, by the second version, the screen looks very open but foot navigation was blended to main menus. So I drew a thin line in between main menus and foot navigation and reduced the outline and icon size to be differentiated.

Run Type Screen

For run type screen, I did not make a lot of changes but spacing. Like mood type screen, I added a line to separate the foot navigation from the rest and reduced the size of icons and subtexts. I also used the same heading highlight to uniform with the mood screen.

Sound Track Screen

Finally, for the sound track screen, I first selected dark tone for the background to differentiate from other screens, however, because the colour is darker than the rest, it did not harmonize well. I changed to yellow base with green radial effect on top to have more pop style and matches to the music.

Result:

RUNNR Application Prototype

Conclusion

Overall, I was able to translate colours, space, and mood to the final prototype but it was challenging for me to work with sizing depending on the priority context. Few screens had similar size of icons all over and they were blended together which I had to re-consider the hierarchy. Also, finding simple and direct icons for menus and navigations was another challenge that I faced because icons are subjective to everyone.

--

--