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. 

 
Screen Shot 2017-01-10 at 8.40.56 AM.png

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 

Brand Identity: 

Definitions for design elements that make the interface visually recognizable as a member of the company's product family 

Editorial:  

Instruction for composing the written word within the UI, including voice and tone to ensure a recognizably similar "feel" across software products 

Code:   

Standards and technical guidelines for implementing UI patterns and generally constructing the presentation layer of software products 

Pattern Library:  

Defined solutions to common user interactions, intended for reuse as component elements 


“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 around $2 million per year.”
— projekt202 Managing Architect Drew Loomer

where to start?
component workshop

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.

➤ Read more about running a component workshop

1.jpg

key benefits

  • 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

50%

Products get into market up to
50% faster when teams use
a managed set of UX resources

20%

Reduce cost of software development teams by up to 20% over time

52%

UX led software products
receive better NPS and reduce
customer support calls by up to 52%


“It can do wonders to convey the business value and the long-term production value of a design system. Not only does it give design teams more flexibility and time for critical thinking in the long run, but it works to enforce consistency throughout product suites.”
— projekt202 UX Designer Adam Zeiner

What does the process look like?

Screen Shot 2017-01-10 at 9.27.46 AM.png

#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.

Screen Shot 2017-01-10 at 9.27.55 AM.png

#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.

Screen Shot 2017-01-10 at 9.28.00 AM.png

#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.


Video Series

Managing Architect Drew Loomer gives an in-depth presentation on design systems in this new installment of projekt202's Thought Leadership series.

Watch Now

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.

Watch Now


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.

➤ Read more about building a design system


Anne Grundhoefer
projekt202 UX Designer
Design Systems Presentation @ Front Porch Conference