Have fun exercising anytime, anywhere.
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
Four targeted areas- setting goals and needs; beginner-friendly exercises and training; scheduling workouts; and keeping track of progress while earning awards for milestones.
Users can set goals and what they need extra help with to eliminate any fear of starting.
Never feel lost about where to start or what to do. Learn about different exercises to find the right fit for you.
Users can easily schedule workouts for the best day and time. Even squeezing in micro-exercises throughout the day!
Stay motivated by seeing your progress and collecting awards for exercise milestones and achievements
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.
Market ResearchRequirementsProblem & Solution
PersonaUser StoriesUses Task Flow
Sketching IdeasLow-Fidelity WireframesMid-Fidelity Wireframes
Style GuideInteractionsHigh-Fidelity Prototype
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.
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.
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.”
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.
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.
Rebecca, (the persona) needs to schedule workouts easily so she can fit them into her schedule.
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.
Putting together the building blocks of the design to create a high-fidelity prototype.
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 logos are to be used only on full-spread branded screens and marketing collateral.
Lettermark logos are to be used on secondary pages and navigations.
The global font used is Roboto, with varying sizes and weights per usage and device.
Use to clearly illustrate actions a user can take of the status of actions completed.
Used to preview workout videos and highlighted exercises. The same imagery guidelines apply to landing pages and any marketing collateral.
Deliver information much quicker than just numbers alone, and are more visually pleasing.
Designing for varying types of users; new users, frequent users, infrequent users, users who schedule activities, and users who complete activities in the moment.
Adding gamification elements and awards that users can earn increases user retention and engagement levels.
It's important to ensure that the product (brand) videos and imagery used are cohesive with the design and messaging.
