Product: Responsive web app
Role: Product/UI designer
For: Student project
I designed Fit for my UI specialization course project with CareerFoundry. The project brief and user persona are excerpted below.
Motivate people into an exercise routine that suits their level, schedule, and interests.
Finding exercise routines for your level can be difficult, especially if you want to try something new. This responsive web app aims to help people get into an exercise of their choice by holding their hand a bit and providing routines, guides, interactive examples, and info.
Finding routines that fit into your schedule is not easy. The web app is designed to encourage people who want to get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
Search and filter exercise videos
Option to add sessions to calendar
Create user accounts
Tracking and charting of users’ progression over time
A game layer with individual daily challenges, achievements, and/or rewards
Social sharing for routines or favorite exercises
Job title: Software Developer
Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time for exercising.
To help with this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule.
As a beginner to working out, Rebecca also wants something that will help her learn how to properly exercise.
Rebecca wants help finding routines she can enjoy.
Rebecca is young and tech savvy, so she’ll be able to navigate an app without a ton of hand-holding.
As a young woman, she may be drawn to a different vibe and aesthetic than that of typical fitness apps, which often feel masculine and aggressive.
The dashboard will track weight loss, among other stats
Workout options will include short time durations
Workouts will include exercise demo videos for beginners
The dashboard will make recommendations based on Rebecca’s goals and preferences
“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”
—Rebecca the user
There’s no shortage of fitness apps—especially in 2020, when everyone has had to adapt their routine to the quarantine life. Alo Moves and Obé focus on young women. SWEAT and Peloton offer a prestige feel. There are apps just for running, there are others that offer nutritional counseling… the list goes on.
But the one that’s long stood out to me is Aaptiv, with its focus on audio workouts (until recently, it offered audio exclusively). By removing the need to look at a screen, users can focus on what they’re doing and enjoy more flexibility of movement. Genius!
Of course, no app is perfect, and as a user of Aaptiv, I’d already identified some points of friction that I’d want to avoid in my own design. I decided to do a deep dive from a UX perspective, developing a user story for Aaptiv and analyzing the app based on Stephen Bradley’s Design Hierarchy of Needs and the Fogg Behavior Model.
Then I began sketching the four primary flows for the mobile breakpoint:
And developing wireframes of possible design patterns and screen configurations:
User Flows + Wireframes
I mapped out an initial user flow that accounted for all of the app's feature requirements, as well as some additions of my own. An intake questionnaire would assess the user's lifestyle and goals in order to custom programs and recommend workouts. Demo clips could be accessed before and during a workout to teach the user how to perform each exercise.
Before further refining my wireframes, I needed to nail down the mood of the app. The project brief had specified an orange & black color scheme. Many fitness apps use those colors, but safety orange and stark black suggest an aggressive, masculine brand that someone like Rebecca might find off-putting. So, I played around with a few different vibes:
I settled on the "Sunset" theme. With its muted tones of coral and teal, relaxing imagery, diverse body types, and no-nonsense messaging, it creates an atmosphere that is familiar and inviting, yet challenging and inspiring. This theme inspired my color palette and other aspects of what would become the final style guide for the app:
This app is about more than just getting fit. It's about finding a routine that's custom fit to the user and their style. It's the right fit for their needs and goals. It helps them fit exercise into their busy lives. And sure, it may also help them fit back into their favorite jeans.
It seemed apt to simply call the app what it is:
Strength: not just in the body, but in spirit and will
Vibrancy: energy and life; strength and resonance
Authenticity: real people in real environments
Approachability: familiar and inviting; aspirational yet relatable
Diversity: accessible and encouraging to all
Fit for All
Find what you love.
You’ve got this. And we’ve got you.
Getting back into exercise doesn't have to be an ordeal.
A little effort goes a long way.
To flesh out the tablet and desktop breakpoints, I expanded my 4-column grid to 8 and 12, respectively.
My final high-fidelity screens show how Fit is designed to encourage users like Rebecca—people who are new to fitness but want to find a way to work it into their daily routine.