decorative

Why Your Organization Needs a Design System

Design systems, such as Google’s Material or Shopify’s Polaris, are quickly becoming a popular way for organizations to create consistent designs efficiently. So what exactly is a design system?

A design system is a collection of reusable code components, accompanied by documentation and standards, that can be leveraged to build your organizations’ applications.

If you’re working on an established product, chances are you’ve encountered the design creep that happens when teams are working on different parts of the product. Audit the design of your product, and you’ll likely find 10 different shades of grey, a couple of variations on your primary call-to-action color, and three or four different versions of a hover state. That design inconsistency creates problems for your teams and your users over time.

Design System vs. Style Guides

Established brands like Skype and MailChimp have style guides that articulate the look and feel of the brand standards, but they have found that style guides only go so far. A style guide is a static document outlining the rules for use of logos, typography, photography, and copy so that all marketing materials look and feel like they come from the same brand. They evolved from old-school, print-based marketing, and relying on them to deliver a consistent digital experience almost immediately presents problems for organizations with multiple design teams. A style guide will give your designers a framework for creating the look of your brand, but it falls short in describing the feel of your experience. Style guides cannot address inconsistent design pattern usage such as conflicting side vs. top navigation, breakpoints where a mobile experience switches to a desktop one, or how to handle error messaging on form fields.

Drawbacks of Relying on the Style Guide

When your team isn’t using a design system, each dev team is creating the component fresh for their application. Code is inconsistent, leading to code conflicts over time and a sacrifice of design consistency. Over time this builds up and becomes tech debt and design debt. This all-too-familiar situation leads to:

  • Feature time to market is too slow, creating missed business opportunities
  • Time estimates are off because what looks like a simple project has hidden complexities
  • Projects end up over budget or never delivered at all because the cost of development is too high
  • Features are cut, leading to a poor user experience
  • Brand image is fragmented from inconsistent UI and UX patterns being used, leading to compromised brand loyalty and a perception of the experience being “broken”
  • Poor user experience leads to low user satisfaction, adoption, and loyalty
  • There is no governance of new design patterns so they are used whenever a designer wants to try something new, leading to further fragmentation of brand
  • Accessibility suffers; the experience is not a unified one for anyone using accessibility supportive devices, and the product is unusable or a poor experience

The difference between a static style guide and a design system is summed up nicely in this graphic by Adam Zielonko.

Style guide side: Style guides are built at a certain point in time of a project's lifecycle. After that point, as the project is getting bigger, the style guide remains outdated. This is called the design debt. 
Design Systems: 
As the product grows, the design system is updated on an ongoing basis. There is a certain point in time when the design system is created, but further on its volume follows the development. This approach strongly reduces the design debt, as in consequence allows companies to save time and money.
style guides vs design systems chart

Benefits of a Design System

Whether you choose to leverage a commercial design system like Material or build your own in-house. There are many benefits to adopting a design system.

  • Faster time to market means less missed opportunities
  • Aligned design teams means more consistent designs
  • Reduced cost of design and development with cleaner code and fewer bugs
  • Increased employee retention as more time is spent on high-impact feature innovation and less on menial pixel-pushing
  • Improved teamwork and collaboration between designers and developers
  • Improved brand presence and user experience leads to increased brand loyalty
  • Improved talent acquisition and retention. When an organization has a design system they are signaling to designers and developers a commitment to quality products
  • Accessibility can be baked into the product, resulting in extended market reach and less potential for lawsuits
  • Agile ready. A component library supports agile transformation.

Still Not Convinced?

If you’re still on the fence about the value of implementing a design system in your organization, consider the following three case studies:

IBM’s Design Thinking Practice has brought them:

  • 301% ROI (return on investment)
  • cost-savings of $20.6 million
  • 2x faster time-to-market
  • 75% reduced design time
  • 33% reduced development time

Anja Klüver of Prospect used history product data from their client base to demonstrate the cost savings of implementing a design system:

  • 10-30% increase in conversions
  • 10-30% increase in brand loyalty among users
  • Products 2-3x faster to market
  • Up to 50% reduction in future managed costs (by not requiring A/B testing after launch to refine UI)
  • Up to 25% increased product development efficiency & efficacy
  • Teams were up to 25% faster at producing functional prototypes
  • Overall, a savings of €2,620,277 when redesigning clients’ 10 web and 15 mobile applications

In her talk for UX Crunch, Lily Dart, the manager of the Constellation design system for the Lloyds Banking Group reported their system saved the company ~£3.5mil (in design and development costs) between June and December 2018 across the projects which used it.

2 Comments

  1. […] A UI Designer typically collaborates with a UX Designer, the Product Owner, a Scrum Master if their team has one, and the development team to come up with the user interface design and the interaction patterns. They may leverage a design system to increase their efficiency and preserve their sanity (see this article on why your teams should use design systems). […]

  2. […] a high value to users, but unless they have experience or training in developing products (or a design system to pull from) they inadvertently can create problems for their developers when they try out cool or […]

Leave a Reply to The Difference Between UX and UI – Aimée Danger Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.