top of page

Product: Responsive web app

Role: UX Writer + 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


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



  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
  • Age: 26

  • Gender: Female

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

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

Project Brief

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


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.

Flows + Frames


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: