On Course: The Ultimate Running App

A detailed UX/UI case study

Contents

  1. The Challenge
  2. The Discovery
  3. The Design
  4. The Deliverable

Jump straight into the final prototype.

THE CHALLENGE

No Running App is Apt

As a keen sports technophile, I love testing the latest shoes, apps and gizmos that allow me to run faster and longer. Over the years, I’ve used every running app out there but now stick to my trusty FitBit as no app experience truly fit the bill.

Shoes that Feed the Sole

On is a fast-growing running company. I could bore you with a long-winded tale about how On’s shoes changed the running experience for me but simply put, I’ll never buy another brand of running shoes again.

On App to Rule Them All

If On wishes to compete with the likes of Nike, Adidas and Asics, one way to showcase their superiority is in the digital realm. So I set out to design for them the mother of all running apps.

Staying On Course

These were the high-level goals I made sure to keep in mind throughout the design process:

1. Design for the user, always (from novice to seasoned runners)

2. Stay consistent with On’s brand (keep it sleek, simple and elegant)

3. Create opportunities for On’s primary business (i.e. selling shoes)

THE DISCOVERY

Sizing Up the Competition

To eliminate my own biases and objectively assess the market I took a twofold approach:

1. Contextual enquiry — I went down to my local running club to survey runners on what apps they have used and why.

2. Competitive Analysis — I scoured the app store for reviews of the most popular running apps to research the praise and pain points of each.

Here is a round-up of insights from interviews and reviews:

Putting Myself in Someone Else’s Shoes

From talking to runners with varying levels of experience, I was able to condense their general wants, needs and pain points into the following personas:

THE DESIGN

Rundown of the Key Features

Collating everything I’d learnt from user research and competitor analysis, I decided on the core features to orient the app around.

1) Move With Metrics — The run tracker is the backbone of the app. As well distance and duration the user can customise what other stats they view on their dashboard while running.

2) Find Your Routes — A route finder is a major feature missing from most running apps and one that On’s existing user base, many of whom are trail runners/hikers, will appreciate.

3) Share Your Greatness — A social feed that also spotlights trending posts (e.g from sponsored On athletes) is key in motivating runners of all levels.

4) World-Class Coaching — Built for the busy athlete or the diligent beginner, who can trust the app’s algorithm and On’s coaches to curate the perfect program for them.

5) Make Money Moving — Having an in-app store may seem unnecessary, maybe even predatory when a user can visit On’s e-commerce site on their own accord.

This is where On Coins come in. On Course would be offered for free, but what if On paid you to run?

Similar to step currency apps, an algorithm would take into account distance, duration etc. when generating On Coins (earned relative to one’s abilities).

The main purpose of the On Coin is not to discount shoes for using the app but to push users towards the store, where they can peruse On’s products.

Ready, Set, Flow!

Now armed with an idea of the main features, the next step was to link them together in a user flow to ensure smooth navigation for the user.

Quick on the Draw

Once the features and navigation were set, I was ready to start designing. I started by sketching out low-fidelity wireframes to see what solutions might work.

UI Style Guide

After many iterations of sketches, I was happy with the overall flow and began to flesh out the branding and visual interface.

I used the same font On uses but designed a number set from scratch, that felt more akin to the branding
For maximum consistency, icons include a part of the original On logo

Final Preparations

The final step in the design process was to create a high-fidelity prototype for users to test. I simply added elements of the UI style guide to the lo-fi sketches and the screens practically designed themselves.

Time for a Test Run

I moderated 5 user tests with runners of varying experience. I received tons of useful feedback, large and small, from the way icons looked to entire features that users felt were missing. Here were the most impactful takeaways:

Feedback #1: Runners, especially novices, want custom running programs.

Design Implication: Design a ‘Coach’ feature that provides personalised training programs.

Feedback #2: Confusion between ‘You’ and ‘Settings’ sections.

Design Implication: Include ‘You’ section as part of new ‘Coach’ feature.

Feedback #3: Confusion on some features (e.g. voice coach, screen lock).

Design Implication: Include ‘more info’ icons with detailed explanations.

Feedback #4: Running splits was a much sought-after feature.

Design Implication: Break down the post-run map by splits.

Feedback #5: Readability issues with some of the graphs.

Design Implication: Change graphs from line graphs to bar charts.

THE DELIVERABLE

The Finish Line

Here is a demo of the final prototype and here are some snapshots of how the final screens turned out:

Run
Routes
Routes
Share
Coach
Shop

The Show Goes On

When crossing the finish line of any race, no matter the outcome, there is always more work to be done.

Here are some improvements I’d be interested in implementing given more time and capacity:

1) Music Feature — design a feature that not only links the app to your music library, but links your heart’s bpm with the bpm of a song.

2) Redesign the UI for wearables/smart watches.

3) Redesign the UI for an alternate ‘light mode.’

A Bit About Me

My name is Max Mondelli and I am an aspiring digital product designer. I am Swiss, Italian and Japanese. I graduated from Harvard University in 2018 before working in tech consulting in Silicon Valley for a year.

During lockdown, I decided on a career shift to UX/UI design and cannot wait to kickstart my design journey.

I would love to connect on Linkedin.

Thank you for making it this far, I hope you enjoyed reading about my process!

UX Design Strategist at outfly.io Follow me on Instagram @nobrains_nogains

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store