Summary

I was tasked with designing a fitness coaching tool for blind users.

Objective

Create an accessible mobile app that equips blind adults with tools to improve and maintain their physical fitness.

Role

I was Lead UX Designer and Researcher and executed this project on my own.

Tools

Figma
Jamboard
VoiceOver

Understanding our User

The Challenge

After researching the topic, I learned adults with blindness show a lower level of physical activity and greater deterioration of their health than non visually impaired adults.

Because adults are 4x more likely to be impaired in performing activities of daily living, regular physical activity has been found to improve functional independence, prevent the risk of falls, and result in a better quality of life.*

I reached out to my network and asked people who with low vision and blindness to share with me their challenges with managing their fitness.

*Alcaraz-Rodríguez, V., Medina-Rebollo, D., Muñoz-Llerena, A., & Fernández-Gavira, J. (2022). Influence of Physical Activity and Sport on the Inclusion of People with Visual Impairment: A Systematic Review. International Journal of Environmental Research and Public Health, 19(1). https://doi.org/10.3390/ijerph19010443

Pain Points uncovered included:

Can't Find the Right Workout

Curating the right workout can require a lot of time, interest or knowledge. Most people don’t know what to do and do not want to invest a lot of time.

Physical Limitation

People have varied physical abilities. For example, a blind person may feel their eyes are affected while doing an exercise.

Unclear Instruction

Guidance from instructors can make all the difference. However, without visual cues, blind adults may have a greater challenge in accessing instructions for exercises.

Inaccessibility

Apps are not guaranteed to be designed with accessibility in mind, and screen reader users will be left feeling frustrated and unable to use the app.

I created a persona to serve as a representation of all the common user needs, goals, thoughts, feelings, pain points, and actions that I derived from my user research.

Persona

Competitive Audit

I researched direct and indirect competitors’ products to understand which aspect of our competitor's designs is already working for users.

Libraries of guided content, and a way to log workouts complete are features that competitors executed well and was a source of inspiration.

A potential differentiator found was a feature that tracks goals within the app.

Starting the Design

Paper Wireframes

I sketched out each screen of the app on paper first to get a quick idea of the design and flow of the app.

Digital Wireframes

And then took the paper wireframes as inspiration for the digital wireframes in Figma.

Classes Library

is where users can browse workout classes.

I included elements that would help users who have an idea of their desired workout find what they're looking for more quickly (ie. search bar and filtering by workout category, time length, or intensity level).

Custom Workouts

users curate custom workouts by queuing short audio explanations of exercises and saving them as custom workouts in their library.

Low Fidelity Prototype

Focusing on defining layouts and interactions for my users to find and complete a workout class, I created a low-fidelity prototype in Figma.

I ensured each screen followed the same semantic structure as an app coded with accessibility practices so that screen readers could navigate the prototype as it is designed to.

Focusing on defining layouts and interactions for my users to find and complete a workout class, I created a low-fidelity prototype in Figma.

Research

I asked participants that rely on screen readers to complete 3 tasks on their own.

1. To start a Beginner's boxing class.

2. Create a custom workout and start "My 20 Minute Ab Workout".

3. Find "My Goals".

Findings from the study gave insight into where our design caused confusion or did not include features users desired.

I asked participants that rely on screen readers to complete 3 tasks on their own.

1. To start a Beginner's boxing class.

2. Create a custom workout and start "My 20 Minute Ab Workout".

3. Find "My Goals".

Findings from the study gave insight into where our design caused confusion or did not include features users desired.

Reduce Unnecessary Content

A lot of text can be frustrating to sift through, especially for screen reader users. Participants emphasized the home and class needing improvement.

Simplify Custom Workouts:

The Custom section caused more confusion for users and they did not understand “custom” as easily as the classes.

Music

Users wanted to have a choice to listen to music in the background of the classes.

Refining the Designs

Reduce Content

Since the classes page and homepage had a lot of content, I condensed the filter section to a filter button, that opens an overlay when clicked.

Before usability classes screen has 3 filters to search for classes. After the usability study, the filter section is replaced with a button labeled "Filter" that opens to an overlay that can narrow a classes search.

Before usability study, mobile screen had a customize button at the bottom of the screen, but after the usability study that custom button is removed and replaced with a floating action button to create a custom class when on the Classes tab.

Simplify Custom Workouts

Since users did not understand the meaning of the custom tab, we placed a floating action button to create custom workouts from the classes page.

Music

Participants expressed a desire to have this feature to customize the class experience.

Before Usability Study, the Class screen did not have a music feature but in the second version after the usability study there is a button labeled music that opens an overlay to customize the music.

After updating the low-fidelity prototype, it was time to make the product more high-fidelity and close to the real users’ experience of the product.

I chose the color palette, iconography, typography, and elements, ensuring that color contrast and size meets WCAG standards to ensure accessibility and legibility for most users.

After updating the low-fidelity prototype, it was time to make the product more high-fidelity and close to the real users’ experience of the product.

I chose the color palette, iconography, typography, and elements, ensuring that color contrast and size meets WCAG standards to ensure accessibility and legibility for most users.

Mockups

4 Screens with the high fidelity design of the mobile app

View Prototype

Takeaways

Empathize

As this project was focused on users who are blind, it was critical to practice empathy throughout the entire design process.

Prepare for Productive Usability Tests

I learned that relying on user feedback is important, but also coming prepared and organized to ask them meaningful questions honors their time and contribution to your work.

Test Prototypes with Screen Readers

I also learned how to create accessible prototypes on Figma and test using screen readers like VoiceOver.

More usability testing with a larger group of users to determine whether we address the pain points of our users.
Build out goal setting and reminders on the app.
Test the likeability and legibility of the app colors, text and buttons with more low vision users.

More usability testing with a larger group of users to determine whether we address the pain points of our users.
Build out goal setting and reminders on the app.
Test the likeability and legibility of the app colors, text and buttons with more low vision users.

More usability testing with a larger group of users to determine whether we address the pain points of our users.
Build out goal setting and reminders on the app.
Test the likeability and legibility of the app colors, text and buttons with more low vision users.

Move Fitness App

Move Fitness App

Summary

Objective

Role

Tools

Understanding our User

Understanding our User

The Challenge