AURORA is a global music distribution platform needed a cohesive design system to unify its digital interfaces and elevate user engagement.
By combining research-driven insights, strategic planning, and creative execution, I crafted a design system that ensures consistency, enhances usability, and supports the platform's growth. This solution enables the brand to better connect with its audience and streamline its digital operations.
While designing AURORA’s platform, I encountered a major challenge—inconsistencies between my designs and the live application. I suspected that developers might be using different or outdated assets, leading to misalignment.To validate this, I conducted a site audit, which confirmed my concerns—there were multiple variants of buttons, badges, and other UI components. This lack of standardization resulted in design inconsistencies, inefficiencies, and a fragmented user experience. It became clear that AURORA needed a scalable, unified design system to ensure consistency and streamline the design-to-development workflow.
Creating a design system for the first time was both exciting and overwhelming. At the start, I had no clear direction on how to structure my components or ensure consistency across the platform. I knew I needed a solid foundation, so I turned to the best in the industry—LINE, Wanted, Uber, and Tidal—whose design systems were publicly available.These systems were massive and highly sophisticated, crafted for large-scale products with diverse use cases. While they offered valuable insights, they were more of an inspiration than a step-by-step guide. Realizing this, I broadened my research to platforms more aligned with AURORA’s needs, such as YouTube Music, Spotify, Melon, and LANDR, which balance both PC and responsive designs.From these references, I gained a deeper understanding of component scalability, cross-platform consistency, and UI adaptability. I observed how these platforms handle typography, spacing, and interactive elements, ensuring a seamless experience across different screen sizes. These insights helped me shape AURORA’s design system to be flexible, structured, and optimized for both designers and developers, making collaboration smoother and more efficient.
To bridge the gap between designers and developers, I collaborated with a front-end designer, ensuring that the system was built with both design consistency and development efficiency in mind. We incorporated design tokens, CSS class names, and code snippets directly into the Figma file, making it a single source of truth for both teams.
To further enhance usability, I also created a comprehensive design system guideline. This document outlined best practices, component usage rules, spacing, typography, and accessibility standards, ensuring that both designers and developers had a clear reference when working within the system.
