Design systems and why they matter
As a UX/UI design studio, we understand that the concept of design systems can be confusing or unfamiliar to some. However, we firmly believe that they are essential and contribute significantly to successful product design. We often receive inquiries from individuals or companies about what design systems are and why they are necessary. Surprisingly, some of these inquiries come from tech startups that already have a product in the market or software development and marketing agencies that fail to allocate sufficient time and resources to develop design systems for their projects.
At times, this lack of understanding can lead to inadequate design outcomes. At our studio, we value education and strive to create an environment that fosters understanding for all our clients or stakeholders involved. We believe that by shedding light on the importance of product design and all its interconnected parts, including design systems, we can help others make informed decisions and ultimately create better-designed websites and applications.
What is a design system?
A design system comprises a set of rules, a collection of reusable design components, and digital assets that aid designers and developers in creating consistent, high-quality digital products. It accomplishes this by breaking down complex designs into smaller, reusable parts that can be combined to create larger design patterns and interfaces.
Think of a design system as a Lego set. To build the iconic Star Wars Millennium Falcon, you would need all 7,541 pieces. Each piece has a specific design and intention, and a single Lego piece contributes to a smaller section of the end product. Eventually, all the sections come together to form the masterpiece. Similarly, a design system ensures consistency and brand identity across different products and platforms, while saving time and reducing errors. It is scalable and can grow and evolve over time to remain relevant and adaptable.
In addition to improving consistency and efficiency, a design system can also enhance collaboration and communication within a team. By having a shared set of design guidelines and components, everyone in the team can work together more effectively, reducing misunderstandings and increasing productivity. It also allows for a more streamlined design process, with designers and developers working together and in harmony to create products that meet the needs of the users and the business while adhering to brand standards. Ultimately, a design system is a valuable tool for any company looking to create and maintain a strong digital product.
What are the benefits of a design system?
A design system has a number of benefits for digital products, including the ability to create consistent and exceptional user experiences across multiple products and touchpoints. Design guidelines serve as a single source of truth for a brand’s design language, and predefined solutions to common design problems can be included. Other benefits of design systems include:
- Consistency: Design systems ensure that all digital products adhere to a brand’s design language, resulting in consistent experiences across products and platforms.
- Efficiency: By breaking down complex designs into smaller, reusable components, designers can save time and reduce unnecessary work, speeding up the design and development process.
- Quality: With predefined solutions to common design problems, design systems ensure that digital products have a higher level of quality, providing a better user experience.
- Collaboration: Design systems encourage collaboration and communication among team members, allowing for a more streamlined design process and reducing misunderstandings.
- Trust: By creating a consistent and recognizable visual language, design systems help strengthen a brand’s identity and build trust with users. Consistent branding also helps create a sense of cohesion and familiarity across different products and touchpoints.
What makes a good design system?
A good design system is one that provides a consistent and cohesive user experience across all digital products and touch points of a brand. It should be modular, scalable, and easily understood by all team members involved in its creation and use.
The design system should include an overview that outlines what’s included and the values and principles that went into its creation, as well as a foundations section that covers the fundamental design elements. Components and patterns sections provide the building blocks and pre-built UI elements, respectively, with clear instructions on how to use each one.
Additionally, a branding guidelines section ensures consistency across multiple touch points, while a content guidelines section provides standards on tone, voice, and other considerations for content. Finally, a good design system should include a library of resources, such as design assets, code repositories, media kits, and templates.
Design system examples to follow
An effective approach to learning about design systems is to examine relevant and real-world examples. Companies with a strong emphasis on product design have established benchmarks for creating efficient and scalable design systems. Analyzing each example can offer valuable insights and lessons on how to implement design systems effectively in-house or what to anticipate when working with a UX/UI design studio’s services. Here is a short list of some inspirational design systems:
1. Mailchimp Pattern Library
Mailchimp, the go-to email marketing platform, created its design system using a simple and straightforward approach. The Mailchimp Pattern Library drops users right into the foundations section of the library, where they introduce the color scheme, data visualization, grid systems, and typography. They then cover the rest of the library, such as buttons, form elements, and navigational components, in a simple but effective way. The design system is at a small scale but lays the foundation for designers and developers.
2. Wise Design
The Wise Design System is a comprehensive and exciting framework for creating consistent and high-quality digital products for Wise, a global technology company specializing in international money transfers. It focuses on simplicity, efficiency, and accessibility and provides guidance on typography, color schemes, icons, and illustrations. The system is scalable, adaptable, and flexible, supporting assistive technologies. By following the system’s guidelines and best practices, designers and developers can create consistent, high-quality digital experiences that align with Wise’s brand identity and values. Wise has also created engaging interactions to bring their design system to life and showcase their brand personality.
3. Shopify Polaris Design System
Shopify’s Polaris Design System was created to ensure consistent user experiences for merchants on its e-commerce platform. It includes fundamental guidance on visual styles, reusable components, named design tokens, and interface icons. The system covers every possible component within the Shopify admin application, offering guidance on illustrations, data visualization, spacing, and other important components. Accessibility is central to Polaris, and its core principles include universal design and inclusivity. The components ensure WCAG compliance and support assistive technology, such as screen readers and support for low vision and color blindness. Shopify provides a component UI kit and style libraries for designers and coded React components for developers.
4. Atlassian Design System
Atlassian’s Design System is a comprehensive framework that covers color, typography, content, brand, and iconography, built around the company’s clear design principles. It was developed primarily for internal use but showcases a balance between smaller company systems like Mailchimp’s pattern library and larger organization systems like Carbon and Material. The Atlassian design system is extensive and filled with various resources, but each component is carefully crafted to align with the company’s brand.
5. Material Design
Google’s Material Design was one of the earliest design systems that helped establish the concept. Material Design emphasizes interfaces that mimic the physical world’s light, shadow, and texture to create familiarity and predictability. It is now one of the most comprehensive open-source design systems, covering color, shape, typography, and animation, and extending across the web, Android, and Flutter. Material also offers extensive theming capabilities, allowing designers and developers to customize the design to fit their brand.
“I recommend that all companies develop design systems: a formalized set of guidelines that help ensure consistency, clarity, and efficiency in all aspects of design. They make it easier to design better products, and to update and improve those products over time.” — Don Norman, Design Professor and Author.
The takeaway
Design systems come in all shapes and sizes, each created with a specific purpose in mind. But what sets them apart is their focus on making things easier and more consistent, while ensuring a great user experience. Companies should allocate time and effort to getting the foundations of implementing design system appropriately in order to see a positive return. Starting with one piece at a time in a systematic manner will ultimately create a masterpiece of a digital product.
Refresh Studio is a Johannesburg-based UX UI design studio. We believe exceptional product design comes from the intersection of creativity, technology, and human-centricity. Our team brings a unique and holistic approach to every project, delivering innovative interfaces that enhance user experiences and drive business success.
Contact us at hello@ctrlr.studio
