En Route

A platform for the avid runner or everyday explorer that allows the discovery new routes in your area!

Role
UX/UI designer

Tools
Figma

Duration
3 months

After the NYC Marathon, I designed a platform to help encourage current and prospective runners to dive in!

Challenge

As an avid runner, I often find my usual routes monotonous and uninspiring, a sentiment shared by many runners. Those new to running face even more uncertainty, questioning where to begin or which routes to explore.

These challenges motivated me to identify the key factors runners consider when planning routes and to develop innovative solutions that inspire runners of all levels to discover fresh, motivating paths.

Research

Goal: Uncover the underlying motivations and factors influencing route selection among runners.

Explored several key questions to understand runners' behaviors and preferences:

  • What causes people to run their normal route?

  • Why are people avoiding or choosing some paths over others?

  • How do people discover new routes to run?

Competitive Analysis

Articles, vlogs, and forums were utilized to gauge runner behaviors and to learn about competitors. Analysis of direct competitors, evaluation of usability and assessment of existing designs revealed a lack of customization options for those looking to create routes from scratch.

User Research

I conducted a mix of 5 face-to-face and virtual interviews. I structured the research around runners of any capacity. The participants came from varying levels of experience with running, but echoed picking a route by repetition. They often reused routes in their area, and expressed desires to improve and incorporate running more regularly into their lifestyles.

“I started running because I was work from home and sitting around a lot. It’s been, like, a year and I just run the same path on autopilot.” — Jasmine (24)

Synthesizing

Through Affinity Mapping, I was able to put related findings from my interviews into distinct clusters, making it easier to organize my ideas and analyze the data. It showed insecurity, desire, and frustration of users interactions with these tools.

Discoveries

The key insights from my research that have shaped my understanding of the problem space in online meeting tools include:

  • Runners are creatures of habit and pick routes out of convenience.

  • Beginner runners but show desire to run more seriously to live more active lifestyles, but don’t know where to start.

  • Lack of motivation can be derived from an absence of fitness goals.

How Might We (HMW)

To give clarity and focus to the problem, actionable and specific HMWs were created to give a better understanding of what is being built and why.

  • How might we provide people with information they can use to plan their optimal, engaging run?

  • ​How might we better empower people who just starting their running journey?

User Flows

I stripped down the beginning, middle and end of my user experience, thus broke it down into 3 sections:

  • ​Build New Route: Homepage, for users to explore different runs, tap into saved runs, and create new runs. For creating the route itself, the user would input the parameters of Pace, Time/Distance, and Locations to generate a route.

  • ​Real Time Running: Shows the current distance, pace and time elapsed while the user is running in real time.

  • ​Activity and Progress: View the completed run, with statistics, splits and highlights. Featuring personal best times and total distance and time the user ran.

Sketches

It was time to bring my project to life by sketching out my design, and conducted remote guerrilla usability tests to quickly test my ideas and gain users’ feedback.

Wireframes

After testing the initial round of low-fidelity mockups, I revised some of the designs and progressed to creating medium-fidelity wireframes.

User Testing

My goal was to assess how the function of my design could be optimized. That is, I wanted to evaluate if the user could seamlessly follow through with my product from the planning phase to the real time application, and then finally to view their progress. Where were areas of improvement, and where users felt stuck?

Iterations

Going back to the drawing board, I made some changes:

  • Added recommended routes on the home page, to engage the runner with new, personalized paths.

  • Included aggregated data over time in order to encourage the user to continue running.

  • Displayed previous, unsaved runs for the user to access their achievements, and give them the option for a second try.

  • Implemented horizontal swiping between route cards, adjusted the scale, as some of the fonts, shapes and icons were disproportional.

More Iterations

For my second iteration, I:

  • Removed the “express edit” sections and fit “Time” and “Distance” parameters on one page to reduce user clicks.

  • Experimented with color and added illustrations, so the interface looks playful and warm.

  • Moved the post-activity results page to the “Activity” section for future reference and consistency.

  • Simplified the app, deprioritized non-crucial elements of the page, such as the weather section.

Visual Design Guide

High Fidelity Prototype

Some of my findings:

  • Differentiate “activity” and “progress” toggles, which contained personal best times with distances and milestones.

  • Clearer wording for buttons: “Building” a run, creating or constructing a run, was unclear for one user.

  • “Quiz-style”: and guided format of the app was not too hard to follow.

  • Explore further customization to the individual needs of the user.

  • Simplify and decrease amount of clicks per page.

  • Label icons in Navbar to clarify sections.

Further Considerations

The results from these tests showed positive receptions to the app, and displayed runners making thoughtful decisions, and having pleasant interactions with an app designed to inspire and motivate them.

For next time, I would:

  • Lean into the exploratory nature of the app. Try working on a feature where the runner receives a notification on events in the store, restaurant, etc. they passed

  • Add audio to guide and motivate the user during the real time running​

  • Include other parameters to filter through, such as “well-lit roads”, and “hills”

  • Expand on goal-based programs for advanced runners, like race-training