FITTED
Responsive Web App
Objective
Starting a fitness routine can be hard for those who are new or returning to exercise. It’s important to have a plan and easy access to a workout in order to ensure success.
CHALLENGE
Developing a responsive web app for various exercises to provide encouragement that is available for anyone at any level. While it may be hard to find time to work out, the ability to search with filters and customize and schedule workouts will help to ensure any user can achieve a healthier lifestyle.
SOLUTION
Fitted is a fitness app which allow the user to choose from hundreds of exercises and customize full workouts. With features such as scheduling, reminders, and awards – from beginners to advanced – will boost performance.
ROLL
UX Design
UI Design
User Research
TOOLS
FIGMA
PHOTOSHOP
ILLUSTRATOR
Design Process
Objective
Starting a fitness routine can be hard for those who are new or returning to exercise. It’s important to have a plan and easy access to a workout in order to ensure success.
CHALLENGE
Developing a responsive web app for various exercises to provide encouragement that is available for anyone at any level. While it may be hard to find time to work out, the ability to search with filters and customize and schedule workouts will help to ensure any user can achieve a healthier lifestyle.
SOLUTION
Fitted is a fitness app which allow the user to choose from hundreds of exercises and customize full workouts. With features such as scheduling, reminders, and awards – from beginners to advanced – will boost performance.
ROLL
UX Design
UI Design
User Research
TOOLS
FIGMA
PHOTOSHOP
ILLUSTRATOR
Design Process
Objective
Starting a fitness routine can be hard for those who are new or returning to exercise. It’s important to have a plan and easy access to a workout in order to ensure success.
CHALLENGE
Developing a responsive web app for various exercises to provide encouragement that is available for anyone at any level. While it may be hard to find time to work out, the ability to search with filters and customize and schedule workouts will help to ensure any user can achieve a healthier lifestyle.
SOLUTION
Fitted is a fitness app which allow the user to choose from hundreds of exercises and customize full workouts. With features such as scheduling, reminders, and awards – from beginners to advanced – will boost performance.
ROLL
UX Design
UI Design
User Research
TOOLS
FIGMA
PHOTOSHOP
ILLUSTRATOR
01.
EMPHATIZE
Empathize involves understanding the user’s needs, goals, and pain points through interviews, surveys, and observations. The goal is to gain insight into the user’s perspective and develop empathy to guide the design process. This stage ensures that the product meets the user’s needs and provides a satisfying user experience.
FORM WHOM?
People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Fitted.
WHAT?
A responsive web app is best for Fitted, as users can search and view routines, guides, daily challenges, and other information on any device. They can also keep a schedule by adding sessions to their personal calendar.
WHEN AND WHERE?
Whenever and wherever are users want, the web app aim to get users into a routine that suits them and they will use the web app while hey are searching for, scheduling, and following routines.
WHY?
To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new)
01.
EMPHATIZE
Empathize involves understanding the user’s needs, goals, and pain points through interviews, surveys, and observations. The goal is to gain insight into the user’s perspective and develop empathy to guide the design process. This stage ensures that the product meets the user’s needs and provides a satisfying user experience.
FORM WHOM?
People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Fitted.
WHAT?
A responsive web app is best for Fitted, as users can search and view routines, guides, daily challenges, and other information on any device. They can also keep a schedule by adding sessions to their personal calendar.
WHEN AND WHERE?
Whenever and wherever are users want, the web app aim to get users into a routine that suits them and they will use the web app while hey are searching for, scheduling, and following routines.
WHY?
To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new)
01.
EMPHATIZE
Empathize involves understanding the user’s needs, goals, and pain points through interviews, surveys, and observations. The goal is to gain insight into the user’s perspective and develop empathy to guide the design process. This stage ensures that the product meets the user’s needs and provides a satisfying user experience.
FORM WHOM?
People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Fitted.
WHAT?
A responsive web app is best for Fitted, as users can search and view routines, guides, daily challenges, and other information on any device. They can also keep a schedule by adding sessions to their personal calendar.
WHEN AND WHERE?
Whenever and wherever are users want, the web app aim to get users into a routine that suits them and they will use the web app while hey are searching for, scheduling, and following routines.
WHY?
To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new)
02
DEFINE
USER PERSONA
After we understand the user’s needs and goals by conducting research, surveys, and interviews to gather information about our target audience, we are able to create user personas that represent the typical users of our product. By defining user personas during the design process, we can understand the user’s needs, improve usability, reduce risks, and increase engagement. It provides valuable insights into the user’s preferences, behaviors, and pain points, which can be used to create a product that aligns with their needs and resonates with them emotionally.
“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.”
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 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.
TASK
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.
ENVIRONMENT
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.
Social: She has several friends from her software development 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.
Disclaimer:
All the information presented in the empathize and define stages were based in the provided project brief
02
DEFINE
USER PERSONA
After we understand the user’s needs and goals by conducting research, surveys, and interviews to gather information about our target audience, we are able to create user personas that represent the typical users of our product. By defining user personas during the design process, we can understand the user’s needs, improve usability, reduce risks, and increase engagement. It provides valuable insights into the user’s preferences, behaviors, and pain points, which can be used to create a product that aligns with their needs and resonates with them emotionally.
Rebecca
Age: 36 years
Job: Software Developer
Status: Mother and in a relationship
Fitness level: Beginner
“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.”
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 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.
TASK
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.
ENVIRONMENT
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.
Social: She has several friends from her software development 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.
Disclaimer:
All the information presented in the empathize and define stages were based in the provided project brief
02
DEFINE
USER PERSONA
After we understand the user’s needs and goals by conducting research, surveys, and interviews to gather information about our target audience, we are able to create user personas that represent the typical users of our product. By defining user personas during the design process, we can understand the user’s needs, improve usability, reduce risks, and increase engagement. It provides valuable insights into the user’s preferences, behaviors, and pain points, which can be used to create a product that aligns with their needs and resonates with them emotionally.
Rebecca
Age: 36 years
Job: Software Developer
Status: Mother and in a relationship
Fitness level: Beginner
“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.”
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 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.
TASK
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.
ENVIRONMENT
Physical: Rebecca lives in an apartment with her boyfriend and 3-year old daughter.
Social: She has several friends from her software development 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.
Disclaimer:
All the information presented in the empathize and define stages were based in the provided project brief
03
IDEATE
03
IDEATE
USER FLOW
With the information provided from the previous step, we were able to identify the key features and functions of our app and map out the user flow, starting with the main screen and branching out to different features. We considered the user’s mental model and created an intuitive navigation system that helps the user achieve their fitness objectives. Finally, we tested the user flow with beta testers and made adjustments based on their feedback.
USER STORY
“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 earn achievements or rewards, so that I can stay motivated.”
“As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.”
“As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.”
03
IDEATE
USER FLOW
With the information provided from the previous step, we were able to identify the key features and functions of our app and map out the user flow, starting with the main screen and branching out to different features. We considered the user’s mental model and created an intuitive navigation system that helps the user achieve their fitness objectives. Finally, we tested the user flow with beta testers and made adjustments based on their feedback.
USER STORY
“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 earn achievements or rewards, so that I can stay motivated.”
“As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.”
“As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.”
04.
BUILDING
04.
BUILDING
LOW-FEDELITY WIREFRAMES
During the design process, I began creating wireframes to reflect the steps in the user flow. Initially, I sketched low-fidelity wireframes and then designed mid-fidelity wireframes to add more screens. I ensured that the design was minimalistic, intuitive, and easily scalable to other screens such as tablets and desktop computers. The wireframe stage involves creating a visual representation of the product’s layout and helps to refine the design before moving on to prototyping.
04.
BUILDING
LOW-FEDELITY WIREFRAMES
During the design process, I began creating wireframes to reflect the steps in the user flow. Initially, I sketched low-fidelity wireframes and then designed mid-fidelity wireframes to add more screens. I ensured that the design was minimalistic, intuitive, and easily scalable to other screens such as tablets and desktop computers. The wireframe stage involves creating a visual representation of the product’s layout and helps to refine the design before moving on to prototyping.
05.
ITERATE
05.
ITERATE
MOODBOARD
After finalizing the low-fidelity wireframe, the next step was to create the look and feel of the web responsive App. To accomplish this, I started by creating a Moodboard that reflected the concepts and values our product was built on. A Moodboard is a visual representation of the product’s style, colors, typography, and imagery. It helps to set the overall tone and direction of the design.
Encouraging / Positive / Energetic
Encouraging / Positive / Energetic
05.
ITERATE
MOODBOARD
After finalizing the low-fidelity wireframe, the next step was to create the look and feel of the web responsive App. To accomplish this, I started by creating a Moodboard that reflected the concepts and values our product was built on. A Moodboard is a visual representation of the product’s style, colors, typography, and imagery. It helps to set the overall tone and direction of the design.
Encouraging / Positive / Energetic
Encouraging / Positive / Energetic
06
FINAL PROTOTYPE
06
FINAL PROTOTYPE
HIGH-FIDELITY WIREFRAME
Following the creation of the Moodboard, that reflected the project’s concepts and values, the next step in the design process was to refine the design. To accomplish this, I created a high-fidelity wireframe that included more detail and accurately represented the final product’s appearance and functionality. A high-fidelity wireframe is a detailed visual representation of the product that shows how the user interacts with the various elements on the screen. This stage helps to ensure that the design meets the user’s needs and expectations before moving on to prototyping.
STYLE GUIDE
ICONS
Monochromatic: Icons are solid color in accordance to the color palette and contrast.
Outlined: The icons are outlined for a more modern look and feel that aligns with the mood.
Stroke: Outline stroke is 1,5, which give visibility at the minimum icon sizes and maintains uniformity and coherence in the design.
Soft Edges: Soft and lightly rounded edges to make shapes with a friendly and welcoming look.
Geometric: Simple and consistent shapes that are readable and provide a well balanced, minimalistic icon appearance.
FONTS
COLOR PALETTE
MAIN COLOR
SECONDARY COLORS
NEUTRAL COLORS
BUTTONS
PROGRESS BAR
NOTIFICATION BUTTON
TIME SCROLL
ICONS
Monochromatic: Icons are solid color in accordance to the color palette and contrast.
Outlined: The icons are outlined for a more modern look and feel that aligns with the mood.
Stroke: Outline stroke is 1,5, which give visibility at the minimum icon sizes and maintains uniformity and coherence in the design.
Soft Edges: Soft and lightly rounded edges to make shapes with a friendly and welcoming look.
Geometric: Simple and consistent shapes that are readable and provide a well balanced, minimalistic icon appearance.
FONTS
COLOR PALETTE
MAIN COLOR
SECONDARY COLORS
NEUTRAL COLORS
BUTTONS
PROGRESS BAR
NOTIFICATION BUTTON
TIME SCROLL
IMAGERY
Appropriate Images
The pictures should show a friendly and save environment, following the same principles as the color palette, the direction we are establishing is to give our targeted users is a friendly web app, where they can feel related and not scare or intimidated, also diversity in ethnicity is also important showing that no one should be be set aside. Basic training, having fun and enjoying the time during the exercises, the pictures should show encourage, positive and energetic.
RESPONSIVE BREAK POINTS
To make my designs responsive, I started by selecting the tablet and desktop breakpoints and scaling my existing grid in the design process. Responsive breakpoints are the points at which a website’s layout will change to accommodate different screen sizes. Once the breakpoints were established, I applied the visual design as dictated by the Fitted style guide to my wireframes. This ensured that the final design would maintain a consistent look and feel across all devices.
Feel free to interact with the prototype
06
FINAL PROTOTYPE
HIGH-FIDELITY WIREFRAME
Following the creation of the Moodboard, that reflected the project’s concepts and values, the next step in the design process was to refine the design. To accomplish this, I created a high-fidelity wireframe that included more detail and accurately represented the final product’s appearance and functionality. A high-fidelity wireframe is a detailed visual representation of the product that shows how the user interacts with the various elements on the screen. This stage helps to ensure that the design meets the user’s needs and expectations before moving on to prototyping.
STYLE GUIDE
ICONS
Monochromatic: Icons are solid color in accordance to the color palette and contrast.
Outlined: The icons are outlined for a more modern look and feel that aligns with the mood.
Stroke: Outline stroke is 1,5, which give visibility at the minimum icon sizes and maintains uniformity and coherence in the design.
Soft Edges: Soft and lightly rounded edges to make shapes with a friendly and welcoming look.
Geometric: Simple and consistent shapes that are readable and provide a well balanced, minimalistic icon appearance.
FONTS
COLOR PALETTE
MAIN COLOR
SECONDARY COLORS
NEUTRAL COLORS
BUTTONS
PROGRESS BAR
NOTIFICATION BUTTON
TIME SCROLL
IMAGERY
Appropriate Images
The pictures should show a friendly and save environment, following the same principles as the color palette, the direction we are establishing is to give our targeted users is a friendly web app, where they can feel related and not scare or intimidated, also diversity in ethnicity is also important showing that no one should be be set aside. Basic training, having fun and enjoying the time during the exercises, the pictures should show encourage, positive and energetic.
RESPONSIVE BREAK POINTS
To make my designs responsive, I started by selecting the tablet and desktop breakpoints and scaling my existing grid in the design process. Responsive breakpoints are the points at which a website’s layout will change to accommodate different screen sizes. Once the breakpoints were established, I applied the visual design as dictated by the Fitted style guide to my wireframes. This ensured that the final design would maintain a consistent look and feel across all devices.
07.
CONCLUSION
It was an interesting challenge, thinking in a responsive web app, going from Mobil first and escalate the design in the different breakpoints and keeping a consisting look through the different stages. During this project I added to my process the concept of a Moodboard, which in the end become an essential part of the process to give the look and feel of the web app and start to build the face of the design. The journey trough this project added more value and new elements or tool to my workflow, not only in a technical level, by working with different software, but also in a conceptual level by adding new knowledge in terms of UI Patterns, Style guide lines, layouts for responsive design and pixel perfection – all these things showed me that UI design requires taste and a holistic vision
07.
CONCLUSION
07.
CONCLUSION
It was an interesting challenge, thinking in a responsive web app, going from Mobil first and escalate the design in the different breakpoints and keeping a consisting look through the different stages. During this project I added to my process the concept of a Moodboard, which in the end become an essential part of the process to give the look and feel of the web app and start to build the face of the design. The journey trough this project added more value and new elements or tool to my workflow, not only in a technical level, by working with different software, but also in a conceptual level by adding new knowledge in terms of UI Patterns, Style guide lines, layouts for responsive design and pixel perfection – all these things showed me that UI design requires taste and a holistic vision