About
My role:
UI Designer
Duration:
3 weeks, May 26th - June 20th 2022
Tools:
Figma, Pen and Paper
Why Fitted?
Finding exercises for your level can be difficult, especially if you want to try something new.
This responsive web app aims to help people getting back into exercise routines by providing guides, interactive examples, and info.
Secondly, peoples lives get busier and busier, so finding routines that fit into their schedules is not easy.
Fitted is designed to encourage people who want to get back into, or start a routine for physical activities.
This means fitting in as little as a 5-minute routine into their schedules.
About Fitted
My role:
UI Designer
Duration:
3 weeks, May 26th - June 20th 2022
Tools:
Figma, Pen and Paper
Why Fitted?
Finding exercises for your level can be difficult, especially if you want to try something new.
This responsive web app aims to help people getting back into exercise routines by providing guides, interactive examples, and info.
Secondly, peoples lives get busier and busier, so finding routines that fit into their schedules is not easy.
Fitted is designed to encourage people who want to get back into, or start a routine for physical activities.
This means fitting in as little as a 5-minute routine into their schedules.
Who is it for?
Rebecca
Project Manager
33 years old
Mother of one
In a relationship
Goals
Rebecca wants to lose weight and get in shape
Her sedentary job doesn’t allow a lot of time for exercising
To help with this goal, Rebecca wants help by fitting exercise routines into her schedule.
As a beginner at working out, Rebecca also wants something that will help her learn how to properly exercise
Rebecca wants help finding routines she can enjoy.
Environment
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter
Social: She has several friends from her job, and one of them recommended this tool as something she should check out to help her reach her goals
Technological: Rebecca is very tech savvy, as she works on computers every day
Quotes
“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.”
Tasks
Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape
In addition, she wants to find short exercises that she can do multiple times per day in between other activities
She wants the tool to keep her motivated as well, as her schedule can often be distracting
Goals
Rebecca wants to lose weight and get in shape
Her sedentary job doesn’t allow a lot of time for exercising
To help with this goal, Rebecca wants help by fitting exercise routines into her schedule.
As a beginner at working out, Rebecca also wants something that will help her learn how to properly exercise
Rebecca wants help finding routines she can enjoy.
Environment
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter
Social: She has several friends from her job, and one of them recommended this tool as something she should check out to help her reach her goals
Technological: Rebecca is very tech savvy, as she works on computers every day
Tasks
Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape
In addition, she wants to find short exercises that she can do multiple times per day in between other activities
She wants the tool to keep her motivated as well, as her schedule can often be distracting
Quotes
“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.”
Key Features
Explore
Discover new workout routines and challenges to get in shape, or wellbeing exercises to wind down after a busy day.
Filter
Find exactly what you are looking for in the blink of an eye. You can scan and filter through all exercises and workouts to find the exercise you are looking for.
Schedule
Add workouts, or exercises to your calendar to fit your daily schedule.
Progress
Track how a little effort can go a long way and stay motivated. Receive points for every completed workout and exercise.
Filter
Find exactly what you are looking for in the blink of an eye. You can scan and filter through all exercises and workouts to find the exercise you are looking for.
Schedule
Add workouts, or exercises to your calendar to fit your daily schedule.
Progress
Track how a little effort can go a long way and stay motivated. Receive points for every completed workout and exercise.
Mood Board
With the UI design process about to begin, I started creating two mood boards to give the web app a visual direction. I decided on the mood board below as it fit better with the branding guidelines and the keywords “Motivational”, “Informative” and “Challenging” given to me in the project brief.
Logo Design
The logo resembles a person in different postures, inspired by Leonardo da Vinci's vitruvian man.
It symbolises the human body and fits the purpose of the web app well.
From Low to High Fidelity
Home Screen
I kept the concept very similar throughout the iterations as cards are an intuitive and well-known way to display information.
Workout List
I added a “sort by” button and moved the filter from the top right in-line with it. I also added information about the duration, intensity and level of the workout displayed.
Schedule
This feature also stayed very similar throughout, as a date picker is an easily recognisable component.
Exercise Info
Originally I only had one video playing at the top of the screen. But changed it to multiple screenshots of that video to be displayed underneath with additional explanation on how to do the exercise.
Home Screen
I kept the concept very similar throughout the iterations as cards are an intuitive and well-known way to display information.
Workout List
I added a “sort by” button and moved the filter from the top right in-line with it. I also added information about the duration, intensity and level of the workout displayed.
Schedule
This feature also stayed very similar throughout, as a date picker is an easily recognisable component.
Exercise Info
Originally I only had one video playing at the top of the screen. But changed it to multiple screenshots of that video to be displayed underneath with additional explanation on how to do the exercise.
Responsive Design
Style Guide
Schedule
Colours
Typography
Iconography
About
My role:
UI Designer
Duration:
3 weeks, May 26th - June 20th 2022
Tools:
Figma, Pen and Paper
Why Fitted?
Finding exercises for your level can be difficult, especially if you want to try something new.
This responsive web app aims to help people getting back into exercise routines by providing guides, interactive examples, and info.
Secondly, peoples lives get busier and busier, so finding routines that fit into their schedules is not easy.
Fitted is designed to encourage people who want to get back into, or start a routine for physical activities.
This means fitting in as little as a 5-minute routine into their schedules.
About Fitted
My role:
UI Designer
Duration:
3 weeks, May 26th - June 20th 2022
Tools:
Figma, Pen and Paper
Why Fitted?
Finding exercises for your level can be difficult, especially if you want to try something new.
This responsive web app aims to help people getting back into exercise routines by providing guides, interactive examples, and info.
Secondly, peoples lives get busier and busier, so finding routines that fit into their schedules is not easy.
Fitted is designed to encourage people who want to get back into, or start a routine for physical activities.
This means fitting in as little as a 5-minute routine into their schedules.
Who is it for?
Rebecca
Project Manager
33 years old
Mother of one
In a relationship
Goals
Rebecca wants to lose weight and get in shape
Her sedentary job doesn’t allow a lot of time for exercising
To help with this goal, Rebecca wants help by fitting exercise routines into her schedule.
As a beginner at working out, Rebecca also wants something that will help her learn how to properly exercise
Rebecca wants help finding routines she can enjoy.
Environment
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter
Social: She has several friends from her job, and one of them recommended this tool as something she should check out to help her reach her goals
Technological: Rebecca is very tech savvy, as she works on computers every day
Quotes
“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.”
Tasks
Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape
In addition, she wants to find short exercises that she can do multiple times per day in between other activities
She wants the tool to keep her motivated as well, as her schedule can often be distracting
Goals
Rebecca wants to lose weight and get in shape
Her sedentary job doesn’t allow a lot of time for exercising
To help with this goal, Rebecca wants help by fitting exercise routines into her schedule.
As a beginner at working out, Rebecca also wants something that will help her learn how to properly exercise
Rebecca wants help finding routines she can enjoy.
Environment
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter
Social: She has several friends from her job, and one of them recommended this tool as something she should check out to help her reach her goals
Technological: Rebecca is very tech savvy, as she works on computers every day
Tasks
Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape
In addition, she wants to find short exercises that she can do multiple times per day in between other activities
She wants the tool to keep her motivated as well, as her schedule can often be distracting
Quotes
“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.”
Key Features
Explore
Discover new workout routines and challenges to get in shape, or wellbeing exercises to wind down after a busy day.
Filter
Find exactly what you are looking for in the blink of an eye. You can scan and filter through all exercises and workouts to find the exercise you are looking for.
Schedule
Add workouts, or exercises to your calendar to fit your daily schedule.
Progress
Track how a little effort can go a long way and stay motivated. Receive points for every completed workout and exercise.
Filter
Find exactly what you are looking for in the blink of an eye. You can scan and filter through all exercises and workouts to find the exercise you are looking for.
Schedule
Add workouts, or exercises to your calendar to fit your daily schedule.
Progress
Track how a little effort can go a long way and stay motivated. Receive points for every completed workout and exercise.
Mood Board
With the UI design process about to begin, I started creating two mood boards to give the web app a visual direction. I decided on the mood board below as it fit better with the branding guidelines and the keywords “Motivational”, “Informative” and “Challenging” given to me in the project brief.
Logo Design
The logo resembles a person in different postures, inspired by Leonardo da Vinci's vitruvian man.
It symbolises the human body and fits the purpose of the web app well.
From Low to High Fidelity
Home Screen
I kept the concept very similar throughout the iterations as cards are an intuitive and well-known way to display information.
Workout List
I added a “sort by” button and moved the filter from the top right in-line with it. I also added information about the duration, intensity and level of the workout displayed.
Schedule
This feature also stayed very similar throughout, as a date picker is an easily recognisable component.
Exercise Info
Originally I only had one video playing at the top of the screen. But changed it to multiple screenshots of that video to be displayed underneath with additional explanation on how to do the exercise.
Home Screen
I kept the concept very similar throughout the iterations as cards are an intuitive and well-known way to display information.
Workout List
I added a “sort by” button and moved the filter from the top right in-line with it. I also added information about the duration, intensity and level of the workout displayed.
Schedule
This feature also stayed very similar throughout, as a date picker is an easily recognisable component.
Exercise Info
Originally I only had one video playing at the top of the screen. But changed it to multiple screenshots of that video to be displayed underneath with additional explanation on how to do the exercise.
Responsive Design
Style Guide
Schedule
Colours
Typography
Iconography
About
My role:
UI Designer
Duration:
3 weeks, May 26th - June 20th 2022
Tools:
Figma, Pen and Paper
Why Fitted?
Finding exercises for your level can be difficult, especially if you want to try something new.
This responsive web app aims to help people getting back into exercise routines by providing guides, interactive examples, and info.
Secondly, peoples lives get busier and busier, so finding routines that fit into their schedules is not easy.
Fitted is designed to encourage people who want to get back into, or start a routine for physical activities.
This means fitting in as little as a 5-minute routine into their schedules.
About Fitted
My role:
UI Designer
Duration:
3 weeks, May 26th - June 20th 2022
Tools:
Figma, Pen and Paper
Why Fitted?
Finding exercises for your level can be difficult, especially if you want to try something new.
This responsive web app aims to help people getting back into exercise routines by providing guides, interactive examples, and info.
Secondly, peoples lives get busier and busier, so finding routines that fit into their schedules is not easy.
Fitted is designed to encourage people who want to get back into, or start a routine for physical activities.
This means fitting in as little as a 5-minute routine into their schedules.
Who is it for?
Rebecca
Project Manager
33 years old
Mother of one
In a relationship
Goals
Rebecca wants to lose weight and get in shape
Her sedentary job doesn’t allow a lot of time for exercising
To help with this goal, Rebecca wants help by fitting exercise routines into her schedule.
As a beginner at working out, Rebecca also wants something that will help her learn how to properly exercise
Rebecca wants help finding routines she can enjoy.
Environment
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter
Social: She has several friends from her job, and one of them recommended this tool as something she should check out to help her reach her goals
Technological: Rebecca is very tech savvy, as she works on computers every day
Quotes
“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.”
Tasks
Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape
In addition, she wants to find short exercises that she can do multiple times per day in between other activities
She wants the tool to keep her motivated as well, as her schedule can often be distracting
Goals
Rebecca wants to lose weight and get in shape
Her sedentary job doesn’t allow a lot of time for exercising
To help with this goal, Rebecca wants help by fitting exercise routines into her schedule.
As a beginner at working out, Rebecca also wants something that will help her learn how to properly exercise
Rebecca wants help finding routines she can enjoy.
Environment
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter
Social: She has several friends from her job, and one of them recommended this tool as something she should check out to help her reach her goals
Technological: Rebecca is very tech savvy, as she works on computers every day
Tasks
Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape
In addition, she wants to find short exercises that she can do multiple times per day in between other activities
She wants the tool to keep her motivated as well, as her schedule can often be distracting
Quotes
“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.”
Key Features
Explore
Discover new workout routines and challenges to get in shape, or wellbeing exercises to wind down after a busy day.
Filter
Find exactly what you are looking for in the blink of an eye. You can scan and filter through all exercises and workouts to find the exercise you are looking for.
Schedule
Add workouts, or exercises to your calendar to fit your daily schedule.
Progress
Track how a little effort can go a long way and stay motivated. Receive points for every completed workout and exercise.
Filter
Find exactly what you are looking for in the blink of an eye. You can scan and filter through all exercises and workouts to find the exercise you are looking for.
Schedule
Add workouts, or exercises to your calendar to fit your daily schedule.
Progress
Track how a little effort can go a long way and stay motivated. Receive points for every completed workout and exercise.
Mood Board
With the UI design process about to begin, I started creating two mood boards to give the web app a visual direction. I decided on the mood board below as it fit better with the branding guidelines and the keywords “Motivational”, “Informative” and “Challenging” given to me in the project brief.
Logo Design
The logo resembles a person in different postures, inspired by Leonardo da Vinci's vitruvian man.
It symbolises the human body and fits the purpose of the web app well.
From Low to High Fidelity
Home Screen
I kept the concept very similar throughout the iterations as cards are an intuitive and well-known way to display information.
Workout List
I added a “sort by” button and moved the filter from the top right in-line with it. I also added information about the duration, intensity and level of the workout displayed.
Schedule
This feature also stayed very similar throughout, as a date picker is an easily recognisable component.
Exercise Info
Originally I only had one video playing at the top of the screen. But changed it to multiple screenshots of that video to be displayed underneath with additional explanation on how to do the exercise.
Home Screen
I kept the concept very similar throughout the iterations as cards are an intuitive and well-known way to display information.
Workout List
I added a “sort by” button and moved the filter from the top right in-line with it. I also added information about the duration, intensity and level of the workout displayed.
Schedule
This feature also stayed very similar throughout, as a date picker is an easily recognisable component.
Exercise Info
Originally I only had one video playing at the top of the screen. But changed it to multiple screenshots of that video to be displayed underneath with additional explanation on how to do the exercise.
Responsive Design
Style Guide
Schedule
Colours
Typography
Iconography
Retrospective
Retrospect
a
How did the original objective compare to the final result?
The original objective was to design a workout web application for people with a busy schedule and to remind and motivate them to get back into a workout routine, to stay or get back into shape. As my role in this study project was only to design the user interface, the purpose of this app did not change. From a UX standpoint, I would have added some kind of quiz or test workout as some kind of onboarding and to find the level of each user for them before they start a routine.
a
What was the most challenging part of the project?
For me, it was deciding on a color scheme based on key words but after creating a few mood boards, even this was an informed decision, as some color combinations and components just make for a more complete and compelling design.
a
What would I do differently next time?
I would re-design the home screen from tablet up, as the filter and sort by menu are only accessible through an accordion and not constantly visible. I would also try to add more guidance for users and some kind of quiz to recommend them the right exercises. Considering the tight schedule for this project, I am happy with the result.