Redefining Fitness: Inclusive Workouts for Every Body
Redefining Fitness: Inclusive Workouts for Every Body
Redefining Fitness: Inclusive Workouts for Every Body
Trans4m is a responsive web app that aims to help users build a healthy routine through suggesting customized workout programs that are inclusive.
Trans4m is a responsive web app that aims to help users build a healthy routine through suggesting customized workout programs that are inclusive.
Trans4m is a responsive web app that aims to help users build a healthy routine through suggesting customized workout programs that are inclusive.
The brief
The brief
The brief
Design a responsive web app that motivates people into an exercise routine that suits their level, schedule, and interests.
Design a responsive web app that motivates people into an exercise routine that suits their level, schedule, and interests.
Design a responsive web app that motivates people into an exercise routine that suits their level, schedule, and interests.
The problem
The problem
The problem
Many fitness apps emphasize weight loss as a key metric in determining your progress. However, that can often be demotivating when you’re not seeing the results on the scale right away (which doesn’t mean you aren’t making progress) and deter you from continuing. Getting results takes time and determination and building a routine is the first step. However, when you’re new to fitness, knowing where to begin can be overwhelming.
Many fitness apps emphasize weight loss as a key metric in determining your progress. However, that can often be demotivating when you’re not seeing the results on the scale right away (which doesn’t mean you aren’t making progress) and deter you from continuing. Getting results takes time and determination and building a routine is the first step. However, when you’re new to fitness, knowing where to begin can be overwhelming.
Many fitness apps emphasize weight loss as a key metric in determining your progress. However, that can often be demotivating when you’re not seeing the results on the scale right away (which doesn’t mean you aren’t making progress) and deter you from continuing. Getting results takes time and determination and building a routine is the first step. However, when you’re new to fitness, knowing where to begin can be overwhelming.
The solution
The solution
The solution
I designed a responsive web app that aims to help users build a healthy routine through suggesting customized workout programs for them based on information provided in the on-boarding process. Gender, weight and age are excluded as we believe workouts should be inclusive and not based on demographics. To increase motivation, a reward system was implemented which is based on progress that is tracked through completed workouts.
I designed a responsive web app that aims to help users build a healthy routine through suggesting customized workout programs for them based on information provided in the on-boarding process. Gender, weight and age are excluded as we believe workouts should be inclusive and not based on demographics. To increase motivation, a reward system was implemented which is based on progress that is tracked through completed workouts.
I designed a responsive web app that aims to help users build a healthy routine through suggesting customized workout programs for them based on information provided in the on-boarding process. Gender, weight and age are excluded as we believe workouts should be inclusive and not based on demographics. To increase motivation, a reward system was implemented which is based on progress that is tracked through completed workouts.
My role
My role
My role
UX/UI Designer
UX/UI Designer
UX/UI Designer
Duration
Duration
Duration
5 Weeks
5 Weeks
5 Weeks
Tools
Tools
Tools
Lucid, Figma
Lucid, Figma
Lucid, Figma
Architecture
Architecture
Architecture
Because the project was UI focused, a lot of the research phase info was provided to me through a brief. Therefore, using the Proto-Persona info and the User Stories, I created a User Flow Diagram.
Because the project was UI focused, a lot of the research phase info was provided to me through a brief. Therefore, using the Proto-Persona info and the User Stories, I created a User Flow Diagram.
Because the project was UI focused, a lot of the research phase info was provided to me through a brief. Therefore, using the Proto-Persona info and the User Stories, I created a User Flow Diagram.
Low-fidelity wireframes
Low-fidelity wireframes
Low-fidelity wireframes
After completing my user flow diagram, I started sketching out my screens on paper. This efficient process allowed me to quickly get my ideas on paper and easily make changes.
After completing my user flow diagram, I started sketching out my screens on paper. This efficient process allowed me to quickly get my ideas on paper and easily make changes.
After completing my user flow diagram, I started sketching out my screens on paper. This efficient process allowed me to quickly get my ideas on paper and easily make changes.
Mid-fidelity wireframes
Mid-fidelity wireframes
Mid-fidelity wireframes
Once I was happy with my paper sketches, I used Figma to create mid-fidelity wireframes. I established a grid system and dug deeper on screen hierarchy after which additional iterations were made. More screens were also defined to complete flows along with some UI elements.
Once I was happy with my paper sketches, I used Figma to create mid-fidelity wireframes. I established a grid system and dug deeper on screen hierarchy after which additional iterations were made. More screens were also defined to complete flows along with some UI elements.
Once I was happy with my paper sketches, I used Figma to create mid-fidelity wireframes. I established a grid system and dug deeper on screen hierarchy after which additional iterations were made. More screens were also defined to complete flows along with some UI elements.
Moodboard
Moodboard
Moodboard
I began by creating two very distinct moodboards. I ultimately decided on the moodboard below as it radiates energy, fun and strength through the images and colours chosen. The colour orange is known to represent joy, encouragement and determination (to name a few) which is what TRANS4M aims to achieve in its users.
I began by creating two very distinct moodboards. I ultimately decided on the moodboard below as it radiates energy, fun and strength through the images and colours chosen. The colour orange is known to represent joy, encouragement and determination (to name a few) which is what TRANS4M aims to achieve in its users.
I began by creating two very distinct moodboards. I ultimately decided on the moodboard below as it radiates energy, fun and strength through the images and colours chosen. The colour orange is known to represent joy, encouragement and determination (to name a few) which is what TRANS4M aims to achieve in its users.
Introducing Trans4m
The inclusive workout app
Introducing Trans4m
The inclusive workout app
Introducing Trans4m
The inclusive workout app
Responsive web app
Responsive web app
Responsive web app
As the app was designed as a responsive web app, I used an adaptive grid system to design additional breakpoints.
As the app was designed as a responsive web app, I used an adaptive grid system to design additional breakpoints.
As the app was designed as a responsive web app, I used an adaptive grid system to design additional breakpoints.
The Desktop Dashboard features additional components that are hidden on mobile and tablet due to its larger screen size.
The Desktop Dashboard features additional components that are hidden on mobile and tablet due to its larger screen size.
The Desktop Dashboard features additional components that are hidden on mobile and tablet due to its larger screen size.
Let's team up to bring great ideas to life!
Let's team up to bring great ideas to life!
Let's team up to bring great ideas to life!
Copy my email
Copied
Copy my email
Copied
Copy my email
Copied