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.
persona
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.
research
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.
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.
moodboard
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
wireframes
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.
iterations
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, www.boosterjuice.com/.
Dadiani, Luka. “Dark Map UI | IOS Freebie.” Dribbble, dribbble.com/shots/4730476-Dark-Map-UI-iOS-Freebie.
“Everyone. Every Run.” Runkeeper – Track Your Runs, Walks and More with Your IPhone or Android Phone, runkeeper.com/.
Getty. “Teen girl exercising on bridge – stock photo” Martin Novak, gettyimages.ca/detail/photo/teen-girl-exercising-on-bridge-royalty-free-image/665731682
Yitka Winn. “How to Train for a Marathon | REI Expert Advice.” REI, REI, rei.com/learn/expert-advice/training-for-your-first-marathon.html.
“News Flash.” Programs | Victor, NY – Official Website, www.victorny.org/CivicAlerts.aspx?AID=680.
“Nike Running App for IPhone & Android.” NIKE, Inc.- Inspiration and Innovation for Every Athlete in the World., www.nike.com/ca/en_gb/c/nike-plus/running-app-gps.
Starbucks Coffee Company. “Starbucks.” App Store, Publisher: Disney Publishing Worldwide, 19 Mar. 2014, itunes.apple.com/ca/app/starbucks/id331177714.
Yiker. “Virtual Currency App – Trading Wallet.” Dribbble, dribbble.com/shots/5015648-Virtual-Currency-App-Trading-Wallet.
Wilson, Brant. “40 Examples of Flat IPhone App User Interfaces.” Bittbox, 30 May 2017, www.bittbox.com/culture/40-flat-iphone-app-user-interfaces.