Accessible Workout App
Fitness4All
Project Overview
Competitive Analysis
Story Boarding
Paper Wireframes
Lo-Fi Wireframes
Design System
User Flow Diagram
User Surveys
Personas
User Journey Maps
Usability Study
Hi-Fi Prototype
Responsive Website Development
The Problem
Current fitness apps and sites focus on workouts that require full body movement and control and can make it difficult for those who need accessible workouts to exercise.
The Goal
Develop an accessible resource and experience for in-home workouts for those with limited physical ability or not enough time to make it to the gym.
Roles
UX researcher and UX/UI designer
Duration
10 weeks
February 2023 - April 2023
Programs
Design Process
Understanding the User
User research
Competitive audit
Personas
Empathy map
Journey map
Define user pain points
Problem statement
Ideation
Sketching
User flow chart
Paper wireframes
Lo-Fi mock-up
Usability testing
Usability scale
Refinement
Branding and design system
Hi-fi mock-up
2nd round of usability testing
Understanding the User
Workout App Growth
The number of fitness app users has been increasing, driven by the rise of remote work and the popularity of at-home workouts. In 2020, there was a 45% increase in users due to the pandemic, with an estimated 385 million users in 2021.
Who Uses Workout Apps
Multiple sources indicate that millennials engage with health and fitness apps twice as much as other age groups, thanks to their increased usage of personal smartphones. Users who travel frequently or have busy schedules are more likely to download and use fitness apps for short at-home workouts, allowing them to exercise wherever they are.
Current Workout Apps
Workout apps and sites have experienced significant growth since the start of the pandemic, as people were confined to their homes. Depending on the app, it may cater to advanced or beginner workouts. However, for new users, it can be difficult and risky to find a starting point if they are unaware of their physical limits and abilities. Additionally, most apps lack workouts tailored towards pain management or individuals with disabilities, leaving these users to search for workouts on platforms like YouTube.
“[Apple Fitness+] not well designed to help you find a workout: which Pilates works on your back - yoga balancing poses vs slow flows vs mat work…which mindful cooldown works the part of your body you just worked on …and the rings: the targets are not easy to tailor. I’d love one for steps per day, one for general active or taking care of yourself and one for real training..”
Valade - Apple Store Review
“While I appreciated the way My Fitness Pal put calorie counting front and center, this approach may be off-putting or even harmful to others. Calorie counting can be triggering for some, particularly those dealing with eating disorders.”
James Aitchison - USA Today
“[Alo Moves] filter function is very basic. I wanted to search all the beginner programs and they don’t have a way to do so…When you add a program to your practice it doesn’t keep track of the classes you have done (marking them as completed) so you have to remember which one was the last one you did...”
Pattypinies - Apple Store Review
Meet Gabby
Age: 25
Education: College Graduate Student
Family: Single
Occupation: Teaching Assistant
Gabby, a college student in her final year of her Masters program, leads a busy life with classes and social engagements. She primarily has free time early in the morning and late in the evening, making it challenging to find time to go to the gym or attend classes specifically designed for wheelchair users. She is seeking a workout app that caters to wheelchair users and offers in-home workouts on her own schedule.
“Nothing will limit me from reaching my goals!”
User Pain Points
Non-Accessible Workouts
Current workout sites and apps primarily offer workouts that require a full range of motion, lacking options for individuals with limited mobility.
Limited Paired App & Websites
Many workout apps have informational websites, but there is a lack of fully integrated mobile apps and websites, leading to a disconnected workout experience.
Time Limitations
Users often lack the time or resources to go to a local gym, resulting in a need to find online workouts that fit their schedule.
Confusing Start
In-home workout users, particularly newcomers, may find certain exercise types unfamiliar and potentially dangerous if performed incorrectly.
Ideate
User Flow
The user flow follows similar categories to existing workout apps, including a workout page, profile, and activity. Keeping the user flow familiar to other workout resources allows new users to easily navigate the app and site upon first use. Additional options for videos on pain management and seated workouts are available.
Paper Wireframes
The paper wireframes focused on the four main sections of the app and site: the home screen, workout filters, user's activity, and the workout video page. The overall layout options were based on existing apps to ensure users quickly become familiar with the interface.
App Digital Wireframes
The digital wireframes aimed to build upon and refine the paper sketches. The user journey focused on searching for a specific workout using filters, completing the workout, and finding and completing a cooldown. Users can search for basic workouts and then use filters to narrow down videos based on their specific needs.
Refine
App User Testing
Search Bar
Four users expressed a desire for a search bar. Consideration should be given to keeping a search bar on the home screen or with the workout filters.
App Layout
All users found the navigation easy to understand, rating it 4/5 or 5/5. This indicates that the current navigation and layout should be retained.
Small Button Sizes
Two users encountered issues with navigation on the phone compared to the computer. This insight suggests the need to make interactive elements larger for easy navigation.
Too Much Information
Some users felt that the workout screen could be overwhelming if a video is playing. Simplifying the video screen or providing customization options can address this feedback.
Website User Testing
Above the Fold
All users liked the current information at the top of the home page and the ability to customize it based on their preferences.
Home Page Layout
Three users preferred the ability to scroll down and see all the workout options in addition to having filter and search options at the top.
Workout Video
All users appreciated the option to see upcoming exercise movements. The ability to hide or show this option was well-received, as it allows for a less cluttered workout screen.
Fitness4All Branding
Neutral background colors with bright accents are used to draw the user's attention to the brand throughout the app/site. A sans-serif font was chosen for a modern look.
Home Page
Based on user feedback, the search bar was kept in a central location, and the overall page layout remained the same. In the app, changes were made to the navigation bar to address issues with clicking on the correct tab in the low-fi wireframe.
Workout Filters
The filters remained the same as in the low-fi wireframes. Options for workout types, duration, equipment, and skill level are prioritized as common filters in workout apps.
Workout Preview
Users appreciated the choice between written instructions or videos and the ability to preview exercises. A workout summary and a clear "start workout" button were positioned at the top of the preview page.
Workout Review
The workout review page showcases completed exercises in the video along with the user's current activity. Based on user feedback, two progress indicators were added: overall workout progress and progress within the specific workout.
Fitness4all Mobile App
Clink the link to the high fidelity prototype of the Fitness4All app or scan the QR code to access it on your phone!
Fitness4All Website
Clink the link to the high fidelity prototype of the Fitness4All app or scan the QR code to access it on your phone!
Takeaways
“I like that it has a video, a written instruction, and a preview of the movements so you know exactly what you’re getting and also can still use it if you’re not in a situation where you can play a video or listen to audio and I like that it goes from workouts to cool down workouts and shows overall activity”
“I really like the over all idea and especially the main workout video screen of the app. As a person who has never found any interest in working out, I believe that the well laid out workout video screen would encourage me to finally give it a go!”
Impact
This project provided an opportunity to focus on branding to create a cohesive look for the app and site beyond just text and color. I also gained a deeper understanding of various features and plugins within Figma and how they can be used in conjunction with Adobe software.
What was Learned
Continued Testing
Conduct a round of usability testing with the final prototype for both the mobile and desktop site.
Next Steps
Tablet and Mobile Site
Develop pages for the tablet version of the website in addition to the final desktop site to ensure a fully responsive site experience.
Finalize Branding
Finalize branding guidelines and design systems for both dark and light mode components to ensure efficient and cohesive designs in the future.