RUNNER App

As the name suggests, RUNNER App is a personal project of a mobile application for runners, that aims to solve the lack of motivation to practice sport, especially when you're a lonely runner, providing at the same time the essential functionalities to run and keep track of your performance.

Methods used

Secondary Research, Affinity Diagram, User Persona, User Story, Problem Statement, Competitive Audit, Mind Map, Information Architecture Diagram, Hook Model, Low-fidelity Designs, High-Fidelity Designs, Prototyping & Iterating.

Tools

Figma, Balsamiq Mockups 3, Whimsical, Photopea, Previewed. 

Timeline

This project took about two months, between March 2021 and July 2021.

The challenge

Installing an app to run is the easy part. The most difficult is to start running and keep motivated to return one day after another until the user builds a new habit (great habits are formed daily). And if the user has no companion to run, some extra effort is needed to keep the routine.

Also, for users who are starting to take the race seriously, some doubts will emerge about stretching exercises, what you should eat before, during and after a run, what are the best sneakers for different distances and the shape of the feet, and, as soon as you start to compete in official races, you want to know the calendar of the running events.

Foundational research

To understand runners and running app users, I searched for research papers about this topic and found an excellent study from 2017 with valuable qualitative and quantitative insights:

• Running population: In the EU-28, there are approximately 50 million running participants. In the US, approximately 42 million people.
• Running target users: Running attracts diverse participants with different socio-demographic characteristics (e.g., age, sex, and socio-economic status), motives (e.g., health, freedom, ...) and running experience. However, these apps still require a more personalized approach to target runners.
• Running motivations: The running boom is consistent with the movement towards more recreational, unorganized, and lighter forms of sports. Some of the qualities of running are its health focus, with hardly any restrictions on age, no specific infrastructure, and can be practiced independently of time/place.
• Running apps target users: are more likely to be used by younger, less experienced and involved runners.
• Running context: There has been a shift from running in private track and field clubs to large numbers of people running individually or in small groups. The "new" carrier of the growing popularity of recreational and unorganized running are running events.
• Guidance: Personalized guidance and support is losing ground, often resulting in drop-out due to injuries or demotivation. Substantial guidance is necessary to maintain sensible and sustainable sports participation among novice and less experienced runners.
• Devices: Sports and physical activity monitoring devices contribute to a healthier lifestyle and are becoming important in the direction of a healthier lifestyle. These electronic devices also play a role in supporting and monitoring large groups of runners, who lack professional training and coaching.
• Organizational context: From the study participants, 58% have an individual organizational context, 22% friends, colleagues, small groups and 20% clubs
• Training frequency: From the study participants, 43% train 2 times a week, 30% train 3 or more times a week, and 27% train 1 time per week.
• Attitudes toward running: Running is a sport easy to practice (e.g. I can practice anytime), perceived advantages (e.g. running gives me energy), and motives for quitting, both individual (e.g. I would quit running if I get injured), and social (e.g. I would quit running if my running friends stop).
• Consumer profiles: with an higher probability of usage of apps by event runners:
  • male, age 36-45 years, high education, 2x/week, individual organizational context, 1x/year events
  • female, age 36-45 years, low/middle education, 2x/week, individual organizational context, 1x/year events

Affinity Diagram

Using the affinity diagram, I synthesized the research insights into easy-to-read and process insights, organizing them in groups with common themes or relationships.

Persona

Meet Steve, my fictional persona for this project. He wants to run a marathon but he's struggling with the lack of a proper workout plan and company to work out with.

User Story

By translating Steve's needs to a user story, a one-sentence statement that is short, specific and goal-oriented, I focused the project on that user's perspective.

Problem Statement

To obtain more clarity about the user's goals and identify constraints that prevent those goals from being accomplished, I resorted to the problem statement exercise.

Competitive Audit

By comparing my competitor's apps it became obvious that none of them provided free workout plans, a way to organize workouts with other runners, and content about nutrition and exercises (the partial exception was Pacer, which provided free videos with exercises).

Mind map and information architecture diagram

With the research made until this point, I already had a macro idea of the app structure, but to have a more precise visualization, used a mind map where I started to draw the main areas and respective ramifications, to understand where each part fits.

Afterward, used an information architecture diagram to make sense of the content, the relationship between the different pieces of information and the main flow of the user, like the path for a logged in and logged out user.

The Hook Model

By now, I already had a pretty good idea of Steve's needs and knew that the competitors product fail to satisfy those needs. Still, I had to solve the biggest issue. How to create a new user habit? How to make a user return to an app, day after day, and commit to a plan that has well known benefits, but so many people fail to fulfill?

Did you know that, according to an article published by the Hustle in January of 2019 (pre-COVID), 63% of gym memberships in the United States go completely unused, and 82% of gym members go to the gym less than once per week? And these are paying customers! What can we expect from a free app?

Enters the Hook Model created by Nir Eyal. In his bestselling book "Hooked: How to Build Habit-Forming Products", he explains how to use an actionable framework that top tech companies have been using for years to create user habits. A pattern that he calls "the hook" (you can read about it in this excellent article from UI-Patterns or see some Nir Eyal's talks here). A hook is a cycle of events, engineered to keep users coming back and has four parts: Trigger, Action, Reward and Investment.

After analyzing all the data, I started to fill each quadrant of the Hook Model. Social proof, or the need of human beings to follow the actions of others to conform to a social standard, plays an important role, where the friend's posts and sending/receiving invites are powerful external triggers to start to or continue to use the app. The negative emotions found in the internal triggers can cue users to act to surpass those feelings.

After receiving a trigger, the expectation is that our users start a workout plan, accept or send an invite, or just go out for a run.

Rewards give a sense of fulfillment, happiness or satisfaction, and RUNNER App has plenty of them.

The investment in an app is what builds a habit cycle, because at some point the user has invested so much time and effort, that he becomes emotionally invested with the app.

Low-fidelity designs

With the app architecture and features defined, I started to draw low-fidelity screens with Balsamiq Mockups 3.

Branding

For the app logo, I was looking for a modern, bold and dynamic typeface, and the Sansation font had that look. The subtle junction of the "N" letters, while using the turquoise main theme color, communicates power, precision, strength, velocity and confidence.

Onboarding sequence

Starting with the splash screen (that features one of my running photos 😀), the user goes through a quick set of screens where he can set up his avatar (powered by the Samsung Camera Emoji), input the main metrics needed to provide more accurate statistics, and register by email, Google or Facebook. After the onboarding sequence, the flow ends in the home screen.

Home

The empty state home screen (on the left) features one of my illustrations, which gives the needed background for the avatar and fills the empty space. The "Run now" and "Create a personalized plan" buttons are shortcuts to start running right away. Until the first run, this will be the first screen that the user will see when entering the app.

As soon as the user has made some activities, the home screen will display the most significant metrics, like total distance or average pace. A schedule area highlights the next planned activities.

Navigation

The main navigation of the app is at the bottom, easily accessible while handling the smartphone with one hand, which may be a need for a runner that may have the other hand occupied with a bottle of water or something similar.

As you saw in the mind map and information architecture flows, each main navigation category has subcategories, that appear in tabs at the top of the screen. Still, the premise of one-hand handling isn't compromised if you're running alone, because that's the first option in the "Run" section.

Inside a category, the user will always have a back button in the top-left position of the screen.

Depending on the subcategory, a cards navigation may appear. One example is the "Exercises" subcategory, inside the "Trainer" category, where the user chooses the type of exercises (warm up, stretches, performance).

Run alone

When the user enters this section, he sees the most relevant information: his location, snickers and music service. If nothing changes, he only needs to click on the start button. Additional settings, like phone orientation and audio feedback, can be managed in a simple overlay.

The screen presented during a run displays the distance run, the total time and average pace. The layout is simple to avoid distractions and to permit a quick reading while running.

After a run, the user can see the activity detail, with the usual metrics and performance graphics. He can also see how many points he earned, which can be used to buy clothes and accessories for his avatar, giving another incentive to do exercise.

As expected, each activity can be shared on social networks. The difference to other apps is that the user can display his avatar over a gallery photo, showcasing the clothes he bought with the points accumulated in the exercises. This is also a good alternative for the selfies that many runners don't like to take. 😁

Run with friends

Based on the competitive audit, none of the other apps has the functionality to schedule a run with friends at the same time and place. The flow is simple:

• The user that creates the event can assume his current location or search for another location.
• Selects all or some of his friends from Google, Facebook or from the RUNNER app.
• Defines a date and hour.
• Sends the invite, that can be canceled if needed. On the same screen, the organizer can keep track of how many friends accepted the invite.

All the selected friends receive a notification from the app. If the app is installed, clicking on it opens the app, displaying information about the location, date and time of the event.

30 minutes before the event, all users, including the organizer, receive a reminder notification. Clicking on it takes the user to the screen in the app where he can cancel the acceptance of the invite and click on the directions icon to open the default maps application.

Run near you

Don't have friends to run? No problem! From my experience, the runners' community is very welcoming, so, what if you could invite users from the RUNNERS app, that are near you, for a run starting in the next 30 minutes?

• Access the "near you" screen to see how many users are available and invite them. If needed, in the settings overlay you can define the default countdown for this kind of event.
• After the organizer sends the invite, the countdown is displayed, as well as the users that accepted.
• After this, the mechanic is similar to a run with friends event. Notifications are sent, and the users can use any maps app to reach the organizer and start to run.

Race yourself

This mode is one of my favorites! I love racing games with cars and some of the games I played (usually rally games) had a mode where you could see like a phantom image of you in a previous race, to see if you were faster or slower than before. My TomTom Spark Watch has a similar mode, where it shows if you're first or second and the time interval between them.

• The user starts by selecting one of his previous races, to which he would like to compete.
• After this, the user only has to start and follow the same path he did before.
• During this run, the screen focuses on the position and distance between places, displaying below the target distance and completed distance.

Personal plan

One way of building a workout habit is to follow a plan with a goal, like running a marathon or improving performance. Depending of the goal, the personalization options could differ. For the "Lose weight" goal, the user can define a start and end date, and the available days to workout, including a day with more available time to do a long run. Then, the user can see the full plan, week by week. By clicking in each exercise he can see detailed instructions, like the purpose of that exercise and expected pace.

Exercises

By the competitor's benchmark, it's obvious that virtually all apps are failing in terms of educational content. Amateur runners need guidance to learn what kind of diet they should follow to get the most out of their runs, to recover quickly, or what exercises they should do before and after a run to avoid injuries.

Exercises should be presented in video format, for easier understanding.

Conclusion

Looking at the end result of this project, I feel very satisfied with it. I understand why subscription plans are part of the business plan of most running apps, but with that, there's so little offer for non-paying users. Also, I believe that the RUNNER app could really help to create the healthy habit of running, so who knows if someday I'll go the next step. 😉