Why Design Systems?
Inefficiency, inconsistency and waste are common problems for companies with multiple product teams building and maintaining a portfolio of software products. The Design System provides software product design & development teams with the materials needed to efficiently build software.
It consists of Design Principles, Brand Specifications, Pattern Library, Editorial Guidelines and Code Library.
At projekt202, we’ve helped launch a number of design systems. They provide several tangible benefits — they enforce visual and interaction consistency, and let software teams focus on tough customer and user problems instead of the small stuff.
They also save time and money. Just by eliminating code redundancy, more than 20% of a developer's time can be regained. For a team of 100 developers, this means about $2 million per year. There are also substantial savings in the time spent on design, plus the sizable monetary benefits of having a consistent experience across all user touchpoints.
In short, they’re a solid investment and a great way to visually unite inconsistent experiences.
Foundations and Principles:
Guidelines that provide broader understanding of the UX to empower UI designers with parameters for making design decisions
Definitions for design elements that make the interface visually recognizable as a member of the company's product family
Instruction for composing the written word within the UI, including voice and tone to ensure a recognizably similar "feel" across software products
Standards and technical guidelines for implementing UI patterns and generally constructing the presentation layer of software products
Defined solutions to common user interactions, intended for reuse as component elements
where to start?
Brad Frost calls it an Interface Inventory. Nathan Curtis calls it a Component Cut-Up Workshop. No matter the name, it is a great first step toward getting the entire team involved and aligned. We start old school, using paper and printouts. With physical paper and tape, the whole team stays more engaged the whole time; it visualizes the need for consistency and absolutely drives home the value of the end goal.
- Provide a single source of truth for building UIs
- Save time and money
- Increase consistency
- Decrease maintenance
- UX teams focus on the experience; dev teams on implementation
- Improve user experience through well-defined and learned behaviors
A design system can help you when your products...
- Need to look and behave similarly
- Implement similar UI components
- Duplicate low-level functionality
- Must be white-labeled or themed
- Are built on different tech stacks
- Suffer from visual regression bugs
Software Design Systems Deliver Business Value, Direct ROI
Products get into market up to
50% faster when teams use
a managed set of UX resources
Reduce cost of software development teams by up to 20% over time
UX led software products
receive better NPS and reduce
customer support calls by up to 52%
What does the process look like?
#1 Identify components with a checklist
A simple checklist can quickly identify which components are essential to an organization.
#4 Design components from scratch
Rebuild each of your UI components, one at a time, from the ground up.
#2 Cut-up components from various interfaces
The cut-up gives visibility on how you are doing things today and the level of complexity a component needs to accommodate.
#5 Work closely with your team
For a design system to thrive and survive, it needs a sufficient level of management and organizational support.
#3 Lay a solid foundation for your components
Before you start designing components, you need to establish a base.
#6 development of code library
Having a design language for your teams to share ideas and quickly ideate is important, but having a shared code library will greatly increase your development velocity.
Managing Architect Drew Loomer gives an in-depth presentation on design systems in this new installment of projekt202's Thought Leadership series.
projekt202 Senior UX Designer Anne Grundhoefer and Solutions Architect Drew Loomer provide an in-depth, informative look at the many ways that design systems have significantly impacted the enterprise user experience.
Building a Design System
As with many things in life (and especially software), there are an almost infinite number of ways to approach building a design system. It’s impossible to say what is definitively “the right way” to structure such a project; what makes sense for Project X may be wrong for Project Y. But after running a number of programs with clients, here are what we’ve found to be effective guidelines for building a design system.