Did you know that, according to the 2017-2018 UXPin Design Industry Report, 67% of companies are either using a design system or are in the process of building one? Design systems function as an ever-evolving central source of truth. They instill order, enable consistency, and improve efficiency. As of recent years, they are becoming the rule rather than the exception.
To gain a better understanding of what the final product looks like and how it functions, here are eight of the top design systems from industry leaders such as Shopify, IBM, and Atlassian.
- Why each company built a design system
- How each design system works
- The impact each system has on business
Lets get started!
Driving factors: Atlassian needed to:
- Increase efficiency
- Scale work across multiple products
- Create design consistency
- Answer redundant questions once and for all
The design system: The first version of the Atlassian Design Guidelines (ADG) was released in 2012. Now, six years later, the company has a dedicated ADG team of 18 full-time employees that continuously work on it.
The system is composed of design patterns, code components, and a library of UI assets in Sketch. Additionally, the ADG website describes the logic behind each of the choices. As for the feel, Atlassian’s upbeat, resourceful, and friendly personality shines through. It is colorful, informative, and easy to understand.
The result: Atlassian’s ADG has been through several years of refinement and is one of the best examples of a design system out there. Further, it has helped Atlassian achieve the goals above and is continuously reaching new levels of efficiency.
Driving factors: IBM aimed to:
- Create a living design language that captures their brand
- Modernize and unify offerings
- Provide flexibility so product teams can still tailor to the needs of specific audiences
The design system: The IBM Design Language is a living language that provides a library of assets including animations, iconography, colors, reusable code, and much more. The system is approachable with a user-friendly layout and a warm tone. Users can get a solid understanding of the design expectations as the system shows each asset and explains the reasoning behind it.
The result: IBM engineers and designers are able to work faster and have created a unified UI. The guidelines enable product teams to customize experiences while staying in line with the brand.
Driving factors: Material Design wanted to:
- Create a visual language for users that brings the classic principles of good design together with the innovation of technology and science
- Unify user experiences across all devices and platforms
The design system: The system Material Design created is in the form of a living document which outlines the details of its visual language. It includes many sections including principles, motion, style, layout, components, patterns, and more. It’s tone is straight-forward and technical.
The result: Users of the system have the tools and resources needed to create a unified UI.
Driving factors: Shopify desired to make its building blocks more:
The design system: The system is named Polaris because it serves as Shopify’s North Star, guiding employees and company partners to their destinations. Similar to how Polaris (the star) remains almost motionless in the sky while the other stars rotate around it, Shopify’s design system serves as a fixed point that orients how all work is done.
The company takes a very thorough approach to the system, opting to explain the why in addition to the what and the how. There are in-depth sections on color, typography, user experience design, and content.
Overall, the guide does a great job of communicating the way Shopify believes products should be built. It’s practical, presented well, and provides logic that supports each choice.
The result: Users understand the reasons behind the decisions which empowers them to consistently apply the variations of each component. The result is an increase in consistency and efficiency in designs.
Driving factors: Airbnb has exploded over the past decade and needed a more systematic approach to its design process. It wanted to:
- Establish an iconic visual language
- Create a common unified language that could cross disciplines
- Speed up the design and build process
The design system: The company already had a style guide called “The Foundation” which was used as the starting point. It loosely defined colors, icons, spacing, typography, and information architecture but was lacking.
The comprehensive system was built of components which the company says are like elements of a living organism. A set of properties defines each component, and each has a personality and function. They can work with other components or evolve on their own, and all are part of a larger evolving ecosystem. In the guide, users learn about each of these components and how they function as part of the larger whole.
In the process of building the system, Airbnb also integrated internal and third-party tools. For example, the React-sketch app which is an open source library that lets you write React components that render to Sketch documents.
The result: With the design system in place, Airbnb is able to speed up development. Engineers are able to focus on writing the feature logic rather than the view code, and it enables faster prototyping and experimenting at a lower cost.
Driving factors: Salesforce wanted to:
- Enable the creation of user interfaces that were consistent with the Lightning design language, best practices, and principles
The design system: The Lightning design system is an open source project focused on building business apps. It provides a comprehensive guide to the company’s design preferences which include guidelines on various platforms, accessibility, UI components, UI patterns, utilities, design tokens, and more. The system covers a great deal of information and takes a professional, straight-forward tone.
The result: Developers can use the design system to create apps that fit seamlessly into the Salesforce ecosystem. Further, it enables a unified user experience across otherwise disconnected pieces of enterprise applications.
Driving factors: Trello needed to:
- Improve consistency
- Align team members
- Increase efficiency in company designs
The design system: Nachos is Trello’s design system. Why Nachos? Well, to be fun and delightful (like Trello) and because they simply love nachos. As you might guess, the light approach doesn’t end with the name. A friendly and playful voice guides the reader throughout the entire system.
The company took the time to sit down, define, and refine their principles. This helps anyone who reads the guide to identify what is “Trello-y” and what’s not. Additionally, descriptions answer the what, when, where, why, and how about style and components.
The result: The system keeps the entire Trello team on the same page at all times. As a result, they can work faster while collectively strengthening the product.
Driving factors: Firefox wanted to:
- Speed up the creation of enjoyable and recognizable Firefox products and features
The design system: Photon helps users work more efficiently while making Firefox’s products more consistent. It includes reusable UI components, templates, and guidelines.The voice and tone are very friendly and helpful, making the guide easy to read. Further, it is clear, concise, and offers logical explanations for each decision.
The result: The system has successfully streamlined the process of creating Firefox products.
How Can a Design System Help Your Business?
As you can see, each of these companies reached a point where their prior design processes were failing. Inconsistencies were slowing growth and causing confusion. It’s near impossible to create a unified UI and consistent presence without a central source of truth. By implementing a design system, you can streamline design and development and enable effective scaling.
At Brightscout, we have been helping an increasing number of companies to create these design systems. Our team of experts has experience with the process of analyzing a company’s design process and will walk you through each step toward a fully implemented design system. To learn more about how we can help you, click here and drop us a line today.