Fitted

Fitted is a workout app that allows individuals with a busy life to stay fit and active in their own homes. The app will provide workout videos, exercise instructions, challenges, sessions/courses and the ability to schedule your own workouts.

2023

Tools:

Figma

Creative Cloud (Adobe)

Subject Overview

Who?

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.

When?

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

Why?

To become healthy and enjoy the associated benefits such as better mood, weight management, reduced risks of illness or simply learning something new. Users can also save time by fitting exercise into daily routines, such as walking or cycling to work or school. Lastly Fitted aims to provide a fun experience for users to ensure consistency and motivation to keep going.

What?

A responsive web app called Fitted will allow users to 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.

Where?

Users can use Fitted in the comfort of their own home or they can also view exercises and routines while they are at their gym. Fitted will have a variety of home and gym workouts.

Problem Statement

How can we design a solution that provides users and fitness enthusiasts a way to easily find workout routines tailored to their fitness level, and the ability to find fitness routines that can easily fit into their busy schedules?

My Solution

A responsive web app called Fitted that will provide users with workout videos, exercise instructions, challenges, sessions/courses and the ability to schedule their own workout on any device ensuring that they stay motivated and consistant.

My Role

UI Designer

This was a UI design-based project and I was the only UI designer for it. I created user flows, mood boards, layouts and grids, UI elements, and designs for different breakpoints.

I also designed wireframes and low to high-fidelity prototypes along with a style guide, mood boards, and mockups.

Created a user persona and user flows that tell our user's stories:

User Personas

User Stories

Asa...

New user, I want to be shown how the exercises are done, so that I know I’m doing them correctly.

Frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.

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

Frequent user, I want to track progression and record what I’ve done so that I can see my progress over time.

Frequent user, I want to complete daily challenges, so that I can have an additional way to stay motivated.

Fitted Navigation:

With refined user stories and user flows, it was now time to work on some Wireframes & Prototypes

Paper Wireframes:

758425A0-FBBB-4F35-B6BD-9A144DD9A3D6_1_201_a 1.png

A128E6CD-61A7-4EDC-ACB0-EBF0EEA5AF8D_1_201_a 1.png

D2AAE1A6-8D5B-4021-AA2E-76EC27EC522B_1_201_a 1.png

855E6BCA-33AD-4D09-ACED-E2E4EFF00AF8_1_105_c 1.png

3CE3F3F5-E8BE-40FF-B848-ADF227C72FCC_1_105_c 1.png

B8BF0070-C0C9-42E8-82C9-B8D9C9A2ED61_1_105_c 1.png

73B25004-5306-4628-B645-36259F21E903_1_201_a 1.png

Low Fidelity Wireframes

Mid-Fidelity Prototype

Designing for different breakpoints

I created mood boards to gather ideas
and set the tone for the project

I decided on option 1:

I decided to move forward with option 1 because Fitted is for individuals who want to feel motivated enough to work out. They need an app that will lead them along their workout routine providing individuals with workouts that they can fit into their busy daily lives. Fitted will provide routines, guides, interactive examples, and information on how to maintain a healthy lifestyle. Option 1 will provide users with the security and guidance that they need to stay consistent in their fitness journey. The fonts and images used will ensure that individuals can see themselves succeed and the dark mode allows for more focus on the content.