SoundCloud Player Accessibility
case study — Jun 28 2022 — 4 mins read
- Sr. Product Designer — Design Systems
it is an online audio & streaming platform based in Berlin. one of the most recognized names in the music industry. And as we say... What's next in music is first on SoundCloud. it's currently a subscription business model. selling subscription plans for consumers & audio creators. while now it's looking into changing towards creator & fan economy to be more community-based.
Our media player was not great in terms of color accessibility and our team thought it was vital to address this. Because our new design language was built with accessibility in mind. Some parts were pushed to post-MVP, Which is ok. After all, Design System work is never done.
Below is what it currently looks like. Timed commenting and the waveform are iconic and very unique to the SoundCloud experience.
Zooming in on some parts:
- It's pretty hard to see these icons and buttons at the bottom.
- Similarly on the top right. some buttons aren't very clear.
Which existed like that forever and probably has a negative impact on engagement.
For this project walkthrough, I'll be using the STAR method
It was tricky to work on, we had to fix color contrast problems without too many significant design changes 🤔
Make sure listen time, likes or any engagement metrics don’t dip. because More than 80% of all likes happen within the player!
My task was to explore various solutions to color accessibility problem with the known limitations
- Explore design solutions.
- Involve android engineering to understand what’s possible because android was ahead in its design system implementation, we can test on it then expand that solution to other platforms
- Get help from Product & Data teams to support us in running an experiment. New design concept vs the current version.
- In that experiment, we Monitor listen time and engagement metrics to determine a winner
I did so many explorations, so let's jump into a few of them and understand how we chose the winner.
✦ Concept 1
We already had a subtle gradient overlay on top of the artwork, so I increased it and made it stronger hoping it would solve the problem but it didn't.
- The Gradient looks too dirty and destroys the artwork
- Wouldn’t work on all use cases like busy or messy artwork
✦ Concept 2
Add a background blur instead? almost worked..
- It covers too much of the artwork
- Not always accessible unless we darken the blurred background too much
✦ Concept 3
change the UI based on how light or dark the artwork is. Was an interesting idea and thought it will work.
- Might introduce UI flickering as we don’t know before opening the page if the UI should be light or dark.
- It didn't work on busy artwork because we can't determine if the UI should be light or dark.
And here's an example of a busy / messy artwork. as you can see I can't determine if it should be light or dark, so this concept won't help us.
✦ Concept 4, The pill:
- Again, covers too much of the artwork and doesn't match our design principles.
✦ Concept 5
Mimic a bottom nav bar for actions? hmm..
This one felt like we are getting somewhere but it still covered too much of the artwork but it lead me to the next idea.
✦ Concept 6, the polished bottom bar
With this one, I scaled down the artwork so the bottom bar doesn't cover much of the artwork anymore. Works on all use cases!
Another reason why I chose this concept, is that it relates to one of our design principles. "Content, even over design"... We wanted our design to be content first, so our design steps out of the way...
Below are screenshots from the app. Before and after.
You can see how visible these actions are. And for the top part, we used secondary buttons instead of the old ghost buttons.
FigmaCloud ☁️ to the rescue
An additional thing I want to mention is that during my time in the design systems team, I've built a few plugins to help designers with thier workflow.
FigmaCloud has been really helpful to fill in our designs with real data from SoundCloud's API. It's really useful in stress testing our design components against real data. Of course, I used it to make sure my concepts to fix player color contrast will work 😉
Back to the player, this is the final result which is already built as you can see. The actions are always clear no matter what the artwork is.
Final result after building
Unfortunately, I can't tell u anything about the results of this project. it is very recent and we are actively working on it. Waiting on the experiment to run and see how it performs..
I still can ask what if it doesn't work?
I guess I would try to understand why it didn’t work… Go back and try again…