fitted
Have fun exercising anytime, anywhere.
overcoming the barriers to exercise
FITTED is a responsive web app that aims to help people get into exercise by holding their hands a bit and providing varying routines, with video instruction, helpful guides, and interactive examples. Secondly, finding routines that fit into your schedule is not easy. The web app is designed to encourage people who want to get into an easy routine for physical activities. This means fitting in as little as a 5-minute routine.
PROJECT: A responsive web application
ROLE: Product & UI/UX Designer
DURATION: 2 Months
TOOLS: Figma, Zeplin, Figjam, Notion, Photoshop
A Glimpse into the solution
Four targeted areas- setting goals and needs; beginner-friendly exercises and training; scheduling workouts; and keeping track of progress while earning awards for milestones.
Medium length section heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Medium length section heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
Medium length section heading goes here
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.
A winning plan
Discover
Market Research
Requirements
Problem & Solution
Define
Persona
User Stories
Uses Task Flow
Ideate
Sketching Ideas
Low-Fidelity Wireframes
Mid-Fidelity Wireframes
Prototype
Style Guide
Interactions
High-Fidelity Prototype
Discover
hustle for that muscle
There is no short supply of quotes, mantras, philosophies, and routines when it comes to exercise and the world of fitness.
What is in short supply- time, convenience, and beginner-friendly workouts and routines.
narrowing it down
- Hard to find beginner-friendly exercises.
- Difficult figuring out how to schedule time to workout with a busy schedule.
- Need help finding exercises that will be the best fit and fun.
- A responsive web app users can access on any device, anytime, anywhere.
- Search and view different routines, complete daily challenges, and keep track of progress to stay motivated.
- Plan ahead and schedule time to exercise by adding sessions to their calendars.
Define
Who I'm designing for
Some initial research was done prior to beginning the design phase. First, I dove into getting a fuller picture of my user persona and what their goals and tasks were desired to achieve.
Goals
- A tool that will help her fit exercise routines into her busy schedule.
- Something that will help her learn how to properly exercise.
- Help finding routines she can enjoy.
Tasks
- Choose between a variety of exercise activities.
- Short exercises she can do multiple times per day in between other activities.
- Help to keep her motivated since her schedule can get chaotic and distracting.
key functionality
After the initial research was completed, user stories were created. I used each of these to create user flows to see the key functionalities I needed to design for.
“As a new user, I want to learn about different exercises, so that I can figure out what is best for me.”
“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 track progression and record what I’ve done, so that I can see my progress over time.”
Ideate
Sketching Out The foundation
Armed with my persona, user stories, and user task flows, it was time to put pen to paper and sketch out some low-fidelity wireframes to build out the skeleton and placement of important features.
Building up new iterations
Staying true to the user persona- keeping the onboarding process quick and meaningful offered the user assurance that this app is something that will help her reach her desired goals.
Scheduling Workouts
Rebecca, (the persona) needs to schedule workouts easily so she can fit them into her schedule.
Checking Progress & Staying Motivated
Rebecca, (the persona) wants to be able to easily check her progress to keep her motivated. Making it a clear primary function will enable her to do this quickly and visually keep an eye on her progress.
Prototype
Style Guide
Putting together the building blocks of the design to create a high-fidelity prototype.
bold - energetic - daring
Making the visual design appear bright and bold will give users a feeling of fun and energy as soon as they see it. Using bright colors and simplistic shapes to create graphics so the design will “pop” and provide delight for users to interact with.
Wordmark Logo
Wordmark logos are to be used only on full-spread branded screens and marketing collateral.
- Above the fold
- Splash page to sign in or create an account
- Sign out confirmation page
- Anything below the fold
- User profiles and general account pages
Lettermark Logo
Lettermark logos are to be used on secondary pages and navigations.
- Push notification alerts
- Top left corner of the desktop and tablet website in the navigation bar
- Top left corner of the mobile hamburger menu
- Above the fold on page
- With large imagery
Roboto
The global font used is Roboto, with varying sizes and weights per usage and device.
brand & System colors
iconography
Use to clearly illustrate actions a user can take of the status of actions completed.
- Follow usage as listed
- Use in any other areas outside of what’s listed
Imagery Usage
Used to preview workout videos and highlighted exercises. The same imagery guidelines apply to landing pages and any marketing collateral.
- Clean background
- Close-up shots of workout moves being done
- Clothing and workout equipment should be brand color or accent colors.
- Images of silhouettes working out i.e. Instagram esthetic with sunset backgrounds
- Zoomed in close up of equipment or workout gear only
- Vanity photos of close up muscle flexes or selfies
Bringing the design to life
Responsive Design
Responsive Design
Behind the scenes
What I learned & takeaways
Infographics
Deliver information much quicker than just numbers alone, and are more visually pleasing.
Situational Usage
Designing for varying types of users; new users, frequent users, infrequent users, users who schedule activities, and users who complete activities in the moment.
Awards
Adding gamification elements and awards that users can earn increases user retention and engagement levels.
On Brand
It's important to ensure that the product (brand) videos and imagery used are cohesive with the design and messaging.
