Fitted
Fitted is a responsive web app that motivates people to exercise by providing routines, guides, interactive examples, and info.
It is designed to encourage people who want to exercise to get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
The Problem
The user needs a responsive app to search and find exercises and workout routines, guides and interactive examples, and info, regardless of their fitness level.
Tools Used
Pen and paper
Keynote
Draw.io
Figma
Unsplash
Pixabay
Google Fonts
Frontify
UsabilityHub
The Goal
Create a responsive web app that motivates people into an exercise routine that suits their level, schedule, and interests.
Role
UX Designer
UI Designer
Role
3 months
Strengths:
Weaknesses:
Competitive Analysis
I began by doing a competitive analysis, looking at popular fitness apps such as Aaptive and 8 Fit.
Fun, friendly aesthetic
Easy-to-use dashboard
Keeps track of user’s progress
Adaptable to the individual user
The user needs to enter credit card details for trial before doing anything
Navigation bar options are unclear (what is the difference between “browse” and “programs”)r
Clean, simple design. No cognitive overload
Has social media login options
Relevant personalization process involving choosing weight, age, etc.
Lots of advertisements
Starts workout. But I might not be ready right now.
No “end workout” option. Need to pause first, then end.
User Persona
As I worked through the stages of the design-thinking process, I kept my primary user persona, Rebecca in mind.
Rebecca’s Tasks:
Rebecca wants to find exercises to lose weight and get in shape.
She wants to find short exercises that she can do multiple times per day in-between other activities.
She wants a tool to keep her motivated, as her schedule is often distracting.
Rebecca’s 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 a tool that will help her fit exercise routines into her busy schedule.
New to working out, Rebecca wants to learn how to exercise properly.
Rebecca wants help finding routines she can enjoy.
User Flows
I created user flows, with Rebecca in mind, to help guide me create my first wireframes for the project.
“As a new user, I want to learn about different exercises, so that I can figure out what is best for me.”
“As a new user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.”
“As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits..”
“As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.”
Low-Fidelity Wireframes
I next began sketching out some simple, low-fidelity wireframes, creating the basics of how the app would look.
High-Fidelity Wireframes
I used the low-fidelity wireframes and a 4-column grid to add detail and get a better understanding of how the app should look and function. I continued to add to and update them as I considered visual hierarchy, and new user needs, such as a search autocomplete, and a password error message.
Mood Boards
Keywords from the project brief included: health, fun, and motivation. I tried incorporating these words in each mood board, but each board took a different direction, emphasizing one of those keywords.
The third, “Summer,” emphasizing “fun,” used warm colors and bold typography and icons. I wanted an almost cartoony feel, similar to apps like Duolingo.
Although my personal preference is for the cleaner, simpler look of “Fresh,” I believe “Summer” is the most accessible and friendly toward those new or returning to fitness, and so I ultimately went in that direction.
The “Bad Ass” mood board emphasized motivation with a bolder, grittier feel. I like the dark hues and its gender-neutrality.
The “Fresh” mood board emphasized “health” with an airy, breathable design, using natural colors like green and blue to connote peace and revitalization.
Style Guide
I chose simple sans-serif fonts that were easy to read and came across as fun and friendly.
Colors, similarly, are warm, bright, and summery, and reflect the welcoming, accessible feel of the mood board.
To keep that warm, playful feeling, I made my icon lines thick and rounded.
Imagery
I considered using illustrations to set the desired mood and distinguish the app from competitors in the fitness space.
Mockups finished, I conducted a preference test, which yielded mixed results. Ultimately, I opted for photos for practical reasons, as they would save time and money—no need to hire animators or illustrators.
I also discovered that many people didn’t necessarily prefer illustrations, they simply didn’t like the photos I had because they featured fit people that participants found intimidating.
I believe by selecting suitable photos, I can still achieve the approachability of illustrations without losing practicality.
Branding Photography
These photos should convey the mood and messaging of the Fitted app and should be considered warm, welcoming, accessible, and fun.
Therefore, photos should tend toward warmer colors, warm and bright lighting, and feature happy, normal-looking people, and not people who are intimidatingly good-looking.
Instructional Photography
These photos should also be consistent with the app's messaging, but also need to illustrate to the user how to do an exercise. Therefore, these photos need to be simple, with a simple white background.
Responsive Design
Once the mobile design was at a high-fidelity, I adapted the designs for larger breakpoints, including for tablet and desktop, using different grids of 8 columns and 12 columns, respectively
Retrospective
Challenge:
I had to walk the line between making the web application stand out amongst its competitors while also being familiar enough to users to be easy to use.
Solution:
I tried to use what I liked in other designs when doing my competitive analysis, and then changed and modified what I disliked to make Fitted more competitive.
Challenge:
I wanted to make the application fun and welcoming but had to find a way to balance that with a sleek, modern look as well, so it didn’t feel childish.
Solution:
I used warm colors and friendly, sans-serif fonts to convey the warmth and accessibility of my mood board, but also used a gradient orange, and photos to modernize the app and appeal to a wider audience.
Challenge:
I wanted to appeal to my user persona, Rebecca, while also being accessible to a wider audience.
Solution:
I tried to include types of workouts and photos that would appeal to many different types of users, from the elderly, to young women, to middle-aged men, and of course, to my user persona.
Thanks to…
CareerFoundry and my CareerFoundry mentor, Alyssa for guidance along the way.
The following photographers for use of their images in my web application:
Mabel Amber
Julia Ballew
Clique Images
Dex Ezekiel
FocusFitness
Anastasia Hisel
Mark Hong Fung So
Katherine Hood
Keifit
April Laugh
Anupam Mahapatra
Sergio Pedemonte
Gabe Pierce
Phildate
Alex Shaw
StockSnap
Logan Weaver