UI Case study
Fitted is an app to motivate and build exercise routines that suit your level, schedule and interests.
Role
UI Designer
Duration
3 months
Purpose and Context
Fitted is a personal UI project from my UX design certification course from CareerFoundry. The goal was to learn the application design process while focusing on UI.
End User
People who are new or returning to fitness, want to find activities they like, and get into a good routine will be interested in Fitted.
01 Develop
• Intro
• Site Map
• Low Fidelity Prototype
• Mid Fidelity Prototype
• Polished Prototype
02 Deliver
• Style Guides
• UI Elements
• Interactions & Gestures
• Interactive Prototype
• Retrospective
Intro
This app takes the stress out of finding and planning exercise routines. All you have to do is show up.
This responsive web app aims to help discover new exercise strategies by providing routines, guides, interactive examples and info. It is designed to encourage people, who want to exercise and get into an easy routine for physical activities. This means fitting in as little as a 5-minute all the way to 60-minute routines sprinkled throughout your normal, weekly schedule.
01 Develop
Site Map
Low + Mid Fidelity Prototypes
Polished Prototype
1. create a plan
Create a cutom plan based on your bio, goals and schedule.
2. FInd WORKOUTS
Find a work out that is broken down step by step videos and chapters.
3. add to calendar
Schedule daily, short or long workouts or save for later.
4. track progress
Keep on top of your goals by tracking your progress to see results fast
I’m a paragraph. Double click me or click Edit Text, it's easy.
I’m a paragraph. Double click me or click Edit Text, it's easy.
5. track goals
Achieve goals by staying motivated and organized with one schedule for all your workouts.
02 Define
Style Guide
UI Elements
1. Creat a plan
Learnability for Memorability
Key learning tactics for memorability
• Interactions & Gestures
• Progressive Disclosure
• Basic Transitions
• Animation
Sign in
• Tap for page transition.
• Onboarding: To build a workout plan immediately following signing in for the first time - to grasps' user's expectation and app's capabilities.
• Color change: To tell the user that they’ve successfully filled all fields.
Loading Custom Workout Plan
• Animation: To disguise the lag and reassure users their interaction was successful and is being processed.
Find a Workout
• Color Change: To tell the user that they’ve successfully tapped a button.
• Pull left to view more searched content.
Add to Calendar
• Animation: To direct the user’s attention to the call of action.
• Color change: To tell the user that they’ve successfully tapped a button.
Track Progress + Goals
• A Single tap to move between tabs.
• Color change: To tell the user that they’ve successfully tapped a button.
Retrospective
Challenges
The biggest challenge was putting together the “My Activity” page. It is broken by three main tabs: bio, goals and progress. Each page consists of a dashboard with all related features. It was important to illustrate the hierarchy between all these features to ensure the ease of navigation. As you can see above, this page went through the most design iterations to ensure the complexity of it looked simple to the user.
Final Showcase
The best feedback I got, was the ease of finding exercises. To find an exercise, is simply broken down by place and genre, and then there is a more complex filter tool if needed, which can filter out equipment, time, etc. There is also the option to just simply explore if you are curious or looking for something new.
What went well
This was my 3rd project in the CareerFoundry Program, and I could see a much more streamlined process from my initial sketches, all the way through the polished prototype. I had a much better understanding of when and where to use different UI elements which helped me get my ideas to paper much more quickly.
What didn’t go well
I spent a lot of time trying to perfect the “My Activity” page and got caught up on the graphics a bit early on. While I do think this helped me understand size and placement on the page, I think I could of left these a bit more rough and developed them more through at the end.
What can be improved
If this project were to be taken a step further, I would really want to perfect what types of questions would be needed and asked in order to create the most ideal workout plan. From a graphic stand point, I would also want to take the data visualizations a step further and do some more A+B preference testing to see what is the most appealing.