Zareen Johnson's profile

FitAssist UI/UX Case Study

FitAssist
A CASE STUDY

Brief: 
This project was created for the Adobe Collab Creative Jam at Tyler School of Art in the Advanced Graphic Design course. The original design team for concept and wireframing consisted of Zareen Johnson, Allie Osipov, and Annon Merritt. The final prototype and this case study were designed by Zareen Johnson.

Visually impaired and blind people are more likely to struggle with getting regular exercise and the many health effects that lack of exercise causes. Adobe’s challenge for us was to design a health and fitness tracking app for the visually impaired that did the following:
       • Non-visual feedback for the primary user
       • A mobile app for caregivers focused on setup and tracking of metrics
       • Attachment to and removal from the body with intuitive orientation
       • Other features beneficial to those with sight impairment, such as navigation, awareness, alerts, etc.
Our Approach: 
We decided we wanted to find a way to make gyms more accessible. Because gyms are controlled environments, they could be an easier place for visually impaired people to start. Our app would walk users through circuit training at the gym utilizing audio through headphones and connect with a smart watch like the Apple Watch to collect data.

Our first step was to start coming up with what the goals of our app would be. What would be the main benefits we wanted to provide to users? We also did some research into different types of technology, like screen readers, RFID chips, and beacon locators. We then synthesized these ideas into the following goals for our app and how we planned to achieve them:
       • provide premade workouts
       • Help navigate gym space using beacon locator technology 
       • Teach users proper use and form of gym equipment
       • Allow adjustment of cardio machine settings through screen reader
       • Collect daily stats through connected Apple Watch and let you see long-term progress
User Persona: 
In order to start imagining how someone would use our app, we started to define who that someone was. We came up with the following user:
We also came up with some more nuanced qualities that our users would have. Our user would have the technological ability to use an iPhone with voice control, the screenreader, and Siri, as well as other accessibility features. Their previous gym experiences might include high school gym classes and some more recent group fitness classes. Their goals would include going to the gym independently, being able to do workouts without supervision, learning to use new machines, tracking progress and see improvement, and adding physical activity into weekly routine. The frustrations our users might have that we want to address would be that machines can be dangerous, extra challenges make motivation to exercise harder, a fear of looking foolish, and the need for a controlled environment to let their guard down while exercising/moving quickly.

User flow: 
The next step was to come up with our user flow. To give ourselves different options to choose from, we each wrote our own user flow, then compared and chose the best parts from each. We separated the user flow into parts and each of us worked on making wireframes for one section.

Wireframes: 
To build our wireframes, we first drew out each screen of our user flow on index cards so that we could reorder them if necessary. We then moved on to low-fidelity wireframes made in Xd (see below). While these were low-fidelity, some of the design elements we were thinking about to make our app accessible to the visually impaired included using high contrast text, white text on black where possible, larger font size, no italics or busy pages, and clear instructions for screen reader.
Feedback: 
We presented our low fidelity wireframe to Adobe’s judges who gave us feedback. They asked us to narrow in on the purpose of the app, to distinguish which parts would be most helpful to specifically the visually impaired, and to examine what would be the best context for the use of our app. We were also encouraged to push the use of audio feedback beyond just the screen reader. 

Prototyping:
After getting feedback from the judges, it was time to take the project in my own direction. I had two main goals during this part of the process. One was to skin the app: I wanted it to look clean and finished while still maintaining high legibility for the visually impaired. The second was to make sure the flow of the app was clear to the user (for example, indicating how far through the onboarding stage the user would be or adding “continue” buttons to let users change their selections before moving on). 

I also designed a simple logo for the app during the skinning stage, featuring the initials of the app name with an eye in the hook of the “f,” referencing who the app would be assisting.
Try the prototype below:
Expansion Possibilities:
If there was the opportunity to continue working on this project, I would want to expand to a series of gyms that provide accessibility to differently abled people in tandem with the app. I would want to further explore audio as a way of quickly expressing information as well as a way to provide directions around a controlled environment.
FitAssist UI/UX Case Study
Published:

FitAssist UI/UX Case Study

This case study was created based on a project made for the Adobe Collab Creative Jam at Tyler School of Art at Temple University. Art Directed b Read More

Published: