Fitted- UI Case Study
Exercise With Ease
Fitted is a fitness app designed to assist people in developing a customized fitness routine by finding workouts and exercises they love, and fitting them into their daily schedule.
Project Overview
Our Product
This responsive web app aims to help people get into an exercise routine of their choice by holding their hand a bit and providing routines, guides, interactive examples, and information. Fitted is designed to encourage people who want to exercise to get into a routine that fits their schedule
Objective
Motivate people into an exercise routine that suits their level, schedule, and interests.
The Design Process
2. Empathize
To better understand the needs, motivations, and pain points of the users, I created a proto persona based on the information that was provided in the design brief.
3. Ideate
Based on the user stories in the project brief, I created a user flow diagram to visualize the pages that must be included in order for the users to achieve their goals.
4. Design & Prototype
Using the proto persona and the user flow, I began sketching the main functionalities of the app with pen and paper.
Next, I began adding details such as basic UI elements and text to better represent the funtion of the app and created mid fidelity wireframes.
Task Analysis for Scheduling an Exercise
Mid Fidelity Responsive Breakpoints
Transformation into High Fidelity
Step 1: Define the brand Identity
I created a mood board to draw inspiration for the vision and identity I wanted to convey in Fitted.
Step 2: Refine the UI Elements
In this step, I added color and images to the elements and created a visual style guide.
Style Guide
5. The Finished Product
6. Fitted In Use
Conclusion
After completing my UX Design course, this project was the perfect opportunity to learn basic visual and UI principles that I will carry with me into my UX career and will allow me to become a well-rounded UX designer.
With only generic research and information provided in the project brief, I was able to apply both UX and UI principles and strived to build a complete product that is functional, usable, and aesthetically pleasing.
Looking back on it, I would have spend more time on the initial research, especially user interviews and a competative analysis, to truly have a greater understanding of the overall problem and possible solutions. Going into this project, I was eager to learn more about visual design and knew I would be walking away with tools to be able to put to use in the future, but i didnt realize i would walk away with a new approach towards funtionality and usability. Having a better understanding of interactions and animations, as well as learning to not soley rely on color to convey functionality are a few examples that I’ll be taking with me.
Next Steps
Expand funtionality for TV and Watch use