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.
SoundCloud currently uses a wide variety of colors, buttons, and typography, which increases cognitive load and makes the interface harder to learn and navigate. Without a consistent design language or adherence to Web Content Accessibility Guidelines (WCAG), key functions become less intuitive and less accessible—especially for users with disabilities.
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.
Our team successfully designed, documented, tested, and published the Mixtape Design System for public use. This initiative will significantly improve visual consistency, enhanced usability, and streamlined future design and development workflows for SoundCloud.
We also pitched the Mixtape Design System to our peers, clearly communicating the benefits of a unified system—reducing cognitive load, improving accessibility, accelerating handoff, and fostering a cohesive user experience. The presentation was very well received, earning praise not only for our communication and deck design but also for our attention to detail in building and documenting the design system.
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?
Our team began the project by stepping into our users’ shoes, recreating SoundCloud using a publicly available design system. This hands-on approach allowed us to critically evaluate designers’ needs and pain points when working with a design system.
I selected Shopify’s Polaris design system for this exercise. While Polaris wasn’t specifically built for a music platform, its emphasis on consistency improved the interface’s cohesion and usability, highlighting the value of a well-structured design system even in a different context.
This exercise taught me what good documentation looks like, how clear guidelines simplify the design process, and inspired my vision for creating a tailored design system for SoundCloud.
The UI Shell: Polaris' standout feature that enables rapid development of new pages with consistent layouts and navigation.
One standout feature of Polaris’ design system was the UI Shell—a flexible layout framework that defines page structure without preset content, organizing navigation, headers, and footers for consistency.
Though documentation was minimal and I had to explore the UI Kit to find it, once I understood its function, the UI Shell jumpstarted my workflow and made the process significantly smoother.
While not suited for every interface, I believed SoundCloud’s future design system could greatly benefit from a similar Shell component.
Identifying key issues
So… Where do we start with building a design system for SoundCloud? By deconstructing it first, of course!
To better understand SoundCloud’s platform, we conducted a thorough design audit. Applying the Atomic Design approach, we deconstructed the current interface into its basic building blocks to uncover and document critical inconsistencies in components, patterns, and layouts.
Below is a breakdown of SoundCloud’s interface elements, organized by their design 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.
This resulted in inconsistent color use and visual redundancy. Without semantic meaning or clear roles, users struggle to interpret hierarchy, states, or actions, which poses challenges for both accessibility and design scalability.
Color - Lack of accessibility
01b: Many background and foreground combinations were inaccessible.
SoundCloud’s color palette fails to meet WCAG accessibility standards, making the site less inclusive and difficult to navigate for many users.
Typography - Lack of consistency
02a: Inconsistent font sizing across headers and body text created a lack of visual hierarchy.
Additionally, without clear semantic logic, users struggled to distinguish content types and navigate effectively.
Typography - Lack of accessibility
02b: There were randomly assigned H1/H2 type classes across interface and code.
Designed type classes don’t match their code counterparts, making it difficult for users with screen readers to consistently navigate the interface.
Buttons - Lack of consistency
03a: We found 34 unique button styles across the interface.
Not all buttons have hover states, and among those that do, only some show a visible change, mainly through color shifts. Furthermore, the buttons exhibit inconsistent color relationships, contributing to a fragmented user experience.
Buttons - Lack of accessibility
03b: Majority of the buttons in SoundCloud’s interface were not sized for accessibility.
The inconsistent button sizes across the site result in some being too small to click, failing to meet the 24 px by 24 px WCAG accessibility guideline.
SoundCloud's brand identity
04: SoundCloud has a distinct and recognizable brand identity that should be carefully preserved.
SoundCloud’s brand is highly recognizable, especially its iconic waveform element. The platform’s UI treats all users as artists, fostering an equitable space for newcomers and established creators alike.
While our goal is to improve SoundCloud’s design, preserving this unique and inclusive brand identity remains a top priority.
Defining our guiding principles
Next, we identified the priorities and goals that guided how we designed Mixtape!
Our analysis revealed that inconsistent structure and lack of cohesion were leading to fragmentation and inefficiency.
To tackle these issues, we developed a strong foundation based on clear brand and design principles, providing a framework to unify the experience and improve workflow efficiency.
Clear and Consistent
Creativity knows no bounds, but not having any bounds on a design system could leave things up for interpretation—often leading to confusion and mistakes. We made Mixtape clear and consistent with just the right amount of boundaries.
Accessible
Our motto of “Anyone can make music” cannot be realized unless our products are accessible to as many people as possible. By following WCAG (Web Content and Accessibility Guidelines), we enable users to create experiences that empower SoundCloud’s diverse audiences.
Empowering
SoundCloud was built on the foundation that anyone can make music. Mixtape creates a space for anyone to tap into their musical minds, and have the tools to do so.
Dynamic
Music ebbs and flows, and SoundCloud’s interface encourages more interactions than a static website. Mixtape is dynamic and interactive so users can always be aware of and design for each of those interactions.
Bold and Beautiful
Mixtape is simplistic and bold to let SoundCloud’s unique features take the main stage. The goal is to be unique and be memorable to users without distracting from the tools provided to them.
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.
Mixtape’s foundation consists of reusable elements like colors, typography, and spacing, ensuring consistency that makes scaling easier.
Molecules
Combined basic elements to create functional, reusable components.
Building on the foundation, we created flexible components like buttons, dropdowns, waveforms, and avatars that adapt across layouts, ensuring consistency and usability.
Organisms
Built distinct sections and blocks of an interface using components.
Finally, we combined components into sections—headers, footers, cards, and layouts—that form SoundCloud’s pages and enable smooth navigation.
Testing the UI Kit
"What in the world 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.
Through observation and feedback, we uncovered pain points such as unclear component labeling and issues with publishing token libraries. But the most significant insight centered on the UI Shell.
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 and accessible to all, it offers clear guidance on getting started, our design principles, helpful tools and resources, and how to contribute or reach out. It also details Mixtape’s foundations and components—complete with usage guidelines, anatomy, and best practices—and provides a direct link to the Figma UI Kit to streamline the design process.
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 with accessibility at its core, offering inclusive components and clear guidelines to help teams design for everyone. By rigorously testing our foundations and components to make sure we meet WCAG guidelines, we ensure accessibility is baked in—so designers can create inclusive experiences by default.
Customizable and scalable design powered by tokens and variables.
Mixtape is designed for scalability and customization from the start, using tokens and variables to adapt effortlessly across themes and use cases, making it easy to maintain consistency while staying flexible.
Below, you can see how primitive tokens feed into semantic tokens, which then power component tokens—creating a robust, future-proof system. With component variables layered in, teams can easily customize components without sacrificing consistency.
PRIMITIVE TOKENS
SEMANTIC TOKENS
COMPONENT TOKENS
COMPONENT VARIABLES
Consistent, purposeful application of color, type, and buttons across the interface.
Mixtape refined SoundCloud's foundations to deliver a consistent and intentional application of color, typography, and buttons throughout the interface. This purposeful design approach enhances visual hierarchy, reinforces brand identity, and improves usability, ensuring users have a seamless and cohesive experience across all touchpoints.
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.
Mixtape delivers SoundCloud-specific components while also allowing for design flexibility.
Mixtape offers numerous components tailored to the SoundCloud interface, enabling rapid building without limiting creativity. However, it also provides flexible subcomponents for custom builds, empowering designers to adapt and personalize the interface to diverse user needs while ensuring consistency and efficiency.
For example, while SoundCloud’s interface has limited custom dropdowns, Mixtape offers the underlying subcomponents, in addition to the three ready-to-use options. This allows designers to create unique, custom dropdowns beyond the standard, supporting more tailored and flexible designs.
Branding Mixtape as a unique product that honors SoundCloud’s identity and innovation.
An important (and perhaps my favorite) part of creating the design system was productizing and branding Mixtape. I prioritized a clear, consistent visual language throughout its documentation to highlight that, while built for SoundCloud, Mixtape is a standalone product in its own right.
Mixtape's brand identity (below) can be seen in its documentation as well as its UI kit, reinforcing Mixtape’s unique personality, ensuring a consistent and recognizable experience for all users engaging with the 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.
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. At first, we were a bit stunned—had all our work just been made obsolete? But that feeling quickly turned into excitement.
As you can see below, the new SoundCloud interface and our Mixtape designs look strikingly similar. Why? We believe it’s because both teams were solving the same core issues: making the interface more consistent, accessible, and user-friendly.
In the end, the update ended up validating our design principles and decisions—proving that clarity, consistency, and accessibility were the right focus all along.
While the new SoundCloud update is a major improvement over the old UI, we believe the platform could still benefit from a design system like Mixtape to further enhance consistency, scalability, and accessibility.
ORIGINAL SOUNDCLOUD UI
NEW SOUNDCLOUD UI
SOUNDCLOUD WITH MIXTAPE
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 fundamentally transform how a company works by uniting teams around shared principles, streamlining collaboration, and embedding consistency and scalability into the product process. While both design systems and UI kits are vital to design, they serve different roles and are not interchangeable.
Unlocking Figma’s advanced features 🫡
Diving into Figma’s advanced features was a pivotal part of this project. Learning how to leverage components, variants, auto-layouts, and interactive prototypes significantly boosted my design efficiency and workflow. This experience deepened my understanding of how powerful and flexible Figma can be when fully utilized, and it has set a new standard for how I approach design projects moving forward.
Organization means everything to a design system team 😅
In working on this project, I quickly realized that organization is absolutely critical for a design system team. Managing countless components, guidelines, and documentation requires clear structure and meticulous attention to detail. Without strong organization, maintaining consistency and enabling collaboration within the team becomes nearly impossible. This experience reinforced how vital good organizational practices are to the success and scalability of any design system.
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.