Fitted
UI Design Case Study
What is Fitted?
Fitted is a web application that I created during my UI Design
course at Careerfoundry. The goal of this app is to help people get into an exercise routine that suits their level, schedule, and interests.
My role:
UI Designer
Duration:
6 weeks
Tools:
Figma
Fitted
UI Design Case Study
What is Fitted?
Fitted is a web application that I created during my UI Design
course at Careerfoundry. The goal of this app is to help people get into an exercise routine that suits their level, schedule, and interests.
My role:
UI Designer
Duration:
6 weeks
Tools:
Figma
Fitted
UI Design Case Study
What is Fitted?
Fitted is a web application that I created during my UI Design course at Careerfoundry. The goal of this app is to help people get into an exercise routine that suits their level, schedule, and interests.
My role:
UI Designer
Duration:
6 weeks
Tools:
Figma
Fitted
UI Design Case Study
What is Fitted?
Fitted is a web application that I created during my UI Design course at Careerfoundry. The goal of this app is to help people get into an exercise routine that suits their level, schedule, and interests.
My role:
UI Designer
Duration:
6 weeks
Tools:
Figma
What is Fitted?
Fitted is a web application that I created during my UI Design course at Careerfoundry. The goal of this app is to help people get into an exercise routine that suits their level, schedule, and interests.
My role:
UI Designer
Duration:
6 weeks
Tools:
Figma
Case Summary
Background
Many of us want to become healthier and want to get exercise into an easy routine for physical activities.
Firstly, finding exercise routines for different levels can be difficult, especially if you are new or returning to fitness.
Secondly, finding routines that fit into a busy schedule is not easy. Which is even fitting in as little as a 5-minute routine.
Many of us want to become healthier and want to get exercise into an easy routine for physical activities.
Firstly, finding exercise routines for different levels can be difficult, especially if you are new or returning to fitness.
Secondly, finding routines that fit into a busy schedule is not easy. Which is even fitting in as little as a 5-minute routine.
Problem Statement
Our users need a way to find exercises that suit their level and fit into their everyday schedule because they are new or returning to exercise, want to stay motivated, and get into a healthy routine.
Our users need a way to find exercises that suit their level and fit into their everyday schedule because they are new or returning to exercise, want to stay motivated, and get into a healthy routine.
Potential Solution
A responsive web app that allows users to search and view routines, guides, daily challenges, and overtime progression. They can also keep a schedule by adding sessions to their personal calendar.
A responsive web app that allows users to search and view routines, guides, daily challenges, and overtime progression. They can also keep a schedule by adding sessions to their personal calendar.
What design process did I follow?
How did I empathize with potential users?
I focused on designing the app’s interface based on the project brief provided by Careerfoundry.
To ensure focus on my users I created a primary user persona, Rebecca, based on information from the brief. Understanding these user needs, behaviours and pain points helped me guide my design decisions.
I focused on designing the app’s interface based on the project brief provided by Careerfoundry.
To ensure focus on my users I created a primary user persona, Rebecca, based on information from the brief. Understanding these user needs, behaviours and pain points helped me guide my design decisions.
What did fitness trainer say?
In addition to the project brief, I gathered essential information from the fitness trainer to ensure that the app's content is relevant, and beneficial for users.
In addition to the project brief, I gathered essential information from the fitness trainer to ensure that the app's content is relevant, and beneficial for users.
‘’For beginners, it's best to stick to 2-3 weeks plans that match their goals. This way, they can learn progressively.’’
‘’For beginners, it's best to stick to 2-3 weeks plans that match their goals. This way, they can learn progressively.’’
‘’From my experience, beginners need to be praised for small achievements which motivate them to stay consistent.’’
‘’From my experience, beginners need to be praised for small achievements which motivate them to stay consistent.’’
‘’It's helpful for coaches to access people's progress data so they can offer better advice when necessary.’’
‘’It's helpful for coaches to access people's progress data so they can offer better advice when necessary.’’
‘’People need to realize that a healthy lifestyle isn't just about exercise. Nutrition, calorie intake, calorie burning, and hydration are all essential for achieving their goals.''
‘’People need to realize that a healthy lifestyle isn't just about exercise. Nutrition, calorie intake, calorie burning, and hydration are all essential for achieving their goals.''
What screens need to be designed?
I created User flows based on user stories from the project brief. This way I avoided certain mistakes and visualize users steps to effectively achieve their goals.
I created User flows based on user stories from the project brief. This way I avoided certain mistakes and visualize users steps to effectively achieve their goals.
User story 1
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 schedule exercises for working out, so that I build positive habits.
User story 2
As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.
User story 3
As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.
How did I develop wireframes?
I started to sketch individual screens represented in User Flow diagram. These screens with the basic functionality allowed me to create a simple prototype and get a feedback.
Once my ideas were tested I moved on creating digital mid-fidelity screens in Figma.
I started to sketch individual screens represented in User Flow diagram. These screens with the basic functionality allowed me to create a simple prototype and get a feedback.
Once my ideas were tested I moved on creating digital mid-fidelity screens in Figma.
''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 schedule exercises for working out, so that I build positive habits.''
''As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.''
''As a frequent user, I want to track progression and record what I’ve done, so that I can see my progress over time.''
''As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.''
''As a frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.''
How did I decide on visual elements?
Moodboard
When focusing on app style, I created a moodboard for a fitness app aimed at busy individuals. It features an energetic, professional colour scheme to keep users motivated and enjoying their workouts. The style is modern and easy to navigate, with images that inspire action and show how fitness can fit seamlessly into their schedules.
Moodboard
When focusing on app style, I created a moodboard for a fitness app aimed at busy individuals. It features an energetic, professional colour scheme to keep users motivated and enjoying their workouts. The style is modern and easy to navigate, with images that inspire action and show how fitness can fit seamlessly into their schedules.
Colour Palette
The main goal was to find a colour palette that energizes and motivates people who are new to fitness, without being too overpowering or aggressive.
The main goal was to find a colour palette that energizes and motivates people who are new to fitness, without being too overpowering or aggressive.
The website offers both dark and light modes, allowing users to choose their preferred theme.
The website offers both dark and light modes, allowing users to choose their preferred theme.
Primary
#FCCE58
#F9DE97
#FFFFFF
#1D1D1D
Secondary
#59FC7B
#F6F6F6
#CAC4D0
#736E7C
Gradient
#FCCE58
#59FC7B
#999999
#FFFFFF
#FCCE58
#FFFFFF
Primary
#FCCE58
#F9DE97
#FFFFFF
#1D1D1D
Secondary
#59FC7B
#F6F6F6
#CAC4D0
#736E7C
Gradient
#FCCE58
#59FC7B
#999999
#FFFFFF
#FCCE58
#FFFFFF
Typography
When selecting the typography, I knew it had to fit the style seamlessly. Montserrat was the perfect choice. Its modern, clean design matched the app’s aesthetic, and its high readability was essential for the users.
Typography
When selecting the typography, I knew it had to fit the style seamlessly. Montserrat was the perfect choice. Its modern, clean design matched the app’s aesthetic, and its high readability was essential for the users.
Typography
When selecting the typography, I knew it had to fit the style seamlessly. Montserrat was the perfect choice. Its modern, clean design matched the app’s aesthetic, and its high readability was essential for the users.
Montserrat
Montserrat
Montserrat
SemiBold
Regular
UI Elements
How did I design for different breakpoints?
User goals: I analysed user interactions on different devices.
Content Prioritization: I used a mobile first approach to streamline critical content for smaller screens.
Adaptive Layouts: I used a 4-point grid system for consistency. I expanded layouts for larger screens while maintaining usability.
Enhanced Usability: I adjusted the navigation and included extra content to optimize the user experience for bigger screens.
User goals: I analysed user interactions on different devices.
Content Prioritization: I used a mobile first approach to streamline critical content for smaller screens.
Adaptive Layouts: I used a 4-point grid system for consistency. I expanded layouts for larger screens while maintaining usability.
Enhanced Usability: I adjusted the navigation and included extra content to optimize the user experience for bigger screens.
User goals: I analysed user interactions on different devices.
Content Prioritization: I used a mobile first approach to streamline critical content for smaller screens.
Adaptive Layouts: I used a 4-point grid system for consistency. I expanded layouts for larger screens while maintaining usability.
Enhanced Usability: I adjusted the navigation and included extra content to optimize the user experience for bigger screens.
What did users say about the prototype?
I conducted usability testing with three participants, which helped me gather feedback and uncover potential issues. An iterative design process allowed me to refine the user experience continuously.
I conducted usability testing with three participants, which helped me gather feedback and uncover potential issues. An iterative design process allowed me to refine the user experience continuously.
Issue with scheduling workout:
The scheduled workouts look like various scheduling options.
Solution
Move scheduled workouts below the date and time selector.
Change the title to improve clarity.
Issue with scheduling workout:
The scheduled workouts look like various scheduling options.
Solution
Move scheduled workouts below the date and time selector.
Change the title to improve clarity.
Login
Search Workout
Search Workout
Schedule Workout
See Progression
See Progression
Complete Challenge
Reflection and Next steps
Key learnings
Getting people to use an app is not just about what the app offers but also how it fits into their lives and how it makes them feel.
Every element, colour, and aspect of the visual hierarchy plays a crucial role in creating a cohesive user experience.
I gained insights about the effective use of grids and designing for different breakpoints to ensure responsiveness across various devices.
Creating a style guide and organizing folders extended my knowledge, allowing me to work more efficiently within a team.
Getting people to use an app is not just about what the app offers but also how it fits into their lives and how it makes them feel.
Every element, colour, and aspect of the visual hierarchy plays a crucial role in creating a cohesive user experience.
I gained insights about the effective use of grids and designing for different breakpoints to ensure responsiveness across various devices.
Creating a style guide and organizing folders extended my knowledge, allowing me to work more efficiently within a team.
Next steps
Next step for app development I will focus on enhancing users' workout plans. This involves incorporating insights from interview with fitness coach and emphasizing the importance of structured workout plans for beginners. Key components include creating personalized workout plans based on users' goals and implementing AI to offer specific workouts tailored to users' real-time feelings and conditions.
Next step for app development I will focus on enhancing users' workout plans. This involves incorporating insights from interview with fitness coach and emphasizing the importance of structured workout plans for beginners. Key components include creating personalized workout plans based on users' goals and implementing AI to offer specific workouts tailored to users' real-time feelings and conditions.
Thank you for scrolling!
See other projects
