Fitted will help you find an exercise routine based on your level. The app provides tailored workouts that fit in your schedule and are designed to keep you motivated to reach your personal goals. Not only Fitted helps you get fitter, it also helps you get healthier by providing advice and information about nutrition.
Project brief
Objective:
Motivate people into an exercise routine that suits their level, schedule and interests.
Why?
Motivate people into an exercise routine that suits their level, schedule and interests.
Why?
To become healthy and enjoy the associated benefits (better mood, weight management, reduce risks of illness, learning something new).
To save time by fitting exercise into daily routines, such as walking or cycling to work or
school.
Exercise should be fun and suited to each user.
Context:
Finding exercise routines for your level can be difficult, especially if you want to try something new. This responsive web app aims to help people get into an exercise of their choice by holding their hand a bit and providing routines, guides, interactive examples, and info.
Finding routines that fit into your schedule is not easy. The web app is designed to encourage people who want to exercise get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
Research & User Flow
“I love the thought of having something that could really work with my schedule. Being as busy as I am makes it tough to exercise otherwise.”
Rebecca, 26, Software Developer
Low-Fidelity Wireframes
I started creating my first low-fidelity wireframes for my responsive web app's mobile screens. It allowed me to design some of the basic details and layouts for each of the screens represented in the user flow diagram.
Mid-Fidelity Wireframes
I have applied the principles of good spacing and visual hierarchy to organise my content in a way that best communicates my design’s key messages.
Mood Boards
I have developed two different visual directions for my responsive web app by creating two different mood boards.
After carefully going through the information about my persona, I have chosen the Mood Board 1, on the left.
It communicates better the idea for the users to be able to choose the activities they like, and get into a routine to get fitter and healthier.
These images are more appropriate as they create a refreshing and friendly feeling to the users.
The colours used are brighter and the images more engaging for new and returning users. It shows accessible levels for all, while the mood board 2, on the right, shows a more intense workout routine with content more oriented for experienced users.
High-Fidelity Wireframes
Style Guide
As part of this project, I created a visual style guide of my product.
This was an opportunity for me to document all of the visual and UI elements of my app so that people who work on the brand have instructions that they can follow to ensure a consistent visual experience on all brand projects.
Final mockups
