Educational assignment

Accessibility in Spotify

An assignment with the purpose to create an accessibility solution to the existing Spotify app. Our projects focus was on increasing accessibility for users with visual impairments. We chose to only work with the mobile-adapted version of Spotify. This project was performed in an one week-sprint and in a team on five students including me.

Problem

The app is not avaliable to visually impaired users

There was a need to create a solution that increases the font size in the app and build in functionality to make it easier for users with visual impairments to navigate the service.

Process

1. Brainstormed and mindmapped different solutions to the problem based on the target group and desired values in the task in Miro.

2. Thoroughly reviewed research and documentation on visual impairments, aids and guidelines from sources such as the Swedish Association of the Visually Impaired, DIGG, Funka and others. Also researched existing solutions for visual impairment in mobile phones and apps.

3. Produced a LoFi sketch. After feedback on qualitative testing with representatives of our target group in our Figma prototype, the first version was revised and adjusted according to testers feedback.

4. Built a HiFi prototype where the design followed Spotify's existing styleguide. The microcopy, components and graphic elements were in focus as well. New color schemes were created for the different versions of color blindness that users might have, but still harmonized with the graphic styleguide for Spotify. Did user testing through Useberry and after analyzing the results we completed the prototype.

Try the prototype in Figma

My role

In this group we all contributed to the overall design. My additional role in this project was to use my knowledge in both accessibility and graphic design.

I educated my peers in Figma, and also accessibility concerning issues in general and the regulations of WCAG.

The graphic elements such as icons, the core interface and components like some of the cards are my creations, as well as the microcopy. The color correction tests and new colors were my responsibility:

The icons had to mediate the purpose in a simple way and still follow the overall design. The motion icon was a challenge to create, and after testing the prototype the version that is generally used and therefore recognizable was used.
The microcopy had to be short but still explain exactly what is implied without creating confusion or misinterpretation.
To test the colors for the different blindness settings I used CVSimulator to visualize the experience for the user. I then based the choice of colors on that togerther with the Spotify color palette.

Conclusions & insights

Accessibility is a neglected area in need of more love, especially when it comes to mobiles in general and apps in particular.

Many questions appeared during the journey: How do you use voice over on the mobile in a music app?

And also, our solution in this project was to override the settings in the mobile since the user probably already have accessibility settings installed. Is that something you can implement or do you have to work around it?

And how do you navigate without the tab in a mobile, when that is how you move between elements on a desktop? The same problem occurs without the alternative texts; what if there is a button that you don't want to click just to get the explanatory text?

This was a very interesting project and it triggered my curiosity to learn even more about accessibility and my wish to solve this type of complex issues!