FITTED RESPONSIVE WEB APP
WORKOUT IN LESS THAN 5 MINUTES
Fitted is a responsive Fitness Web Application that provides personalized fitness plans and motivates people to get into an exercise routine that fits their schedule, fitness level and interests.
PROJECT OVERVIEW
Get fit on your schedule
This project was focused on the process of designing the user interface of a responsive web application. With user research provided, I primarily focused on the UI design including wireframes, layout, color, visual hierarchy, and UI design patterns.
The goal was to create a responsive web application to help people find the right exercises for them and stay motivated to get into a routine. The application provides users with guides, routines, video lessons, tutorials and rewards.
The Challenge
Design a responsive web application that helps people find the right exercises that fit their needs and help keep them motivated.
The Outcome
Fitted is designed to motivate users to find exercise routines that are tailored to their needs. Users can schedule workouts and complete a workout in as little as 5 minutes.
Project Scope
Responsive mobile app
My Role
UI/UX designer
Tools
Adobe XD, Adobe Photoshop
Duration
June 2021 - July 2021
THE PROCESS
USER PERSONA
As mentioned above the project brief included a user persona, but as a reminder for who I was designing for I created a one page user persona of ‘Rebecca’ to refer back to when I was designing different features.
USER FLOW
User flows were created to understand how the user would use Fitted to meet their needs. To do this, the following user stories were identified below:
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 be able to earn achievements or rewards, so that I can stay motivated.
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.
As a frequent user, I want to be able to share routines with my friends who may also be interested, so that I can encourage them to become healthier.
From these user stories, the following user flows were created to identify the best way for users to navigate the platform:
WIREFRAMES
With a couple of user flows created, I then began sketching wireframes of different screen layouts. Being that this project was a responsive mobile app, I started by sketching mobile screens before moving onto different breakpoints for tablet and desktop versions.
Below are sketches of different screens and the evolution of the dashboard:
Evolution of the dashboard
From sketch to High Fidelity
As shown in the images above you can see from my initial sketch to the final screen I made changes each time after getting feedback. From my initial sketch to the final design, I decided it was best to create three sections from the dashboard - overview, charts, and achievements. This allowed for more content and space to give the screens more breathing room.
MOODBOARD
Criteria:
Energetic
Modern
Sporty
Motivating
I created two moldboards before selecting the one below because I feel it best relates to the criteria listed in the project brief in that it gives the feeling of energy, modern, sporty and motivating. I also made sure to include the colors listed in the brief of orange and black.
I wanted to give the feeling that ‘Fitted’ is for individuals that are serious about exercising and need a little inspiration and motivation to keep going to get fit. The complimentary colors of white and grey offer a good balance between the orange and black.
MOCKUPS
FINAL THOUGHTS
This project allowed me to really hone in on my creative skills and learn new tools. This project was fun because I could relate to users that like to see their progress when they workout. I’m also happy with the final design and the fact that I was able to create a logo for the design! I gained a lot of insights on the importance of visual design and applying those visuals for different types of users. Going forward I would probably do more user testing and expand some of the features, but overall I learned a lot and had fun creating this project. Thanks for visiting!