MILE 20
Messaging app that connects long-distance runners with their support system on race day.
PROJECT SCOPE
End-to-End App
ROLE
UX Research, Branding, UX/UI Design
PROJECT DURATION
100 hours
THE PROBLEM
Long distance races are physically, mentally, and emotionally draining. It’s no surprise that support from the crowds and people they know can completely change a runner’s mindset and ultimately, their race.
Some runners travel for races, live away from family and friends, or compete in runs that are difficult for spectators. But just because they are physically separated from their support system doesn’t mean they shouldn’t have access to them.
RESEARCH OBJECTIVES
Through user interviews and surveys, I wanted to:
Understand how runners feel most motivated and supported during their race
Discover what types of entertainment runners enjoy
Learn how supporters show up for their runner
GROUP #1: RUNNERS
Novice to experienced runners aged 18-65 who run long distances races.
GROUP #2: SUPPORTERS
All genders aged 18-65 who have supported family and/or friends running long distance races.
RESEARCH INSIGHTS
SUPPORT MATTERS
While it seems obvious, runners emphasized how special seeing friends and family was on race day. Support from those they know boosted energy, provided entertainment, and improved mood.
MEDIA INFLUENCES MINDSET
Runners all expressed that the entertainment they consumed directly impacted their performance. An engaging podcast or fun playlist resulted in a more enjoyable run and positive attitude.
RACE DAY IS CHAOTIC
Both supporters and runners experienced a feeling of craziness on race day. Supporters found it difficult to ensure they would catch their runner amid the crowds.
One clear need for running entertainment was an element of surprise. Whether this was a playlist on shuffle or a new audiobook, runners wanted to be engaged and distracted.
TARGET USERS
I found that novice and experienced runners both enjoyed the support from their community, but why they enjoyed it was quite different. More experienced runners viewed supportive texts and in-person fans as a welcome distraction, while more casual runners heavily leaned on that support for strength and motivation.
PERSONA #1: THE EXPERIENCED RUNNER
These athletes no longer rely on support and crowds to carry them across the finish line and are able to effectively self-motivate. These runners have less supporters on race day due to the frequency, location, and distance of their runs. Their biggest roadblock is staying mentally engaged and entertained.
PERSONA #2: THE CASUAL RUNNER
Recreational runners enjoy the mental, physical, and social aspects of running. They run official races less frequently, if at all, and want to challenge themselves with new distances. They are reliant on their support system and race spectators to get them through and want to celebrate their accomplishment with the people they love.
PERSONA #3: THE SUPPORTER
Whether they are at the race course or across the country, supporters want to celebrate their runner and all their hard work. For those who can’t be there in person, they feel left out and less connected in these milestone moments.
While the users’ reasons may be different, their needs are still the same: to feel connected to the people they care about.
This lead me to consider:
HOW MIGHT WE…
compile surprising and interesting entertainment for runners so that they feel engaged and motivated?
give runners access to real-time encouragement from supporters not physically present?
provide supporters the opportunity to feel like part of the race even from far away?
IDEATION
How can I build suspense to maximize runner’s surprise on race day? Will runners want to limit the amount of messages they receive, and from who? How can this be integrated with the runner’s preferred run entertainment?
Focused sitemap with simple navigation separating supporters and runners
User flow for run creation
LAYING THE FOUNDATION
Based on research insights, I focused on the main desires of supporters - the ability to cheer from a distance - and runners - unexpected cheers during their run.
CHEER PLANNING
Supporters can schedule cheers ahead of race day leaving them free to enjoy from the sidelines or even run the race themselves.
SUPRISE MEDIA
Cheers are hidden until the run is started so runners have surprise messages throughout their race.
CENTRALIZED RUNNERS
Supporters can see all of their friends’ upcoming races, so whether across town or across the globe, they’ll never miss a moment.
BUILDING THE BRAND
I wanted the design to be sleek, uncomplicated, and fun. As this concept is based on encouragement and connection, I want the user to enjoy the experience and feel happier just logging in.
Colors and graphics should provide joy and excitement without overstimulating the user or feeling childish.
BRAND NAME
As the old marathon adage says:
“You run the first 20 miles with your legs and the last 6.2 with your heart.”
The infamous 20th mile is where runners can hit a mental and physical wall, making support even more crucial in getting across the finish. I thought Mile 20 was fitting for an app that helps runners conquer that hurdle, whether it’s at mile 5 or 25.
LOGO DESIGN
I’ve always associated stripes with running, from track lanes to brands like Adidas; they represent speed, endurance, and the constant pursuit of improvement. I was drawn towards track imagery and wanted to incorporate the repetitive and intersecting lines into the logo - the zero was a perfect opportunity to do so.
KEY FUNCTIONS
When building out the initial wireframes, I aimed at making the Cheer and Run creation flows simple, yet engaging. I added in graphics that mimic track lanes to add visual interest and show movement throughout the process.
RACE DATABASE
Major races will populate based on location so runners can easily autofill their race data. They will also have the option to manually input.
SENDING CHEERS
Popup tips help onboard supporters before their first cheer. Using standard icons makes the process intuitive but I wanted to ensure a seamless first use.
TESTING OBJECTIVES
VALIDATE CONCEPT
I wanted to ensure that the features are everything the user expects and wants out of this app. Hearing additional feedback and suggestions can help better tailor it towards the user’s needs.
OBSERVE USER FLOW
Watching first time users navigate the app would determine if the onboarding screens are helpful and if users are able to easily complete their tasks without errors.
BENCHMARK BRANDING
As a new brand, I wanted to gauge how users responded to the name, color palette, and general aesthetics of the app.
USABILITY RESULTS
Both supporters and runners had very positive reactions to the app. Runners had follow-up questions about connecting their music and Strava accounts which indicates that they were considering real life integration into their runs. Supporters also asked about live tracking features for race day. All of the above were slated on the product roadmap which was extremely validating.
ITERATIONS + REFINEMENT
While creating their run, users all had very similar behavior on the Cheer constraints page. This lead me to implement a couple changes:
ADDING CLARIFICATION TO CHEER SETTINGS
Users found themselves guessing what each input meant, and even though 100% of users correctly interpreted the title, I added a brief description to further clarify.
UPDATING PRESET CHEER LENGTH TO 15 SECONDS
4 out of the 5 runners felt that 30 seconds was too long and lowered it down to 15 seconds. Seeing as the majority chose this length, I updated the preset to reflect their preference.
STRAVA + MUSIC INTEGRATION
I expanded the prototype to include a profile page to answer the common questions about Strava and music. Users will be able to connect their preferred music app, as well as any health/fitness app like Strava or Nike Run Club. These will provide the GPS tracking to trigger cheers.
DONATION LINK
Fundraising is a crucial part of many of the major races and some runners find themselves struggling to get donations. Having a link to their charity gives their supporters the opportunity to help both emotionally and financially.
FINAL PROTOTYPE
NICE TO HAVES
These ideas are not reflected in the prototype, but I believe would positively improve the user experience based on their feedback.
START OF RUN NOTIFICATION
Supporters can enable notifications to be alerted when their runner starts their race, so no matter the time difference they’ll never miss a moment.
LIVE TRACKING
Major races have their own dedicated apps for tracking runners, so it would be helpful to centralize that into the app for supporters.
INSTANT CHEERS
Once a runner begins their run, supporters will have the option to instantly send cheers for an immediate boost.
TAKEAWAYS
This idea was such a fun concept to work on. As a runner and avid NYC Marathon supporter, I saw an opportunity to create a more efficient way of supporting long distance athletes. While there are many functions I would still like to add (ie. sending songs, skipping cheers), I found that its simplicity is also its strength. This app is for a very specific purpose and the last thing a runner wants to deal with mid-run is a complicated app.
With the time constraint I was unable to mockup smartwatch compatibility, but I think that would be crucial in a seamless user experience. I can also see this concept being integrated into a major race’s app, since they already have bib tracking and a large number of yearly users.
