Mobile, desktop and tablet view of the home page

As an individual, I've always had a love-hate relationship with exercise and with my own body positivity. Society's unrealistic standards don't help either. As I age and mature, I slowly understand the importance of body positivity and the fact that there is no one-size-fits-all workout. Men's and women's bodies are different and would need different approaches to fitness and overall health optimization.

Fitted is a responsive web app that highly focuses on providing content and exercise assistance for women of all shapes, sizes, and levels. It aims to promote and exercise body positivity because there is no one-size-fits-all workout routine. Because of that, it provides a custom workout program based on its users' fitness goals and needs.

Discover

Women who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Fitted.

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.

As the web app aims to get users into a routine that suits them, the web app can be used whenever they like. They will use the web app while they are searching for, scheduling, and following routines.

When on the go or when practicing exercise routines at home, in the park, on the street, etc. Users can stay fit anywhere, as long as they’re logged in on a device.

To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new)

Exercise should be fun and suited to each user

To save time by fitting exercise into daily routines, such as walking or cycling to work or school

To join a community that promotes body positivity and aims to break society's standard of fit and healthy

Define

To begin understanding what the target user needs, it's important to start with conceptualizing user persona(s). The user persona will help me further ideate the concept of Fitted.

Ideate

To start, I designed the user flows to understand how many steps and screens the user needs to complete specific tasks and how the screens would need to be portrayed.

To guide me, I used some user stories provided by the project brief.

As a new user, I want to learn about different exercises, so that I can figure out what is best for me.

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 schedule exercises for working out, so that I build positive habits.

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 track progression and record what I’ve done, so that I can see my progress over time.

Develop

After designing the user flows, I have a better understanding of what Fitted needs to be. From there, I started brainstorming and worked on rough sketches.

I like to start the design process with rough sketches/low-fidelity wireframes to be more efficient with my time. This is the way I iterate through many design options quickly.

From the information gathered through the empathize, define, and ideate stage to the low-fidelity wireframing, I made some design decisions:

(1) Make the design as clean and welcoming as possible. No cognitive overload as we want to provide a welcoming space for beginners and as well for those who are looking for a simple restart.

(2) As I am designing for users who lack time, the home screen will provide a dashboard that shows metrics they want to see, like their progress and workout/program of the day.

(3) Provide several options to do the workout to accommodate accessibility. Options such as: watching a video of the workout, listening to an audio that explains the workout, and showing a list of the workout routine with specific details like how to do the movement and how many reps/sets are needed to complete the workout.

Iterate and Deliver

Once I had a better idea of the screens I needed to make to bring Fitted to life, I then focused on conceptualizing the UI elements and design. To start this process, I designed a mood board. The moldboard consists of images, texts, and colors that I would like to serve as the theme of Fitted's UI.

Before jumping into designing high-fidelity screens, I like to first determine the grid system and breakpoints. This way I can start designing with all the systems in place.

Because Fitted is a responsive web application, several breakpoints were set in place. A breakpoint for mobile, tablet, and desktop view. This allows me to design for each view and provide a good transition from one view to another. To also help with the consistency of the app's design, a grid system is set on each screen and each view.

Columns: 4

Margin: 24px

Gutter: 20px

Breakpoint: 414px

Columns: 8

Margin: 32px

Gutter: 20px

Breakpoint: 834px

Columns: 12

Margin: 32px

Gutter: 20px

Breakpoint: 1280px

From all the information I gathered and the systems I set in place, I have a clear view of what Fitted is and should look like. I moved on to designing high-fidelity wireframes.

With the final high-fidelity wireframes, a prototype was designed to provide the complete user experience of Fitted. This prototype allows users to complete a specific goal, which is to sign up and get a personalized workout program.

Feel free to interact with the prototype :)

To accommodate the different breakpoints, I designed two more ways to view Fitted. A tablet and desktop view.

I created a style guide for Fitted to keep up with its consistency and also provide a document that provides an efficient way to iterate designs.

Coming from a UX-heavy project, I really enjoyed working on Fitted. It opened my eyes to the UI world. It helped me appreciate the small design decisions that produce significant results, such as the color scheme or the illustrations used.

I decided to work on Fitted because it provides a solution to a problem I also relate to. With Fitted, I wanted to provide a platform that even I would use. I wanted to give an application that accommodates women of all shapes and sizes and promotes a healthy approach to fitness. Not the way society tells you to.

I want to continue working on this concept and further develop the app. I want to use it to further improve my UX and UI skills and to work on a project I am passionate about. I will also consider looking for other designers to collaborate with me and help me bring this concept to life.