Our team partnered with Hulu in Santa Monica
 to design a way to improve accessibility 
for the visually impaired

With the right tools, you can do anything.​​​​​​​
Client | Hulu 
Team Members | Nadina Cosic • Mordechai Friedman • Chioma Ojini 
My Role  | UX Research/Design • Product Design •  Inclusive Design
Duration| 12 weeks
Tools | Pen & Paper • Figma • Sketch • Adobe Illustrator • Slack • Scrum Meetings


Design Brief

How might we design Hulu to be more accessible for people with special needs or different challenges when it comes to discovering and/or viewing content?

Project Goals
•  To understand the motivations and pain points that visually-impaired users may have in regard to accessibility of streaming/live TV services on various technology devices in the comfort of their own homes. 
•  To understand the different degrees of visual impairment (i.e. low vision, light perception, total blindness, etc.) 
• To involve the visually impaired user in our design process.

DesignBridge allowed the visually impaired participants to communicate spatially, how they would prefer the screen layout. With the DesignBridge, participants now had a physical way to voice their needs around layouts, and interactions improving their digital experience.

Our first stop was Wayfinder Family Services, formerly the Junior Blind of America. They provide the visually impaired community tools for independent living, orientation & mobility, and assistive technology training.
How the visually impaired use assistive technology:
•  ZOOM, is a screen magnification software used for individuals with Low-Vision.
  JAWS, is a screen reader which also outputs Braille for computer applications.

This kitchen is part of independent learning
This kitchen is part of independent learning
ZoomText, screen magnifier/reader
ZoomText, screen magnifier/reader
JAWS, Screen Reader
JAWS, Screen Reader
Here’s what they are saying at Wayfinder:
"I think we are up to 7% right now...of prime time TV that is audio described."
What surprised our team was that all the visually impaired staff we met enjoyed listening to movies and TV shows with Audio Description. "Audio Description" is the descriptive narration of key visual elements of live theatre, television, movies, and other media to enhance enjoyment by blind or low-vision consumers (American Council of the Blind). ​​​​​​​All movies and shows should be made accessible to the visually impaired community. I see this as an opportunity for streaming services to provide more access to content, which translates into more visually impaired users viewing content. This is huge when you consider about 285 million people worldwide have some form of visual impairment.
“I heard from various VoiceOver users, that the Hulu app was not particularly accessible.”

VoiceOver, the iOs Screen Reader,  was used by everyone we interviewed and observed. The visually impaired rely heavily on memory and gestures (often specific to their screen-readers) when navigating interfaces. They also need to be actively listening to decide whether the element being read can be interacted with, or if it is just text. This carries a high cognitive load. I tried VoiceOver to gain a better understanding of how important audio cues are for the visually impaired, especially those users with low-vision or total blindness. I needed to understand why our users felt the way they did. How could we get them to show us what they needed? The staff at Wayfinder all believed that "...the Hulu​​​​​​​ app was not particularly accessible." The community is very close-knit, and word of mouth travels like wild fire.
In-home Interviews
*The names of participants have been changed to protect their privacy*


 As a Power User, Brian uses both Android and iOs devices. With "Retinal Degeneration" he has Low Vision, and Color Blindness in one eye, and is totally blind in the other eye. The in-home interviews would allow me to observe, understand, and build empathy for our participants.
Brian hears about new shows to watch on his streaming service by listening to YouTube reviews.​​​​​​​
Pain Point #1  •  Content discovery was not happening.
He uses an Amazon Firestick and TV remote together, but doesn’t use the VoiceView (speaks on-screen text) accessibility feature on the Firestick because, according to him, “…it’s slow and not that dependable. The voice option doesn’t read everything, and it’s very sluggish.” That’s why he has to get up from the sofa and move within a few inches of the TV screen to browse or see where he is on the playback screen. When his sighted partner is not home, Brian listens to his favorite shows on his iPad, it has built-in accessibility, and he doesn’t have to leave the sofa. 

Pain Point #2  •   Low opacity image behind text is impossible for participants with low vision to read.
The VoiceOver was inconsistent when Brian was trying to search for a movie title. For example, he could not tell where the cursor was in the search bar. He even tried Voice To Text, but still could not find what he was looking for. This created a source of frustration for Brian and was another example of how Discovery was not happening. There are definitely issues with consistency when using some built in accessibility features on devices.
How our Co-Creative exercise informed our design
The Creative Tool Kit was a collection of different tactile objects.
The Creative Tool Kit was a collection of different tactile objects.
Testing our Creative Tool Kit
 I was excited to see if this prototype would even produce a result that we could use for our research. I wasn't afraid to try something new or to fail, because it's times like these when innovation happens.
Interpreting the Creative Tool Kit results:​​​​​​​
So that we could better understand our Co-Creative exercise we consulted with a Cognitive Psychologist. Her recommendation was to have our user do the exercise twice. First, have our participant create their mental model of the Hulu playback and discovery screens, then move the objects to make the design more accessible for them. We could then document the differences, and let our user drive our solution.

After talking with our expert, and seeing Brians results we decided to focus our research on the totally blind participants.  Luis uses his iPhone as his primary device for streaming. He is also very active on social media, Facebook, Instagram, Snapchat, and Twitter. His family has an AppleTV, which Luis says is very accessible. We were unable to conduct research with the AppleTV. A common theme during our interviews is that the blind community wanted to be heard, and that they felt a lot of times that Accessibility is an after thought with lots of companies.​​​​​​​

Luis is trying to pause a program

“I guess Netflix is more accessible.”
One of the tasks was for Luis to pause a program during playback on the Hulu app. He was unable to pause the program, and during the Think Aloud protocol he said, "You know what...I don't know? There is none. There is no pause button. I guess Netflix is more accessible." I then asked him to go to his Netflix app and try and pause a program, which he did almost immediately. Another key discovery is the amount of times needed to flick through the playback screen in order to reach the pause button. On average it took anywhere between 9 to 15 swipes

Creative Tool Kit

Luis wanted "New Categories" to be at the end of the Playback, so he could easily select another show. Another key research discovery was that he was not able to access new content. Luis was stuck in "Recently Watched" and not able to access the full content on Hulu. We could see there was a mismatch between what Luis thinks is happening and what is actually happening on the screen. 
We started to notice a pattern with the way our users were arranging the items. Their mental models of the screen layout were horizontal, and very linear. 
Pain Point #3  •  Unable to pause during playback.
The visually impaired community 
does not want Accessibility 
to be an afterthought.
Pain Point #4  •   Buttons were not always labeled or they were labeled incorrectly.
 Kate she uses her iPhone as her primary device for streaming. She is a full-time student studying Child Development for the visually impaired. She uses her computer and iPhone daily. She does have an SmartTV at home, but we interviewed her at her parents house, so we were unable to get accessibility research on the SmartTV. She uses her computer daily for school, but it frustrated by websites that are not accessible. There is no life hack when you cant' see the content you want to access.​​​​​​​
"It wouldn't read to you what movies there were for you to watch."

Kate using our Creative Tool Kit 

After designing her mental model of a Hulu Discovery/Browse screen, she says, "It just had the title of what you clicked on. For example, like 'movies,' but then it was basically empty. It wouldn't read to you what movies there were to watch." From what Kate designed we could clearly see that the vertical layout of Hulu's Discovery screen was only reading the heading of the categories, and as Kate flicked through she was unable to access the content in each container. This was a huge discovery!
User Testing with DesignBridge

Mark using DesignBridge, the scaled up version of our Creative Tool Kit

Our users placed important elements (buttons) along the edges of the DesignBridge screen.

Refine & Design
DesignBridge, was created because we were trying to "bridge the communication gap" between sighted, and non-sighted designers. It was a scaled up version of our original Creative Tool Kit. We narrowed it down to five different tactile objects based on our research, and constrained the size to a 9" x 12" magnetic dry erase board. We attached the magnets to the macaroni shapes, so they could be easily moved around the board. One issue I encountered was that the magnets would stick to each other during testing even though I wrapped them in felt.

Key Takeaways
  Digital screens are designed for sighted users.
  Horizontal layouts are easier for blind users to navigate.
•   The visually impaired community wants independence, wants to be heard, and to communicate its needs.
•   Digital prototyping with our users is extremely difficult, due to a lack of support of screen-readers in prototyping software.

Possible Future iterations:
•  A digital screen with embedded microphone for audio.
•  The movements of smart elements could be tracked using heat mapping technology or other software.
•  The data could be transmitted to the cloud and accessed by clients remotely.

DesignBridge is not limited to the visually impaired community. The moveable elements can be customized, and made into any shape imaginable. These customized elements are flexible and may help designers communicate using a physical vocabulary with children and adults with learning challenges, and the elderly population. 

Nadina          Chioma          Mordechai          Me


You may also like

Back to Top