Fit

Product: Responsive web app

Role: Product/UI designer

For: Student project

Year: 2020

Fit angled mockup

I designed Fit for my UI specialization course project with CareerFoundry. The project brief and user persona are excerpted below.

Project Brief

Objective

Motivate people into an exercise routine that suits their level, schedule, and interests.

 

Context

  1. 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. 

  2. 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.

 

Feature Requirements
  1. Search and filter exercise videos

  2. Exercise scheduler 

  3. Option to add sessions to calendar

  4. Create user accounts

  5. Tracking and charting of users’ progression over time

  6. A game layer with individual daily challenges, achievements, and/or rewards

  7. Social sharing for routines or favorite exercises

Persona: Rebecca
Demographics
  • Age: 26

  • Gender: Female

  • Job title: Software Developer

Goals

  • 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.

Takeaways
Overall
  • 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.

Additional Specs

  • 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

 

The Competition

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.

1.1.jpg

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.

 
 

Style

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:

The Brand

Fit app icons_black glyph name lc.png

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: 

Values
  • 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

Key Messaging

  • Fit for All

  • Get Fit

  • 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.

lady on grass.jpg

Breakpoints

To flesh out the tablet and desktop breakpoints, I expanded my 4-column grid to 8 and 12, respectively.

Screen Shot 2020-10-15 at 6.36.20 AM.png
Screen Shot 2020-10-15 at 6.36.43 AM.png
Screen Shot 2020-10-15 at 6.36.54 AM.png
Detail iPhone.jpg
Detail iPad.jpg
Detail Desktop.jpg
phone.png
desktop.png
ipad.png
 
 
 

Final Designs

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.

Interactive Prototype

See also:

AdMat 1.jpg
Woo

UX Design + Branding

director-best-practices-1.jpg
Machinima

Brand Marketing + Campaign Management

wristband.jpg
Video

Scriptwriting + Art Direction