A responsive web app with fitness routines for busy people.

Context

It's always difficult getting into new routines. Fitness and exercise can be a particularly challenging hurdle to overcome.

Common hurdles are: not having enough time, busy with work, not being able to keep up physically, or this is boring.

Fitted is a web app any user can pick up, find an exercise they love, and fit into their daily schedule.

This platform encourages users to start with exercises of any level, fitting in as little as a 5-minute routine into their schedules. It is welcoming, motivating, and holds users accountable to their own fitness goals.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4dc340a3-5743-4b36-b5d9-e02213f63c38/iPhone-Xs-Mockup_Sign-Up.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8ad9209-cce6-4df0-bbe2-ebdebadf4ba6/iPhone-Xs-Mockup_Profile.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/79a9be6d-2cfc-426a-8416-ee309ca1f28b/iPhone-Xs-Mockup_Add-to-Calendar.png

<aside> 💡 This project was created as part of the UI specialization in CareerFoundry's UX Immersion course.

</aside>

Challenge

Motivate people into an exercise routine that suits their level, schedule, and interests.

Solution

A tool that teaches users short exercise routines that can be integrated into their busy schedules, leading to healthier lifestyles.

Design Process

1. Understand

For this project, I received a user persona, user stories, and some design requirements to reference.

After trying to empathize with and understand the user, I focused on mapping out the features the app would have.

I created user flows for satisfying user needs and goals.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e6b77923-a581-46d6-b1c9-5222d4b7f934/IMG_1909.jpg

2. Design

Explore Styles

I wanted to create two mood boards to explore possible visual styles for the Fitted branding. One design requirement in the brief was that the colors orange and black be used.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/80ced6a7-0984-412c-ad05-27fbdfd397c9/1.6.png

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f23fe770-b8a3-4ccf-9ded-631484ed2494/1.62.png

I picked the left moodboard because it felt more easygoing, informative and fun because of its light and bright color scheme. It conveys friendliness and is welcoming, which will motivate people who are new or returning to fitness. This board is inspired by the sun. Incorporating oranges, yellows, and white, it evokes brightness and energy. Black will still be used, but for text only.

Visualize

Next, I sketched each screen in the user flow to get a sense of what it would look like. After finalizing the sketches, I started working on low-fidelity digital wireframes.