Promenade — A Fitness App for the Visually Impaired

Promenade is a fitness app and band prototype built specifically for people with low vision and the visually impaired. The app is geared towards people who are inexperienced with exercise to have a hands-off workout experience.

Art Direction

Bryan Satalino, Scott Laserow

Categories

Interactive, Research

Creative Timeframe

January to April, 2019 (Versions 1 and 2)
January to February, 2020 (Version 3)

Team Members

Jess Atwell, Teejay Moore, Ivy Shi

Problem

In partnership with Adobe, our team was challenged to make a fitness app for the visually impaired. Their definition included those who are fully blind, have some vision or have other impairments such as tunnel vision.

Justin Fraga of Adobe presented our brief, informing us that as a group, visually impaired people tend to be less active, and are affected disproportionately “by obesity and other health issues related to sedentariness”. Usual visual aids such as a guide dog or human trainer are options but are often expensive and complicated.

Research

Our brief included a link to a post on Sandy’s View, a weekly editorial published by the Chicago Lighthouse, about the relationship between the visually impaired and exercise. The editorial, citing a CDC study, states that only about 50% of people with physical disabilities choose to exercise. The other 50% of that group reported chronic illnesses like diabetes, heart disease, and stroke. Some common anxieties of visually impaired people regarding exercise, mirror those that were gone over in the brief, including ones such as lack of transportation, motivation, information, and fear of getting hurt. The editorial expresses confidence that most activities can be performed by people with visual impairments with slight changes to the individual’s condition. There is also a wide array of sports made specifically for people with visual impairments, such as goal ball and beep baseball.

Next, we studied specific technology-based standards to apply to our project. Our main source for this was the Inside Design article on how to design mobile app experiences for the visually impaired. The primary points were making sure that there was a good contrast balance for app elements, not relying on color to convey a message, enabling a dark mode, and having support for dynamic type.

We moved on to learn from the people we would be our audience. We first watched videos by Tommy Edison, a YouTube film and media critic who was born blind. He has a series of videos of what it’s like to be blind, the differences and similarities of his experiences compared to sighted people’s, and even comparisons with other people who have low vision or became blind later in life. We specifically studied his video about how the built-in screen reader works on an Apple cell phone to get a sense of how our users would interact with our app. Finally, we had the opportunity to speak with Julie Ann Lieberman, the program director of Temple University’s Institute on Disabilities. She went into depth on the tech available to people with visual impairments both in exercise and day-to-day life. ​​​​​​​

A picture of Brandon Rudolph (left), me (center), and Julie Ann (right).

She is familiar with a wide swath of technologies and is very enthusiastic about developing systems. In detail, she went over the disability support within current-generation Apple Products and told us about several resources outside of Apple. AppleVis is a community page for blind and low-vision people with Apple products to share information and help each other with their tech. For non-Apple users, there is Inclusive Android. She went over several more that were interesting, but ultimately unrelated to how my team interpreted the brief. 

Julie Ann gave us some extremely helpful tips and tricks to make our prototypes work the best for our target audience. Above all, she urged us to keep it simple and not overly complicated. She stressed the importance of high contrast and told us explicitly that gradients, patterns, and anything that could clutter the screen and make it difficult to navigate. It is important, she said, to either have the app be compatible completely with the device’s built in screen reader or read the information on the screen to the user. She also stressed the importance of tight back-end labeling, making sure every button, image and important elements of the app are labeled in a way that is as detailed and specific as possible. Keeping the layout logical, such as having the menu at the top right, is a must, as well as making sure that everything stays in the same place from update to update. Tutorials are a good tool but need to be optional to facilitate self-discovery. Finally, vibration and sound are excellent user feedback as they require no screen reader.

 

Planning

The first step in planning the app is choosing a suitable audience. In our research, we noticed that most commercially available fitness tech is not very first-timer friendly. Most of the tech we studied did not explain exercises, or even track metrics specific to the exercise being performed. Additionally, the tech was incredibly reliant on the user’s own tech literacy. We decided to limit our audience to people inexperienced with exercise, and people who are not tech literate. This skewed towards audiences of children and people older than 45.

When looking at our competitors, our team focused on the Apple Watch and Fitbit. We did not want to make a carbon copy, so we weighed the two industry leaders for their pros and cons. We discovered that both bands have similarity to each other in functionality. They can track heart rate and sleep, support ECG, detect exercise seamlessly, and are waterproof. The Apple Watch additionally has cellular connectivity, workout plan sharing, and SOS functionality. Based on our conversation with Julie Ann, screen reading services work well with the Apple Watch, and on the Fitbit App.

That being said, the drawbacks to both bands is that their layout is not user friendly for the visually impaired. The Fitbit app in particular can have low contrast on certain screens, and a fair amount of visual clutter. While better than Fitbit, the Apple Watch’s built in fitness tracker has a fair number of screens with gradients and clutter that make it hard to focus. Probably the biggest concern we saw as a team is that both of these services do not cater to a less experienced demographic. Neither explain the exercise that the goal sets expect, or really has separate space for exercises that are not walking and running; they primarily track miles, steps, and calories.

With that information under our belts, we strove to make something that would be beginner friendly, would be simple to pick up and learn, and had the opportunity to get more complex as the user learned. We decided to make the app simple, readable for screen readers and people with low vision, but sleekly designed so it could also be used by people with full vision.

For that reason, we stuck with a simple color palette of black, white and red. We chose the name “Promenade” due to its grandeur and vintage sensibilities to resonate with our older audience. The app begins by pairing the band and leads directly into a tutorial that describes the exact vibration and sound combinations the band would make at different stages of the exercise period. The fonts used in the initial prototype, Helvetica and Urbana, are distinct but easy to read. The buttons are large, and each option only has a few sub-options in which to choose. The app also has a built-in screen reader, where it describes each difficulty level and what specific exercises it entails.

First pass at fully realized band designs. The left and middle were the most solid conceptions, with the ones on the right being a diversion to see if they would work.

We originally designed the band to be more of a bracelet. It would be thin and made out of a waterproof flexible rubber with a metal clasp. Within the clasp would be either a mini-USB or USB-C charge port. The band would pair with your smartphone but does not need to be near it to be effective. If the user wanted to go on a walk without technology, the band would still be perfectly functional. Small speakers and a vibration system within the device would use a combination of specific alerts and buzzes to update the user on their progress.

Medium Fidelity Wireframe and Feedback

The time came to put our hard work to the test. We presented our work to get the necessary feedback to continue.

Our research and initial prototype were judged by a pair of professionals selected by Adobe. While they were impressed with our initial draft, they expressed concern over the lack of time telling on the band, the extreme simplicity of our prototype, the accordion system for our options, and the alert system for the band being solely vibration and sound base.

They suggested building in more ownership in the exercise experience, and examining the outcomes as opposed to the features: how easy is it to wear, and how does it function? How does the app adapt to the environment? How and when does the user get involved?

Our first pass prototype.

The bands as they appear in the video.

UI Design Refinement, Round 1

Feedback in hand, our group split to individually come up with refinements based on our feedback. In my first iteration of the prototype, I focused on giving Promenade a distinct identity. I moved all of the text to be set in Urbana, added more elements of red, and introduced more hand-done touches akin to the dotted-line circle in the logo. For the exercise screen, I changed each specific exercise to have its own submenu, ensuring that the exercise and their difficulty levels would exist as their own pages. Each exercise has a fully interactable “Leisurely” setting, all of the exercises have voice-to-text explanations of their difficulties, and a custom progress animation. Additionally, I hammered out an in-depth options menu with text customization, color options for different visual impairments, and a dark mode.

The new bands are redesigned in a setting that looks more realistic. They have a simple watch that only tells the date and time and can read the status of the user’s exercise when tapped. The original functionality of vibration and sound to announce stages in the exercise is still intact.

My first update of the prototype.

UI Design Refinement, Round 2

A year later, I returned to this project with a fresh eye to push its originality and polish. While Round 1’s design was functional, it had no definitive personality, rhythm, or emotion. The brand could be simple in its color palette, certainly, but that doesn’t mean that it can’t also be fun. Throughout, I changed little things like making the header red, refining the typography, and completely fleshing out dark mode. From there, I moved onto bigger changes like fully fleshed out walk-throughs of all the exercises, and illustrations to give the brand a funkier feeling.

My second update of the prototype, in light mode.

My second update of the prototype, in dark mode.

Conclusion/Next steps

Taking in all I have learned over the time I have spent with Promenade, this project has taught me the importance of designing for people of all ability levels in interactive experiences. The resources I have compiled will serve me well as I continue to design apps and websites and are excellent jumping off points for further research. It has also helped strengthened my performance in a group work setting, forcing me to communicate often and openly, be concise, and be gracious. Overall, I am proud of the whole experience working with this design and look forward to tackling more complicated team cases in the future.