Project Overview
Project Context
Design systems are created collaboratively, with designers contributing to pattern and component libraries. These systems reduce design debt, accelerate the design process, and build bridges between teams.
Timeline
4 week project
Team
Solo project
Role
UX Research, Product Design, UI Design and Information Architecture
The Challenge
To gain a deeper understanding of how websites are built and to understand the intricate details of why and how components are designed, we were tasked with creating a design system for an existing website, software, or phone app. The design system required recreating 12 icons for desktop and mobile sizes, a minimum of 5 foundational elements and a minimum of 5 components.
The Result
I designed an interactive, web-based design system for SoundCloud that streamlines the design process while ensuring a consistent and intuitive user experience.This comprehensive system details core design principles, visual language, and a library of reusable UI components. It covers fundamental aspects like colour, iconography, language, shapes, states, typography and common UI components (buttons, carousels, inputs, modals, sliders, and tags).
Key Takeaways
Design for evolution
Design systems are living documents. The need to constantly adapt and grow alongside the product, accommodating new features, technologies and user needs. This project highlighted the importance of building a system with this adaptability in mind, ensuring its continued relevance and effectiveness.
More than aesthetics
A design system goes far deeper than the appearance of components. By providing intricate details like padding and margins, it creates a for teams from different disciplines. This shared understanding empowers designers and developers to work seamlessly together, leading to a more consistent product.
Focus on the user
It is important to design for the user when creating a design system, as the system must be navigable to be useful. Clear components, interaction models and information architecture ensure the system is not just appealing, but also navigable and user-friendly.
Designing the Solution
Desk Research
To understand what makes a successful design system, I researched several well-established examples. I focused on Mailchimp, Airbnb, and Luna, analysing how they communicate complex design information effectively. I integrated Mailchimp’s clear and concise documentation, Airbnb’s strong component library and then Luna’s focus on user experience. Using these concepts to develop my own design system.
Website Audit
To ensure my design system aligns with the existing Soundcloud website, I conducted a thorough website audit, dissecting the user interface and extracting key design elements. Using the inspect tool, I was able to understand the header hierarchy, identifying the font families used, and analyse the padding and margins used for spacing the various components. This audit provided me with a foundational understanding of a websites structure and design language.
Lo-fi Design
Recognizing that SoundCloud caters to both music creators and listeners, the platform's design varies between desktop and mobile versions. To create a familiar and consistent aesthetic for users accustomed to the desktop experience, I focused my lo-fi design system for the desktop view, as it is the most recognisable version of Soundcloud and creates a familiar feeling for the user.
Final Concept
The goal was to create a design system that effectively displayed the intricate details of SoundCloud’s platform and allowed a user to easily understand the details of the platform.
Project link
01.
User interactions
Interactive elements provide clear visual cues about their states, helping the user to understand how the interaction works within the platform.
02.
Colour consistency
The design system shares the same colour palette as SoundCloud to ensure consistency in appearance and design.
03.
Side navigation
The side navigation allows users to easily browse and access each topic of the design system at any point of the system.
Reflection
Future Considerations
Navigational Effectiveness
Usability testing would assess the clarity and ease of use of the design system's navigation. This would involve observing users as they interact with the system, identifying any pain points or areas of confusion.
Comprehensiveness
Testing would also explore user understanding of the provided design details. Uncovering any areas where the details lack clarity or require further explanation.
Key Takeaway
Understanding what makes a design system successful was a key skill acquired. This involved focusing on core principles like usability, comprehensiveness, clear communication, and maintainability. This knowledge gave me the ability to create a design system that is not only functional but also user-friendly and adaptable.
Secondly, I gained the ability to deconstruct the intricate details of websites. This skill proved invaluable in understanding the existing design language of SoundCloud, therefore allowing me to build a more detailed design system.
