Fitted responsive web app • UX/UI Design
Product Manager: Hannah Niebla
UX/UI Designer: Marija Golubovic
Objective & Challenge
Finding exercise routines for individual physical levels can be difficult for many reasons, especially when users haven’t worked out in a while, want to try something they haven’t done forever, establish a new routine, or start working out for the first time in their life.
Our goal is to motivate people to find an exercise routine that suits their interests & schedule and allows them to track progress & connect with others
Fitted is a responsive web app designed to meet users' schedules and help them implement exercise in their daily activities. Users can set their level and exercise duration, along with numerous environments and workout options to choose from.
If you only have 5 minutes between your conference calls, find just that - an in-between meetings exercise. Or, if you want to relax before bedtime - look up bedtime yoga and breathing exercises that can help you fall asleep quicker and wake up ready to seize the day.
Credits: Marta Wave
The 5 W's of Fitted App
where [to use it]?
Users can choose between several different workout environments, depending on their current location, such as their home, gym, local park, or even their office
WHEN [CAN IT BE USED]?
Anytime! Users can choose between different lengths and levels of workouts and easily fit the routine into their calendars
Why [would someone choose fitted] ?
Adopting even a small workout routine into a daily schedule benefits users' focus, productivity, sleep quality, and overall health condition
WHAT [DOES IT DO]?
Help members find and enjoy over a thousand workouts or join daily challenges run by professional instructors and athletes
WHO [IS THIS FOR]?
Anyone who wants to seize the day and make the most of it. People who want to work in their spare time or do well-structured training and establish their workout routine. Consistency is the key!
User Persona
REBECCA (28)
Based in San Francisco, CA
Software Developer II
MS in Computer Science
In a relationship
Lives with her partner
Has a dog and a cat
Occasionally visits tech conferences
Organizes online hackathons
How can a professional, working from 9-5, with a side hustle and petsitting find a way to exercise regularly?
I feel like I need to choose between my daily tasks, socializing and working out. It’s a struggle.
Tasks
Rebecca wants to find workout plans that match her goals and lifestyle
She would like to fix her posture because sitting for 8+ hours a day made her a “couch potato”
In addition, Robecca wants to find short workouts she can do once or a few times per day in between or during her other activities
She needs a tool to follow her progress and keep her motivated, as her schedule can often be distracting.
More than anything, she’d like to introduce healthier habits and take care of herself.
Goals
Rebecca wants to lose weight and get in shape, as her sedentary job doesn’t allow a lot of time to exercise
To reach this goal, Rebecca wants to find a tool that will help her fit exercise routines into her busy schedule
As a beginner, Rebecca also wants something that will help her learn how to exercise, to lower the chances of injuries
Rebecca wants to find simple workout routines she can enjoy. No boring pushups or pullups
ENVIRONMENT
Physical: Rebecca lives in an apartment with her partner and pets. She works from home but tries to go out every day at least to walk her dog
Social: She has several friends from work, and one of them recommended the Fitted app to help her reach her health goals.
Technological: Rebecca is very tech savvy, using her computer daily to write code. She understands the tech, follows the trends, and heavily relies on modern technology to increase productivity in every segment of her life and save herself time
Moodboards
Both of the mood boards were created with clear guiding thoughts in mind:
To motivate and inspire users
To build up workout discipline
To provide an easy way to incorporate exercise in daily routine
Following the modern trends and dark themed fitness apps, I believe that Mood Board No. 2, because of the wider color scheme, can also bring more variety when it comes to combining colors. Following minimalistic design, these colors can complement the overall look and enhance content engagement.
I decided to go with Board No. 2 because of the more contrast color scheme, which, if used in the right way and with a proper amount of contrasts, can create a more dynamic environment than the colors presented on Board No. 1.
The decision making process
After running a set of user interviews, the 7/8 test participants preferred the mood board and colors on the right. This color palette offers a variety of colors, with contrast that creates a more dynamic environment.
The goal is to awaken positive emotions connected with users' childhood and encourage their playfulness, turn on the game mode, and make the overall workout experience fun and exciting
First row colors represent energy and positive attitudes, and those are the primary app colors
Second-row colors are the secondary app colors, and their purpose is to balance and promote calmness and awakening
Tertiary colors of the third row represent supportive colors and are used as text and shades of colors
Sitemap
Typography
Having a wide spectrum of colors, in order to make the app playful and fun, I decided to go with basic, easy-to-read font families, as the visual content is more dominant than the written.
As the app is dedicated to physical exercise, and videos and other visual elements are dominant in the app’s structure. The text is included in names and short explanation. All the text is highly relevant, and everything unnecessary was excluded from the visual layout, in order to avoid cluttered interface. I decided to go with a neutral typeface Sofia Pro and just play with different sizes and weights. This way I kept the simplicity and allowed the visual content to be dominant.
Low-Fidelity wireframes
Low - fidelity wireframes
High-fidelity wireframes
Prototype is available here