Overview
Fitted is a responsive app designed for people who want to get or back into the habit of exercising. Through a simple UI and a customizable schedule users can match their workout to their busy daily life.
Fitted was created for the busy office worker who works behind a desk all day and wants to fit in some exercise in between but is aimed at everybody that wants to get more physically active.
User Flow
Based on the needs of my persona Rebecca, I designed a general user flow for the project.
● She works in a sedentary jobs and wants to lose weight and get in shape
● As a beginner, she wants to know how to do the exercises properly
● Due to her busy schedule, the exercises need to be short and easy to combine
Wireframe progression
Altough Fitted is a responsive app, I followed to mobile-first approach to establish the minimum amount of content that need for an enjoyable user experience. The first sketches were were drawn on paper and then reiterated in Balsamiq.
I created high-fidelity wireframes based on the colours and elements from the moodboards.
Style Guide
Moodboard
I created two moodboards to highlight different aspects of the needs that Rebecca has.
The first aims at the casual sports person that enjoys exercising for the various health benefits and the communal aspect.
The second moodboard focuses more on exercising for yourself, being competitive and getting in shape.
In the end, I went for the first moodboard as it seems more align with the overall personality of my persona and the general attitude of casual sporter.
Gestures and Prototypes
This animation is used to showcase the different gestures that are being used throughout the app.
Final Design
Lessons learned
My most important take aways came from the creation of the icons and the colour scheme as the focus of this project was on the UI creation.
While working on the icons it became clear to me how important it is to keep the icon design as simple as possible and reduce the amount of visible noise as much as possible.
Through the different iteration of the colour scheme, I learned how to layer the individual colours properly and which effect each layer has on the whole picture.
A link to the complete prototype can be found here.
