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.
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.
[…] 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). […]
[…] 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 […]