Workouts that fit your schedule
Role
Sole UI designer, based on previously done UX research.
Timeline
Tools
2 months
Pen & paper, Figma, Usability Hub, Adobe Illustrator CC, AdobePhotoshop CC
Overview
Fitted is a responsive web app that creates custom workout programs based off of users needs saving people time on where to start, and keep them motivated progress tracking, achievements and challenges.
Challenge
Motivate people into an exercise routine that suits their level, schedule, and interests.
-
Finding exercise routines for a specific level can be difficult
-
People who do not exercise often need guidance in how to exercise properly
-
Fitting exercises into a busy schedule is challenging
-
Encourage people who want to exercise get into an easy routine for physical activities
Process
1
Define
Persona
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
Workouts that are fun and personalized to each user
Provide workout routines that fit into busy schedule
Provide content on how to properly exercise
Stay motivated though earning badges and challenges
Task Analysis & User flows
On-boarding
So save Rebecca time looking through different routines unsure what is right for her, I wanted to take the opportunity to get information needed for Fitted to curate the best program for Rebecca though the onboarding process.
I take each task and map out the steps and decisions required to accomplish a goal to determine the flow.
ummm I am not sure where to start...
Challenge: Finding routines right for you
Solution: Personalized workout programs
Fitted: Road map
Userflow
2
Ideate
Wire-framing
Low to High Fidelity Screens
Each phase of wire-framing required improvements to layout, text, icons and prioritized content to provide a more seamless experience for Rebecca.
Home Dashboard
Calendar
Workout
Profile
3
Design
Mood boards
To start the direction, I created 2 mood boards and used colors to represent the keywords fun, easy and informative. I wanted a positive yet soothing energy to help users who need extra encouragement while reducing stress.
I then conducting A/B testing on the mood boards with 36 responses (ages 18-40) to see what their preference was
A/B Testing Results
Although it was not significant to determine whether these colors were better, it helped me decide the direction.
56% preferred Mood board 2 Cool Tangerine
Style Guide
Logo
Primary
Primary
Logo Bug
Brand Colors
Use the fitted complimentary brand colors defined below. Colors used must convey warmth, fun and a sense of ease.
WCAG contrast ratio accessibility standards were applied.
Primary
Secondary
Secondary
Secondary
Nuetrals
Typography
Iconography
Actionable Icons
Informational Icons
Responsive
Grid System Breakpoints
Tablet / 8 Column
Desktop / 12 Column
Mobile / 4 Column
4
Prototype
Feature Interactions
Keeping Rebecca’s goals in mind, we will walk through the design solution for each project goal.
On-boarding
Challenge
Finding exercise routines for a specific level can be difficult and time consuming for new users.
Solution
Programs automatically created based on data collected during Sign up and on-boarding. This saves Rebecca time looking for workouts, and starts her out at the right level and pace.
Program Tracker
Challenge
Finding exercise routines for a specific level can be difficult and time consuming for new users.
Solution
Once in a program you can resume your next workout where you left off, from your dashboard with out having to search and waste time.
Search and Filter
Challenge
Finding exercise routines for a specific level can be difficult and time consuming for new users.
Solution
Search and filter content based on workout length, type, focus and difficulty. Mark a workout as a favorite to come back to easily find it later.
Schedule
Challenge
Fitting exercises into a busy schedule is challenging.
Solution
Schedule 10 min workouts and challenges into your calendar, set frequency and reminders to help you stay on track.
Progress
Challenge
It is hard to stay motivated to workout.
Solution
Progress trackers can remind you how far you have come and how much you have accomplished. Your friends can also keep you motivated while you complete challenges with them.
Reflections
For UI, dedicating enough time at the beginning of a project to organize and build components effectively cans save you tons of time down the road.
Atomic design methodology is a game changer saving a lot of time and stress for designers.
Atomic design methodology is a game changer saving a lot of time and stress for designers.
