A Quick Guide to Understanding Design Systems

“A style guide is an artifact of design processes. A design system is a living, funded product with a roadmap and backlog, serving an ecosystem.”

~Nathan Curtis, Eightshapes

 

“A design system (as it pertains to tech products) is more than a framework, UI toolkit or component library. It’s more than a style guide or set of code guidelines. It’s even more than the sum of those parts. A design system is an evolving ruleset governing the composition of a product.”

~ Colm Tuite, Modulz

 

The journey towards building a design system begins after a company knows it’s vision, mission, and culture.  There should be alignment in understanding how products should function, look, and feel.  Once these factors are well established, it is the task of the design system to curate the feel and function of these products.

 

Why do we need Design Systems?

“Like any project that involves UX, design systems must solve people’s pain points, like being able to find the right pattern under deadline pressure.”

~ Ben Gremillion, Content Strategist

 

“A unified design system is essential to building better and faster; better because a cohesive experience is more easily understood by our users, and faster because it gives us a common language to work with.”

~ Karri Sarrinen, Airbnb

 

In his article “Building a Visual Language:  Behind the Scenes of our new design”, Airbnb Design Lead Karri Saarinen argues that design systems are key to ensuring a seamless user experience. Saarinen finds that there are too few constraints on product owners and designers.  While this proves great for innovation, it presents as a problem when trying to deliver consistent user experience.

 

Saarinen also warns that user experience can naturally become disjointed as a result of the individual contributions of a multitude of software designers and stakeholders who influence the resulting product.  This issue, he emphasizes, is further compounded when adding in the need for consistency across a variety of digital devices, platforms and products.  

 

Reflecting on his own design system launch, Nick Stamos, Creative Lead at WeWork, also identifies common pain points for a team of designers, developers and product owners.  For example, having a feature such as a dropdown menu that behaves and looks different in various instances.  In this instance, “Developers hate reinventing the wheel. Product managers hate inconsistencies.”

The Value of Design Systems

“A design system can create value on at least two levels. At the team level, it can create a more streamlined, predictable process that reduces design and engineering time. At the UX level it helps deliver consistency and predictability in the interface, and to raise the quality of the experience overall when designers and engineers are freed up to think about higher-order tasks.”

~ Nick Stamas, Creative Lead, WeWork

 

“The more decisions you put off, and the longer you delay them, the more expensive they become.”

~ Craig Villamor, VP Product Experience, Appdynamics

 

In their handbook “Why Build a Design System:  The Pocket Guide for Product Teams”, authors Marcin Treader and Jerry Cao argue that design systems are the single source of truth.  “A design system is more than just a style guide or pattern library – it’s the blueprint for product development. All the design principles, visual assets, and patterns are thoroughly documented. All code references are included for each piece of design. As a result, design can scale right alongside development.”

 

This ability to scale design with development directly impacts a company’s ROI (return on investment).  According to Treader and Cao, the ROI of design systems leads to increased velocity and time to market, increased product value, as well as increased collaboration and knowledge.  Essentially developing reusable components shared among designers and developers increases efficiency and consistency.   Finally, less time spent on development means less money wasted.  

 

Principles of a Design System

“A system’s value is realized when products ship features using a system’s parts.”

~ Nathan Curtis, Founder of UX firm Eightshapes  

 

“Here’s the simple truth: you can’t innovate on products without first innovating the way you build them.”

~ Karri Saarinen, Design Lead, Airbnb

 

A design system is a living entity that is only innovative insofar as it supports efficient and rapid product development.  This requires a fresh way at looking at design and development innovation.  According to Nathan Curtis, this goal will be realized when design system teams commit to the following principles:  

  1. Systems solve the easy problems so products can solve hard problems more easily.
  2. Include what’s shared, omit what’s not.
  3. Products own their destiny, systems equip them to realize that destiny.
  4. Favor community over control.
  5. Favor elegance of simple things over flexibility of complex things.
  6. Make documentation first as a tool to use, then as pictures to show, then – if needed – as words to read.
  7. Measure success on dependency.
  8. Favor quality over quantity.

 

Jina Anne, UX Lead at Salesforce, stresses that it is imperative to drive design system decisions with design principles.  Over the course of several workshops taught on design systems, Jina Anne has found that design systems tend to have very similar design principles that the team uses to focus development:

  • Clarity:  Eliminate ambiguity.  Enable people to see, understand, and act with confidence.
  • Efficiency:  Streamline and optimize workflows.  Intelligently anticipate needs to help people work better, smarter, and faster.
  • Consistency:  Create familiarity and strengthen intuition by applying the same solution to the same problem.
  • Beauty:  Demonstrate respect for people’s time and attention through thoughtful and elegant craftsmanship.

 

According to Jina Anne, “Anytime you come up with a list of principles, you want to put them into a priority order.  It’s really important to find out what that order is, kind of like an order of operations. This is going to be what gets you to a design decision much faster.”

 

V2MOM:  A Tool for Alignment

“Essentially, V2MOM is an exercise in awareness in which the result is total alignment. In addition, having a clarified direction and focusing collective energy on the desired outcome eliminate the anxiety that is often present in times of change.”

~ Marc Benioff, CEO Salesforce

 

For the purposes of ensuring alignment across the various levels of an organization it is useful to engage in the V2MOM exercise.  Being that Design Systems are about reflecting alignment, it is vital that an organization itself be able to articulate the alignment employees are seeking.

 

The V2MOM exercise includes answering the following questions:

  • Vision:  What do you want to do?
  • Values:  What’s most important about that vision?
  • Methods:  How do you get the job done?
  • Obstacles:  What challenges, problems, issues stand in your way?
  • Measures:  How will you know when you’ve succeeded?

 

Jina Anne, UX Lead at Salesforce, says that every year each of the employees at Salesforce publishes their V2MOM exercise, and that it was a key part of the process before implementing the design system structure and to ensure its success.  

Design System Workflow

“… a defined workflow helps a team mutually understand the scope, reviewers, tools, and the definition of done at each step. With a workflow, collaboration tightens, delivery quickens, and the team predictably delivers features that products love.”

~ Nathan Curtis, Eightshapes

 

A successful design system will have a process or workflow that it follows in order to be effective.  Curtis suggests that members of a design system team should create visual style, UI components, documentation tooling, and UX patterns by implementing the following steps:  discover, design, build, documentation, and publish. Each of the steps encompasses a specific goal for the design team.  

 

Discovery allows the team to determine the feasibility and potential of a feature.  The design phase establishes variations and states at high fidelity for visual style, UI components, or documentation. The build process relates to the development of html, css, and any specific framework language for specific features or styles, and is checked to be sure that it is clean and dry code and that it adheres to the design system’s code styles and conventions.  Documentation is created to assist any user of the design system to ensure they have “sufficient design guidance (use when, behaviors, visual style, content, & more) and code specs (reference tables, variables, code/example demos) to use the feature correctly.”  Finally, the publishing phase embodies the process of migrating finished documentation to the publishing platform.

The Design System’s Design

“Remember that design systems are living products that need as much design polish as the projects they support. Their UX is just as important as the projects they support, especially when the team using it is under pressure to get the job done. Making a system usable will encourage people to use it often — and keep using it appropriately.”

~ Ben Gremillion, Content Strategist

 

Clear design systems follow the basic rules for good web design as well as incorporating their own unique aspects. These traits are pulled directly from Ben Gremillion at UXPin:

  • Uncluttered: Visual design systems work best without added decoration that detracts from the components they present.
  • Consistent: Don’t make people guess what various icons mean in different contexts.
  • Accessible: Good design systems work well across a variety of browsers, screen sizes, and interfaces.
  • Hassle-free to edit: The right people shouldn’t have a hard time making appropriate updates as needs arise.
  • Versioned: Is this component off-brand, or out-of-date? Dating or numbering patterns will help you keep things current.
  • Available: Your stakeholders, if not the general public, need an easy way to reference the design system online or in print.

The Impact of a Design System

 

UX firm projekt202 believes that there are specific and measurable impacts of a company having a design system:

  1. Easily accessible foundational resources results in increased speed to market with product iterations and new product concepts. “When teams work from a common foundation, their effectiveness becomes measurable.”
  2. Efficient workflows allow designers time to differentiate their products from others on the market.  “The Design System allows designers and developers to focus on workflow, ease of use, and future features rather than re-innovating button styles for every product.”
  3. Product experiences can evolve in a unified way as the design system fosters brand awareness and design functionality. “Different product teams are able to remain in sync while working independently.”
  4. Customers benefit from having a unified ui/ux experience.  “Reduced customer support dependency = reduced customer support costs.”

 

As mentioned previously, the design system can solve myriad pain points between the designer, developer, and product managers.  The result is better productivity and teams that are confident and able to build efficiently, without spending too much time on foundational features and elements of products.