A responsive web app designed to help people start and maintain a regular exercise routine by offering guidance, routines, interactive examples, and resources.
Project type
Individual project for CareerFoundry
My role
UX & UI Design Research
Tools
Figma
Scroll to view full scope of project
Project Brief
FitQuest is a responsive web application that is designed to assist individuals in selecting an exercise regimen tailored to their needs by offering guidance, routines, interactive demonstrations, and information.
The web application is intended to support individuals looking to establish a consistent physical activity routine, even if just for as little as five minutes.
Objective
Gets users into a routine that suits them
Accessible from anywhere
Provide short exercises to fit in any schedule
Project Requirements
Empathize
Competitive analysis showed that there is a lack of basics and fundamental tips that can help the user develop the correct techniques when engaging in workouts. This helped form key components when designing the contents of an exercise.
The Audience
FitQuest is tailored to those who are new or are returning to fitness, find activities they like, and get into a new routine. In recognition of the challenges associated with finding suitable exercises, this responsive web application is specifically crafted to cater to both newcomers and experienced fitness enthusiasts, catering to individuals of all ages and fitness levels.
Define
When developing FitQuest, a persona was provided with background information to provide valuable insights into the intended usage of the application. This background information was instrumental in guiding the direction of the development process.
User Persona: Rebecca
Rebecca is a software developer who lives her boyfriend and three-year-old daughter. She has a group of colleagues from her software development role, and one of them suggested this tool as a valuable resource to assist her in achieving her objectives.
Goals & Needs
Rebecca aims to lose weight and improve her fitness despite her sedentary job.
She is seeking a tool to fit exercise into her busy schedule, help her learn proper techniques, and find enjoyable routines.
Notable Quotes
“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.”
Motivations
Rebecca wants a tool to keep her motivated because her schedule can be distracting.
Wants to find short exercises that she can do multiple times per day in between other activities
Rebecca wants to be able to find exercises that match her goals of losing weight and getting in shape.
Environment
Rebecca is very tech savvy, as she works on computers every day.
Ideate
Using the persona provided, a definitive outline of the necessary components for the application was established. The project included specific design criteria that had to be met, and provided user stories that served as a roadmap for the design process in order to develop functionalities that would meet the user's goals and needs.
User Flows
As a new user, I want to be shown how the exercises are done so that I know I’m doing them correctly.
Entry Point: Open the application.
Success Criteria: Exercise has been performed.
Upon opening the app, users can sign up or log in. From the dashboard, they can search for or select an exercise. Each exercise includes a guiding video, performance tips, rep info, and muscle group variations.
As a frequent user, I want to be able to earn achievements or rewards, so that I can stay motivated.
Entry Point: Perform an exercise
Success Criteria: Reward has been achieved.
After working out, users will be prompted to take on an additional challenge, with the option to increase reps, duration, or try a variation.
Completion earns users a trophy or achievement.
Declining the challenge still rewards users for starting their workout streak.
As a frequent user, I want to be able to schedule exercises for working out, so that I build positive habits.
Entry Point: Open the application.
Success Criteria: Schedule has been created.
When creating a new schedule, users can set goals such as building strength, losing weight, maintaining health, or building confidence. They will choose workout days, time periods, number of workouts, warmup and cooldown exercises. Favorited workouts can be included. Variations and customization options available. Reminders are provided to help keep up with fitness goals.
Prototype
Mid Fidelity
Performing Exercises and Earning Rewards
After logging into the application, the user will have the option to search for an exercise or view one from the dashboard. Playing the video in the exercise and completing the exercise will result in the user obtaining a reward if certain criteria is met.
A feature allowing users to share their achievements and progress is available, enabling them to showcase their progress to friends and help promote the application.
Creating a Schedule
Users can create a customized exercise schedule by selecting specific days, setting reminders through an alarm system, and choosing exercises, warmups, cooldowns, and variations. The order of the schedule can be manually set, randomized, or defaulted based on chosen exercises. The schedule will then be available for viewing in the "Schedule" tab.
Setting the Mood
Based on our persona, Rebecca, who has a background in software engineering, a moodboard has been developed to establish a distinct change in lighting to separate work from exercise. The incorporation of the color orange is intended to symbolize success, motivation, and well-being. Given Rebecca's busy schedule, it is anticipated that she will prioritize exercising after work. Dark mode will be implemented to reduce eye strain post-workout.
UI Elements and Style Guide
Iterate
After designing the high fidelity prototypes, the next step was to design different breakpoints across different devices to establish navigation and layout patterns. When using the mobile-first design approach, the most essential elements were optimized for smaller screens. Adapting these elements to larger devices resulted in a more improved user experience, as the fluid grid expanded to enhance functionality.
What’s Next?
I intend to conduct user testing with multiple participants to gather feedback and pinpoint areas of improvement. Following testing, a redesign will be undertaken with a focus on enhancing the range of exercises and enhancing user engagement. Researching the integration of AI into the application is necessary to enhance the provision of exercise tips and best practices.