Press Play on Mixtape: SoundCloud’s New Design System
TEAM
Srishti Bhawal
Rohan Boda
WHAT I DID
Led the creation of a comprehensive design system, developing core foundations and designing 20+ reusable components, all documented for scalable use.
DURATION
February - May 2025 / 14 weeks
SKILLS
Systems Thinking / UX Design / Usability Testing / Documentation & Communication
What is SoundCloud? 🤔
SoundCloud is an artist-first, open music platform that caters to both music creation and listening experiences!
Why does SoundCloud need a design system?
An inconsistent and inaccessible UI increases cognitive load and disrupts the user experience on SoundCloud.
Our solution 🪄
Introducing Mixtape Design System: Your favorite soundtrack for seamless workflows!
A streamlined, future-proof design system that empowers teams across SoundCloud to build cohesive, intuitive, and inclusive user experiences together.
We raised the bar... and then some! 🎉
Redesigned 20+ reusable components for use across 17+ screens, unified within a single design system.
Uh-oh... a new interface!
Funny story: While we were building Mixtape, SoundCloud launched a new UI that looks strikingly similar to ours!
Midway through our design phase, SoundCloud released a new UI—initially surprising, but it soon validated our approach. Both interfaces looked strikingly similar, addressing the same core goals: consistency, accessibility, and usability.
While the update improved the UI, a design system like Mixtape could further enhance consistency, scalability, and accessibility.
NEW SOUNDCLOUD UI
SOUNDCLOUD WITH MIXTAPE
So how did I do it? Let’s start from the beginning!
Understanding our users by using a design system
Interested in seeing how SoundCloud looks using Polaris, Shopify’s design system?
We began by stepping into users’ shoes, recreating SoundCloud using a public design system to understand designers’ needs.
Using Shopify’s Polaris, we saw how consistency improves usability, teaching me the value of clear documentation and inspiring our tailored Mixtape Design System for SoundCloud.
The UI Shell: Polaris' standout feature that enables rapid development of new pages with consistent layouts and navigation.
Polaris’ UI Shell—a flexible layout framework—organized navigation, headers, and footers, jumpstarting my workflow despite minimal documentation. I saw how a similar component could benefit SoundCloud’s design system.
Identifying key issues
So… Where do we start with building a design system for SoundCloud? By deconstructing it first, of course!
We conducted a design audit of SoundCloud using Atomic Design, breaking the interface into basic components to identify and document key inconsistencies.
Below is a breakdown of SoundCloud’s interface elements, organized by function:
What did we learn by breaking down SoundCloud?
Our analysis of SoundCloud’s interface revealed 4 key insights that we needed to address.
Color - Lack of consistency
01a: We found 20 neutral shades with minimal shifts in value.
Color - Lack of accessibility
01b: Many background and foreground combinations were inaccessible.
Typography - Lack of consistency
02a: Inconsistent font sizing across headers and body text created a lack of visual hierarchy.
Typography - Lack of accessibility
02b: There were randomly assigned H1/H2 type classes across interface and code.
Buttons - Lack of consistency
03a: We found 34 unique button styles across the interface.
Buttons - Lack of accessibility
03b: Majority of the buttons in SoundCloud’s interface were not sized for accessibility.
SoundCloud's brand identity
04: SoundCloud has a distinct and recognizable brand identity that should be carefully preserved.
SoundCloud’s iconic waveform and artist-focused UI create an inclusive space for all creators. Our redesign prioritizes improving usability while preserving this distinctive brand identity.
Defining our guiding principles
Looking forward, we identified the priorities and goals that would guide how we designed Mixtape!
By establishing clear brand and design principles, we created a framework to unify the experience and streamline workflows:
Clear and Consistent
Accessible
Empowering
Dynamic
Bold and Beautiful
Starting to design!
Building SoundCloud’s flexible UI kit for streamlining the design process.
With our principles established, we progressed to building a scalable and efficient design system for SoundCloud.
Leveraging Figma, we crafted a comprehensive UI kit featuring our foundations, reusable components and modular patterns to simplify and accelerate both design and development workflows, as seen in the demo below.
Atoms
Tokenized the smallest, reusable elements to create a design foundation.
Molecules
Combined basic elements to create functional, reusable components.
Organisms
Built distinct sections and blocks of an interface using components.
Testing the UI Kit
"What the heck is a Shell?!" Improving the usability and function of the UI Shell based on user feedback.
We tested UI Kit v1.0 by asking other designers to recreate existing SoundCloud pages using our system. While users found the UI Shell extremely helpful once they understood it, many were initially confused about what it was, how to use it, and where to find it. To solve this, we moved the UI Shell to the Foundations section—recognizing it as a core building block—and made it more discoverable.
We also redesigned the Shell to include swappable content blocks and embedded usage instructions (as seen below), making it feel more like a starter template than an incomplete page. To support this further, we added clear, detailed documentation to guide users through its use.
BEFORE
AFTER
Documenting Mixtape
Mixtape’s documentation serves as the single source of truth for SoundCloud’s new interface.
Hosted on Zeroheight, Mixtape provides guidance on principles, tools, contributions, and detailed foundations and components, with direct links to the Figma UI Kit to streamline design.
Take a look at our documentation site below:
*Drumroll* And here it is... Our final design system!
Say hello to Mixtape — A new track for SoundCloud design!
Introducing Mixtape's star qualities 🌟
Built in accessibility with extensive guidelines for further support.
Mixtape was built for accessibility, with inclusive components and WCAG-compliant guidelines that enable designers to create inclusive experiences by default.
Customizable and scalable design powered by tokens and variables.
Mixtape is built for scalable, customizable design, using tokens and variables to maintain consistency while allowing flexibility. Primitive tokens feed into semantic and component tokens, enabling easy customization without compromising the system.
PRIMITIVE TOKENS
SEMANTIC TOKENS
COMPONENT TOKENS
COMPONENT VARIABLES
Consistent, purposeful application of color, type, and buttons across the interface.
Mixtape refined SoundCloud’s color, typography, and buttons to enhance hierarchy, reinforce brand identity, and improve usability for a cohesive user experience.
20 SHADES OF GRAY TO 5 NEUTRALS CHECKED FOR ACCESSIBILITY
FROM 34 BUTTON STYLES TO 6 DISTINCT BUTTONS
TAGGED AND ORGANIZED TYPEFACE
Mixtape’s UI Shell: A flexible and consistent layout framework that speeds up design and development.
Mixtape’s UI Shell serves as the foundation for building pages quickly and efficiently. By standardizing key interface elements like navigation, headers, and footers, it maintains a cohesive user experience across the platform, while accelerating both design and development workflows.
Below is a short demo on how to effectively use a UI Shell to start designing a new page.
Branding Mixtape as a unique product that honors SoundCloud’s identity and innovation.
One of my favorite parts was productizing and branding Mixtape. I established a clear visual language across documentation and the UI kit, reinforcing Mixtape’s identity as a standalone, recognizable design system.
Understanding the impact
Mixtape allows SoundCloud teams to design and build faster, more consistently, and more collaboratively.
By implementing Mixtape, SoundCloud can speed up delivery by enabling teams to reuse components, scale confidently while maintaining quality and brand integrity, ensure consistency across platforms, and build accessible, inclusive experiences by default.
FOR DESIGNERS
Mixtape allows designers to move faster with ready-to-use, consistently made components.
FOR DEVELOPERS
Mixtape allows developers Build quicker with reliable, pre-built, shared code.
FOR TEAMS ACROSS SOUNDCLOUD
Mixtape enables team across SoundCloud to deliver unified experiences based on a shared design language.
The ending to our design story
Pitching Mixtape as SoundCloud’s key to better consistency, accessibility, and collaboration.
At the end of our project, we crafted a pitch for designers, developers, and product teams to showcase how Mixtape delivers real value—saving time, resources, and costs while boosting collaboration, consistency, and scalability across teams.
Our peers were impressed by our dedication to the project and the clarity of our presentation, particularly praising our communication skills. Many showed strong interest in Mixtape’s unique features—especially the UI Shell—and expressed excitement about applying them in their own work.
Reflecting on what I learned
Design System ≠ UI Kit 👾
“Design systems are a culture change disguised as a UI kit.” This insight was a key takeaway from the project—design systems unite teams around shared principles, streamline collaboration, and embed consistency and scalability—roles a UI kit alone cannot fulfill.
Unlocking Figma’s advanced features 🫡
Exploring Figma’s components, variants, auto-layouts, and interactive prototypes boosted my efficiency and deepened my understanding of its flexibility, setting a new standard for how I approach design projects.
Organization means everything to a design system team 😅
This project reinforced that strong organization is critical for a design system team—managing components, guidelines, and documentation ensures consistency, collaboration, and scalability.
Appendix
Mixtape Design System Documentation
Explore our single source of truth for SoundCloud design through our extensive documentation.
Mixtape's UI Kit (v2.0)
Use and explore Mixtape's UI Kit (v2.0), open to the public as a community file on Figma!
Pitch Deck
As part of the project, we pitched the Mixtape Design System to a group of our peers for practice and feedback.