marathon challenge

Navigating Unsteadiness

project brief

Booster Juice serves a health conscious clientele. They’ve decided that they’d like to to promote healthy eating and healthy living with a Marathon Challenge.

This was an assignment given to myself and a group partner during the final year of my Bachelor of Design. The assignment for a single-purpose app gave the following as parametres:

  • Reward the user with a free snack-sized drink after running a 5km and 10km
  • Reward the user with a smoothie of choice after running a half-marathon (20km)
  • Reward the user with a smoothie and menu item of coice after running a marathon (40km)


The purpose of this assignment was to use design thinking methodology to come up with a viable solution, and demonstrate our idea as a final clickable protoype.


Meet Allison.

She’s just started taking up running, and is planning on running a 5km race in a few months. Her ultimate goal is to eventually run a marathon. She wants to use a running app to track her progress, but none seems to incentivize her. Other running apps seem to have too many features, and she gets frustrated when all she wants to do is track her runs. 

She decides to go for a smoothie after a run, and sees an ad for a new Booster Juice app where she can get free smoothies for completing goals. Allison downloads it immediately. 


Most marathon training plans range from 12 to 20 weeks. Beginning marathoners should aim to build their weekly mileage up to 50 miles over the four months leading up to race day.

- Yitka Winn, REI Running

We investigated a few running apps, such as Nike Run Club and Runkeeper. They both rely on the phone’s GPS to indicate the runner’s progress. 

They’ve only recently incorporated treadmill running, however the user must add the workout in retroactively. Due to the nature of the app and the prospect of rewards, we decided that to avoid users from “cheating” all runs should be completed outside with the coordination of the phone’s GPS. This will be made clear during the onboarding process so users don’t have a different set of expectations.


Some elements that stood out:

  • Colours are competing with each other

  • Iconic yellow needs to be incorporated somehow

  • Athleticism also needs to be incorporated—looked at running shoes with similar colour stories

  • A darker colour palette feels more sophisticated

idea generation & inspiration

We took a look at some other projects on sites such as dribbble to begin generating ideas and get the creative juices flowing.

Some observations:

  • Use of gradients feels modern 

  • light lines on dark background feels energetic

  • Use of dots to indicate progression through sequence works well

  • Monotone colour palette works to an extent, however if used too much it seems flat and uninviting

industry survey

Nike Run App

We investigated the Nike Run App and noticed the following as it relates to our project:

  • Pro: Able to track mileage easily

  • Pro: Intuitive design 

  • Pro: They use yellow!!!

  • Con: Extraneous features that may be unnecessary

  • Con: No “reward” feature 

  • Con: too elaborate to mock up in XD

Starbucks mobile ordering

We investigated the Starbucks app and noticed the following as it relates to our project:

  • Pro: Use of maps to find nearby locations is intuitive

  • Pro: Barcode system to redeem free food/drinks is relevant

  • Pro: use of stars to indicate reward  

  • Con: not a running app–limitations on relevancy

  • Con: It would be too complicated to include entire menu like Starbucks does

brand research

Booster Juice website on mobile:

  • They use gradients!
  • White text on purple background is successful
  • Clickable buttons are all different colours—not cohesive
  • All caps for everything except body text 

During the wireframe stage, we wanted to prioritize login as users will be visiting the app upwards of 14 times; and only signing in once. 

We also wanted to ideate on including some sort of progress bar to indicate how many rewards are left. 

There is no onboarding at this stage.

Example screens

paper prototyping

We chose to utilize paper prototyping as it is easier to mockup in illustrator and print off, as well as easier to utilize blank screens to alter as user testing progresses.

We also added onboarding to indicate what each icon represents, and included loading screens to indicate button responsiveness and notifications to indicate rewards.

user testing


Users also had difficulty with onboarding as the text and buttons were reversed.

Since buttons sizes were not consistent, they were seen as  pop-ups, rather than clickable buttons.

Most users wanted to sign up using Facebook and Google, and so we included this in final iteration.

During the user testing of the paper prototypes, post-it notes were used to indicate where users had issues or were confused.

We discovered that one of the main issues was not realizing icons at bottom were clickable

user flow

The paper prototyping phase allowed us to determine the final flow, as depicted below.

brand standards

Even though this was a project that had no real ties to Booster Juice, we still wanted to maintain the brand standards so it was ‘recognizably Booster Juice.’ We used the colours from their brand standards guide, as well as similar typography.


As we progressed through the design phase, multiple iterations were made as we user tested and revised to perfect the user flow and the UI.

For example, we forgot to include a pointer in the navigation toolbar to indicate what part of the app the user was on. This was caught during the testing phase and remedied quickly and efficiently.

interactive prototype

We spent a long time creating a fully interactive prototype to ensure that in the final stages of testing we were able to correct any issues or flaws.

final mockups
video walkthrough
works cited

“Booster Juice.” Booster Juice Production, 

Dadiani, Luka. “Dark Map UI | IOS Freebie.” Dribbble, 

“Everyone. Every Run.” Runkeeper – Track Your Runs, Walks and More with Your IPhone or Android Phone, 

Getty. “Teen girl exercising on bridge – stock photo” Martin Novak,

Yitka Winn. “How to Train for a Marathon | REI Expert Advice.” REI, REI, 

“News Flash.” Programs | Victor, NY – Official Website, 

“Nike Running App for IPhone & Android.” NIKE, Inc.- Inspiration and Innovation for Every Athlete in the World., 

Starbucks Coffee Company. “Starbucks.” App Store, Publisher: Disney Publishing Worldwide, 19 Mar. 2014, 

Yiker. “Virtual Currency App – Trading Wallet.” Dribbble, 

Wilson, Brant. “40 Examples of Flat IPhone App User Interfaces.” Bittbox, 30 May 2017,

back to top
Skip to content