Exercise goals

Exercise goals

App design exercise

exercise-app-device

Exercise goals

I was recently asked to spend (only) a few hours designing a fitness app that allows users to set daily and longitudinal exercise goals. I was to show design thinking, sketches of my progress, and key screens as wireframes and at high fidelity.

SCREENSHOTS

Market research

Market research

other-apps

I began by reviewing my prospective client's banking app that included various goals for saving money.

Next, I reviewed popular exercise apps to look for existing solutions for setting and tracking goals. Strava and Aaptiv were strong examples I could follow.


MIND MAP

User types

I usually start brainstorming with three user types: new, experienced, and advanced users. I made a brain dump of basic assumptions about their current level of exercise and commitment.

exercise-app mindmap-1
WHITEBOARDING

User journey and affordances

exercise-app-use-journey-ideation

I decided to focus on a single user: an experienced runner who wanted to run a half-marathon and drop 15 lbs through core training and circuit training.

The basic event cycle:

  1. Add a goal
  2. Report progress towards that goal
  3. Complete and check off the goal

I broke down each step and considered affordances for each, including ways to automatically support and encourage the user through reminders and affirmations.

MIND MAP

Single user

I narrowed down the parameters even further to a single goal of running a half-marathon. This set me up with something I could deliver within the allotted time.

exercise-app-mindmap-2
SKETCHES

Onboarding

exercise-app-sketches-onboarding

The easiest way to tell my story was through an onboarding scenario.

The app would start with a grid of popular categories. Selecting a category would present suggested goals for that category based on popularity, skill level, and benefits.

SKETCHES

Metrics

exercise-app-sketches-graphs

A user training for a half marathon will want to track each run leading up to the event.

30-day bar graphs are a good way to measure achievement. A sloping goal line could run behind the graph to show the increasing progress level required to hit the goal.

Progress bars seemed a good way to measure overall progress against this week and last.

I also added a history list, which gave the user the chance to add, remove, or edit their runs.

WIREFRAMES

Onboarding & finding a goal

onboarding-wireframes
WIREFRAMES

Setting & tracking goals

goals-wireframes
WIREFRAMES

Explore / My Goals

sections-wireframes
HIGH FIDELITY

Onboarding & finding a goal

exercise-app-0.1-onboarding
exercise-app-0.2-onboarding-activity_grid
exercise-app-0.3-onboarding-running_goals
exercise-app-0.4-goal-detail

Each goal has a simple layout containing a hero image, title, call to action, and short description.

For encouragement, I show how many people had signed up for this goal (rather than how many have completed it).

I also included a list of upcoming events which would give the user other opportunities to complete the goal.

Goal settings
exercise-app-0.5-add_goal_metrics
Settings dialog
exercise-app-1.3.a_add_goal_metrics-dialog

I kept the settings simple but detailed, including options for target date and/or duration.

I do require input for their current routine. This makes it possible to predict the progression required to hit the goal.

HIGH FIDELITY

Tracking goals

exercise-app-2.0-my_goals

My Goals would show a list of goal cards. The card contains a hero image, title, completion date.

On the right side are quick metrics for what was accomplished this week, the best result of the week, and best overall result.

exercise-app-2.1-goal_details

I reduced the wireframe design to fit more data within the screen. I added an Outlook prognosis. I think it's essential to be honest and help the user achieve the goal, even if it means resetting expectations.

Daily Record displays running distances for the last 30 days. Behind the bar graphs, I added a sloping dashed “goal” line to indicate how much the user needs to progress each day to hit the objective.

Progression bars turned out ok. I left them in since they made the demo more visual.

HIGH FIDELITY

Navigation & exploring goals

Explore
exercise-app-1.0-explore
Explore > Running
exercise-app-1.1_running

I used Android's Material Design as my design system but instead of a top Toolbar, I used bottom navigation for parity with iOS.

Finally, I double-checked my work by mocking up some quick Explore screens. I wanted to be sure everything was cohesive.

exercise-app

Selected works

Starsky RoboticsUX research & design for autonomous vehicles

SWAPI: Android demoUX development exercise (2019)

Exercise goalsProduct design exercise

Disney Movies AnywhereSeinor UX Developer, Product Designer

DayframePrinciple Designer, Senior UX Developer

HD WidgetsPrinciple Designer, Senior UX Developer

App StatsPrinciple Designer, Senior UX Developer

CloudskipperPrinciple Designer, Senior UX Developer

Flash apps2000 - 2011

Elemental design1994 - 2003