Design systems are a single source of truth. As an organization matures and product development becomes more diverse it becomes difficult to maintain consistency.
The design system supports the product development teams by serving as a reference and creating consistency.
How does a design system help?
Imagine an organization that has two product development groups. Both products share similar goals but are for different platforms. One is web-based and the other is an iOS app. Ideally the look, feel, and behaviors of the two products would be nearly identical. If a new user signs up for an account using the web-based product and installs the application on their mobile device, the experience should be very similar.
Unfortunately this is not always the case. You may have experienced this with an application you have used in the past where you go to the website on your phone and sign up but then install the app and the experience falls flat. There’s a disconnect between the design of the web experience and the design of the mobile app.
Design systems help organizations address this problem by creating a digital set of brand standards in both design and code to support the product development teams.
Examples of design systems
One of my favorite resources to draw inspiration from when creating a new design system is http://styleguides.io/. You can look at design systems and pattern libraries created by IBM, Salesforce, and MailChimp and many others.
Atomic Design by Brad Frost helped to pioneer the approach to building design systems. Brad’s book explains the methodology of crafting small elements to build components, followed by templates and pages.
Design systems support
- Efficiency
- By reducing design and user interface rework
- By having well documented guidelines
- By having well-tested components and introducing fewer bugs
- Consistency
- By creating visual cohesion
- By defining reusable elements
- By sharing common patterns
- Productivity
- By reducing design and development effort
- By being easy to navigate and understand
- By increasing development velocity
Challenges introduced by design systems
Introducing a design system to your organization isn’t all roses. There are bumps along the way. Some of the difficulties include:
- Integrating with existing internal systems and applications
- Team agreement on the development approaches and paradigms
You might not need a design system
- If you’re a sole design/developer working on a handful of different websites or applications
- If you are a lean startup with a small independent team
Design systems begin to show their value as an organization matures. As companies scale, the importance of keeping applications consistent becomes more important. Ideally the organization implements a design before it realizes the need for one.
When using a design system you spend less time
- Ensuring elements, fonts, colors, button types, are on brand
- Creating responsive layouts and interactive behaviors
- Testing for ADA compliance and accessibility
You’re increasing the product development team’s efficiency by requiring less effort to design the user interface. Most of the design thinking is addressed by the design system. The development team can focus on more technical tasks like wiring up data.
Creating and maintaining a design system is a wise choice for product development companies.