Designing with Purpose.

‍What makes a design system great? That was the question I set out to answer, when taking on this assignment. In four weeks, I needed to tear down, analyse, and rebuild the foundations of a real-world product, SoundCloud. My goal? Not just recreate its components but to build a system that felt like an organic extension of the brand itself.

Navigating the Challenge.

‍My challenge was to reverse-engineer a design system from a fully developed product and present it in a clear and intuitive way. The assignment required the system to contain 12 icons for desktop and mobile sizes, a minimum of 5 foundational elements and a minimum of 5 components. However, I didn't just want to document UI components—I wanted to build an interactive system that could empower teams to design smarter and faster. This project was an opportunity to practice the principles of scalable design, learning how to break down an existing product into a structured, reusable framework.

Breaking Down the Best.

‍To build a design system that works, I broke down the industry's strongest systems. I analysed Mailchimp, Airbnb, and Luna, analysing and noting down what made them industry-defining. I took the elements that stood out from each to inform my own approach, Mailchimp’s clear and digestible documentation, Airbnb's impressive component library, and Lunas focus on the user’s experience. Then, I ripped apart SoundCloud's interface, dissecting fonts, spacing, and UI components. This reverse-engineering process gave me the blueprint for building a system that felt native to SoundCloud.

Piecing it Together.

‍Soundcloud isn't a one-size-fits-all platform. It serves two distinct groups, music creators and listeners, this is reflected in the accessibility of features across its mobile and desktop versions. Therefore, I had to ensure that my design system accounted for these different experiences and contained the elements seen in both platforms.The result? an engaging system that captured SoundCloud’s essence and brand, with a modern twist while maintaining usability and functionality.

Lessons Learned.

‍This project taught me a powerful lesson, a design system isn't just a set of UI components, it's a framework for how a product grows, bridging creativity with functionality. Even though this was a university assignment, it gave me hands-on experience in dissecting, analysing, and reconstructing a product’s framework—skills I’ll carry into every project moving forward.