Accessibility Add-on

that helps enhance the music streaming experience of the HoH community

Overview

This is my capstone project for my Master's degree in HCI at U-Mich. My friends and I designed an accessibility add-on for music streaming platforms to help enhance the streaming experience for the Hard-of-Hearing (HoH) community.

Team

1 lead researcher
2 designers (including me!)

Duration

~1.5 months (Feb.2021 - Apr.2021)

Overall Process

Motivation & End Result

End Result

90%

of Americans listens to music for an average of 32 hours a week.

1 in 20

Americans are D/deaf and hard-of-hearing.

30+

music streaming services on the market currently.

~1 in 3

people in the US between the ages of 65 and 74 have hearing loss.

Music is a big part of our day-to-day life (well, most of ours), as if it has some kind of magic that would just make your tiredness go away. However, most of us barely think of how the D/deaf and HoH community would listen to music. Currently, there's a noticeable lack of accessibility features on music streaming apps for these communities, which made us wonder: what does that experience look like? Do they perceive music differently? More importantly --

"How can we best assist in creating a better music streaming experience for D/deaf and HoH communities?"

1. Access to live lyrics & more detailed lyrics presentation

With this add-on, users can more easily access live and accessible lyrics. They can even turn on the "detailed captions" option to uncover the subtle sound effects of a song. Moreover, the spectrogram that vibrates with the beat would offer them a more immersive streaming experience.

2. Summary of background stories

Our add-on makes it easier for users to further research and learn more about the background stories of a song and the message the artist is trying to convey.

3. More discoverable and intuitive equalizer

We made the equalizer more discoverable and understandable by including a set of pre-set modes as well as the flexibility for customization.

How did we get there?!

Let's take a look! 👀

01 Research

Making sure we are using the same language 🎵

Secondary Research

Since this is the first accessibility-related project we worked on, before our team explored primary research avenues, we decided to conduct secondary research to validate expected interview protocols and support further data collection.

We sought out scientific reports, scholarly journals, personal narratives, and other existing research to determine the DHH (D/deaf and Hard-of-Hearing) communities' interest in listening to music via streaming services and determine how to access the community in an accessible environment, i.e., using an ASL interpreter. Furthermore, secondary research provided us with attributes of the community that are relevant to making streaming services accessible.

Afterwards, we use the data and resources we obtained to generate an interview guide that we can later on use in order to make sure we are using the same language with our users and that we were able to provide an accessible interview environment for them (e.g. with transcript while doing the interview, etc.).

Not sure what your users want? Just ask :)

User Interviews

As you can probably tell, we had no idea how the DHH community listens to music: What are they looking for? What's missing? How can we help optimize? Rather than making these assumptions, we decided to actually talk to some of them! By posting on Reddit and reaching out to my HoH friend, we were able to recruit five members, all of which are from the HoH community.

We were hoping to understand these three key questions:

What are DHH perceptions of existing music streaming tools?
Why and how do they listen to music?
What are some important factors that could make this experience more user-friendly? How can technology better assist them to make it more accessible?

Research

It turned out to be a very eye-opening experience, in which we learned that:

Lyrics and sound qualities are very important.
Music is a “background” to most people, they multitask when listening to music.
Equalizers look complicated to use and some target users assume the feature has a steep learning curve.

Affinity diagram for research synthesis

However, with a sample size of 5, we didn’t reach saturation, no new information or themes observed, from our interviews. Thus, we used our findings to create appropriate and well-connected research questions for a survey that adds another primary research opportunity to reach a broader audience.

Let's get more insights!

Survey

In total, we received 32 survey responses in 3 days. 31/32 of our survey participants identified themselves as members of the HoH community and 29 of them use music streaming services to listen to music. All of our analyses were made based on the 29 responses mentioned above. We compared our survey results with our interview findings to validate those findings. The survey results also gave us some more insights that we didn’t discover through the interviews because of limited participants.

Through the survey, we not only validated the three interview findings mentioned in the previous section, but also were able to identify three new themes:

People care about understanding the message a piece of music is trying to deliver. Lyrics, tempo, tone, and sound effects can help them better perceive and understand the message.
Vibration is a personal preference instead of compensation for the music streaming experience in the HoH community.
Graphical visualization of music components (e.g. tempo, soundwaves) isn’t necessary for HoH users.

02 Define

Well, do we still wanna solve for that? 🔖

Refined Problem Statement

We started with a broad problem statement asking ourselves “how might we improve the music streaming experience for the DHH community?” And our research process definitely helped us better narrow down the scope.

In interviews, we discovered that most of our interviewees use desktops when listening to music as it allows for better multitasking. Due to time constraints, we decided to follow this finding and prioritize the desktop version of music streaming platforms so we can deliver solutions that could be most useful to our target users. Moreover, most people who participated in our research process are HoH. Since we were not sure whether the design solution will be applicable to address the needs of both communities (i.e. HoH and D/deaf), we decided to narrow down our focus to only the HoH community as we obtained more information about them. Finally, we learned that HoH users not only listen to music, they also are interested in knowing more about the messages that a piece of music is trying to convey by adjusting music quality and properties (bass, frequency, fidelity, etc.) to listen to its elements (lyrics, tempo, sound effects, tone, etc.) more clearly. Therefore, we refined our problem statement to:

Define

"How might we better convey music to the HoH community by improving the desktop streaming experience and providing a universal solution that could be applied to all desktop streaming platforms?”

What do we wanna prioritize first?

Design Requirement Doc

Given that our time is limited, we wanted to make sure we prioritize the features that are would make the most impact to our users. After thinking through the potential impacts based on our research findings, we decided on three key features for this project, listed in priority order:

The solution has to provide access to live lyrics and have better lyrics presentation.
The solution has to make hearing-related accessibility features (e.g. equalizers) more discoverable and more intuitive/less intimidating.
The solution could help users better understand a piece of music by providing more details of it: tempo, tone, sound effects, etc.

OK, so... how can we present those features?

Concept Brainstorm

Based on our problem statement and design requirements, our team came up with three potential design solutions that our design requirements could be incorporated into.

After a few rounds of ideation and weighing the pros and cons of three accessible solutions, our team decided to move forward with the second idea: App add-on/accessibility bundle, since it's the most accessible and affordable solution, and will also be the more sustainable among these three.

Phew, that was a lot. But the fun starts now!

Let's dive into design! 🎨

03 Iterate

Would this help...? 💫

Low Fidelity Mock-ups & Concept Testing

After deciding on the key features and general direction of this project, we started to create low fidelity mock-ups to better demonstrate our ideas. However, we didn't want to invest in a ton of effort before further validate that we were heading towards the right direction. Instead, we recruited two HoH users for concept testing where we asked exploratory and open-ended questions to further validate our design concepts and the ways we were presenting them. We were able to identify three key findings/patterns:

1. Some actions are so hidden that there’s no signifier indicating an action is available.

In our design, there were icons/info that only showed up after users hover on a specific place. When asked to find the mode description and the frequency information, none of the users successfully figured it out without hints. This indicates that we would need to make the available actions more obvious by providing signifier/guidance in our later design.

2. The layout of our equalizer page wasn’t effectively communicating our intention in the design. Users had different understandings of the information that the page was trying to convey.

When we designed this page, we envisioned that users would have two ways of setting their equalizers, either by clicking on one of the pre-set modes or customizing their own equalizer based on their preferences. However, when we presented this page to users, both users assumed that there was a connection between the two panels. One of them said “I would click the Bass Booster equalizer and adjust the line” when asked to customize the bass and frequency based on his own preferences. This shows that our design wasn’t successfully presenting the information architecture that we originally intended and needed to be altered in the later version.

3. Users not only cared about hearing-related accessibility features, they also wanted to make sure this add-on covers specifically accessibility features related to visual disabilities.

We asked a lot of exploratory questions during our first round of testing to further explore if other features are missing from our design. And we were happy to find out that both users we talked to in the first round (and some in the later round) want this add-on to include some additional accessibility features related to visual accessibility. More specifically, they want the ability to adjust the font size and/or color of our lyrics section so the add-on is more accessible to a broader audience. Even though the focus on our project is the HoH community, we decided to make small edits in our design to include the font size changing feature with the assumptions that this shouldn't be a huge lift in real life.

Iterate

Is it easy to use?

Usability Testing

After our first round of testing, we iterated our design based on user feedback and moved on to the second round of usability testing with three HoH users, with the goal to test out the usability of our features. We’ve discovered two more key findings/themes:

1. The information architecture of our equalizer page still wasn’t clear enough.

Even though we iterated on the visual representation of our equalizer page by grouping each panel, adding background color to distinguish grouping, and including description for each type of equalizer, we discovered that 2 out of 3 users still thought that those two panels were somehow connected. This finding indicated that we would still need to iterate and explore more on this page’s layout and instructions to make this feature more intuitive to both beginner and advanced users.

2. Some copies/wordings in our design weren’t intuitive enough for our users.

During our usability testing, we discovered that some wordings in our design weren’t clear enough and introduced mental burden on our participants. One example is the copy on the button that allows users to go back to the lyrics displayer from the equalizer page.

In our original design, once users navigate to the equalizer page, they can go back to the lyrics displayer by clicking the button that says “Now Playing: [song name]” on the top left corner. However, during our usability testing, even though they all succeeded in the task “please navigate back to the lyrics displayer”, all of our participants mentioned that it would be better to add a back icon on the current button or changing the copy to something like “go back to lyrics”. So we further iterated on the copy to make sure the guidance is clear enough for our users.

What should it actually look like?!

Let's check it out!

04 Deliver

Deliver

The final result!

High Fidelity Prototype

The building blocks 🧩

The Style Guide

Tracing back a little bit to see how the style got built, since Spotify is the primary streaming platform that HoH users use, according to our research, we decided to build a dark mode version that matches more with the Spotify color palette but used a different highlighting color to differentiate our branding with theirs. Given that our mission is to create an add-on that can be applied to all music streaming platforms, we also created a light mode style guide so it can work better with streaming platforms that have a lighter style.

We used accessibility tool to validate that all our colors adhere to AA WCAG standards.

Reflection

Overall, out team was happy with the final result. However, there is still room for improvements:

An ideal solution should be cross-platform, even though we focused on the desktop version for this project due to time constraints.
Ideally, we should be able to integrate the add-on with different music streaming platforms to reach a broader audience.

We were happy to find out through user tests that all our participants found our product helpful and meaningful. With our add-on, we hope that we could make the music streaming process more simplified and intuitive, and that we were able to create a sustainable experience that users in the HoH community can better enjoy.

"The info icon is perfect - now I know what equalizer does. I will definitely use this product."

-- A user who had doubts on equalizer

"The vocal & background customization is really useful, because sometimes the vocal is too soft and you can't hear it."

-- A user who's completely deaf in his right ear

Reflection