Katerina Samoilis - UX Designer
User Experience Designer
Runroute native app_thumbnail 1.png

RunRoute native app design

RunRoute native app design

Runroute native app_thumbnail 1.png
 

The Brief

For this project, the brief was to design a native app tailored to address and solve a problem that a classmate was facing in their everyday life. During this two week sprint, I worked individually whilst receiving constant feedback from the classmate I was designing the app for.

Discover

User interview

To kick off the research, I interviewed my project partner Emer. Our discussion organically focused on our eating and exercise habits,as we were both health conscious and enjoyed running and exercise. Emer is new to London and lives close to Regents park, where she goes running in the mornings. As she doesn’t know the area well yet, she runs the risk of getting lost on route and is unsure of what new routes would be suitable for her to try. This information helped identify what the focus of the application should be and directed what in-depth questions had to be asked.

Runroute presentation.011.jpg

In our second,more in depth interview, Emer mentioned to me that she got lost that morning trying to run a new route in the park,and ended up having to run close to traffic as she tried to get herself back home. During this interview we delved deeper into pain points like this one, as well as what she enjoyed about running. Concept mapping and storyboarding helped distill this information and group it further, as well as think of what a wider audience for the app would be and how specific features could dress certain issues.

GA Project 1_Katerina Samoilis (dragged) 2.jpg

Define

The discussion helped define the problem faced and reach a hypothesis about how it could be solved, and which steps needed to be taken.

Problem:

Emer wants suggestions on routes for her run now that she’s moved to a new unfamiliar location, and needs to make sure she stays on track when trying the route out.

Hypothesis:

By creating a native app that suggests routes based on the user’s chosen location and allows them to keep track of their journey live, Emer will be able to have an enjoyable running experience in a new area without getting lost.

Develop

Generating user flows

User and screen flows helped translate this information into a detailed view of how Emer would journey through the app to reach her goal, and how her journey could diverge. For example, she may only want to search for a run and view the result on the map. However, she may prefer to also track her run if it’s a bit more complicated, to ensure she doesn’t get lost. This would take her into the live tracker functionality of the app.

Runroute presentation.014.jpg

Prototype testing

These flows were then translated into low fidelity sketches of screens, which were traced with Emer to determine whether steps were clear and addressed the goals she wants to achieve. A and B testing further helped eliminate unnecessary functions and ensure visibility of important ones.

Runroute presentation.016.jpg

The screens were then put into an interactive Marvel prototype, for further usability testing. Some changed made had to do with button language: for example both the ‘search results’ and ‘tracker options’ page had an identical button and command, which made users assume they weren’t progressing through the journey. By making the command on search results ‘run route’ and the command on the tracker notification options page ‘go’, users were aware that the live tracking of their run was about to commence.

Runroute presentation.005.jpg

Keywords and semantic differentials

With the functionality of the screens refined through testing, the look and feel of the app had to be defined. Focusing on keywords of how the app should make Emer feel was the first step: the experience had to be fun, and it was important Emer felt positive, energised, motivated, healthy and enthusiastic throughout. Semantic differentials helped determine the direction of the app further. It was important for it to be:

  • Fun but not without purpose

  • Informative but not overwhelming

  • Task focused but not demotivating

  • Health conscious but not restricting

Competitive analysis and industry trends

A competitive analysis of other running and fitness apps helped with identifying some industry trends and also defining where the app sat in comparison. A lot of running app logos use running figures to convey their purpose and avoid ambiguity, others (especially established sports brands) use the app name or simple geometric shapes. The range of colours used is quite wide: some apps (such as the Nike run and Adidas train and run) follow a very specific trend of dynamic photography, strong use of dark monochrome, and accents of eye-catching lime or orange for call to action and key information. Blues, turquoises, magentas and oranges were used by other apps, colours associated with calmness and health or action and alertness. As Emer already used the Nike run app, I decided that the feel of this app had to move away from the dark monochrome visual identity of Nike run, to show differentiation.

Runroute presentation.002.jpeg

Visual design

After A and B testing of various warm and cool tones, we settled for a palette of blues and white, using hints of magenta to attract attention and counterbalance the cool calmness of the blues. The logo conveyed the app function through a figure running on a track, with the addition of the app name, ‘RunRoute’ at the bottom, in ‘Lily Script One’, a rounded script typeface with curved elements that were reminiscent of a racing track.

Runroute presentation.003.jpg

For the app itself, the rounded sans serif typeface ‘Nunito’ was used, to convey the fun element of the app and increase legibility at times that the app is used on the go. Buttons and icons were also given rounded edges, to add uniformity and further convey a fun, playful mood. This was also reinforced with the use of visuals and animations, as well as congratulatory messages and a friendly, personal tone of voice throughout.

Runroute presentation.009.jpeg

Deliver

Implementation of the visual style described can be seen in the following screens. A low fidelity paper prototype can also be accessed here.

Runroute presentation.010.jpeg

Emer’s experience using the app

The design was enthusiastically received by Emer, and she was particularly fond of the friendly, encouraging tone of the app. When she opens RunRoute, she is able to browse routes based on her chosen location, and also tailor the results based on her needs. She can also view any routes she has saved. If she wants to, she can then access the live tracker functionality to ensure she stays on route when trying it out, and she can toggle how she can be notified by the app. When her run is complete, she is greeted with a congratulatory message and a summary of her time and progress during the run, as well as the option to rate that particular route.

Next steps

Given more time, these are a few further refinements and additions that could be implemented:

  • Contextual analysis and in depth testing of the live tracker functionality in a real life run setting, determining what notification settings are most suitable in this context.

  • Refined search parameters and the ability to further tailor a run based on needs, experience level and fitness goals, which would require further user research through interviews and surveys.

  • Building a community element and allowing users to communicate and rate runs, as it was important for Emer to be able to give feedback on a route based on her experience, or browse a new recommended route.

  • A world map display of saved and completed routes, as part of more advanced customised options for a personal profile, enhancing the gamification element of the app.