A fitness web app that fits your schedule.
Overview
Fitted allows anyone to find exercise routines that fit their level and schedule. A simple plan builder helps users achieve their goals and ease into a workout routine they will stick with.
This was a student project completed under CareerFoundry’s UI Specialization course.
The Challenge
Design a responsive fitness web app with special focus paid to the user interface that helps motivate people into an exercise routine that suits their level, schedule, and interests.
I was responsible for user flows, wireframes, and prototypes as well as branding guidelines including typography, color, logo design, and a style guide.
My Role 👨💻
UI Design
Color & Typography
Prototyping
Logo Design & Style Guide
Timeline
Approximately 1.5 months, part-time.
Problem
How can we build a workout routine that will help us get fit when we have a packed schedule with little flexibility?
Groundwork
Let’s Meet Cory 🤸♀️
Fitted's Persona
Cory is a software developer with a packed schedule. She wants to lose weight and needs a simple tool to find exercise routines that will fit into her busy life. She’s a fitness beginner so she wants something that will help her exercise properly.
Strong and Bold or Open and Inviting?
Cory might be intimidated by a design that is overly bold and reflects activities that she is just not ready for. 🤔
Setting a mood that is light, open, airy, but still energetic will help keep users like Cory, who are new to fitness, engaged and interested instead of feeling overwhelmed and pressured.
Design
Could Purple Work for Fitness?
Purple has everything we’re looking for:
It’s energetic.
It represents something to attain, to strive for.
It denotes strength.
It stands out in the world of fitness apps.
The right purple, however, was elusive. Version 1 fit the brief for light, open, and airy, but didn’t feel strong and energetic.
Version 2 added the richness and presence that was sorely needed.
Early Iterations
Final Iterations
Playful Animations
Simple animations turn standard interactions into small celebrations that add joy everyday tasks.
Accept Challenge 🏅
Button animation with a burst confirmation.
Achievement Completed 🙌
A bit more fanfare for celebrating big moments.
Style Guide
A few highlights from the Fitted Style Guide. View the full guide in Figma.
A Fitness App That Fits You 🚴
Cory needed a tool that would help her get in shape, keep her motivated, and fit into her schedule.
Fitted offers a quick-setup plan to get the ball rolling.
She can search and filter workouts and save them to build custom routines.
Scheduling reminders will help her stick to her commitment.
She can challenge herself and her friends to stay motivated.
Final Thoughts
Choosing purple proved to be a big challenge. 😅 I almost gave up on it completely, but I’m glad I didn’t. Purple helps Fitted stand out in a crowded field while also letting the app’s content remain front and center.
In the beginning I found that I kept trying to make the first color palette work, but without success. Something was trying to tell me it wasn’t working. Next time I’ll listen to that voice and ask for a second opinion earlier in the process.