UX Design Systems
Mixtape - a SoundCloud Design System
Client
Course project for
'UX Design Systems'
ROLE
UX Designer
EXPERTISE
Interaction Design & Research
Design Systems
Timeline
4 weeks
Why does SoundCloud need a Design System?
I tried recreating SoundCloud with another design system… It fixes some issues, but it loses on charm
There are several unique features of SoundCloud that simply aren't offered by other design systems - the Waveform, the comments tagged with the timestamp of the track, etc.
Before
After
Does SoundCloud have a design system?
Judging by the Inventory, it doesn't.
Soundcloud has an overwhelming amount of redundancies in its current UI inventory. It contains an amorous amount of buttons, colors, and typefaces, and barely passed accessibility criteria in several areas.
Redundancies everywhere… but also a few shortcomings
There’s too many colour Styles, Typefaces, and Component variants.
The entire UI barely meets accessibility standards
The color pairings only meet AA accessibility standards (meaning they can only be used in large text). And th headers are tagged incorrectly in code, maing it far less accessible for users with screen readers.
To resolve these issues, we set some design principles to give us direction:
⛈️ Clear & Consistent
⛈️ Accessible
⛈️ Bold & Beautiful
So what did we build from it?
Introducing… Mixtape!! - A culture change disguised as a UI kit
From "14 shades of Gray" to 5 neutrals
Tagged and Organised Typeface
6 button styles standardized for consistency (and checked for accessibility)
Funny thing… SoundCloud updated their UI
SoundCloud's new UI
And it validates our Design Decisions
SoundCloud's UI with Mixtape
