So, You’ve Heard You Need a Design System

What can you do when your product suffers from a lack of coherent, consistent design?

Inconsistent Design Hurts You and Your Users

Consistent, well-thought-out design is crucial for digital products. But often, design is perceived as mere decoration or aesthetics. Digital product teams tend to overlook how features visually relate to one another or how design patterns must evolve as a product evolves.

With no consistent design patterns, adding and evolving functionality over time becomes increasingly difficult. And without proper documentation, even good design inevitably loses consistency as products age and scale. User experience inevitably begins to crumble.

You may have an informal sense of things. Perhaps someone on the team has stored all the nuances of your design in their head. Things may be somewhat stable for now, but your product is doomed if the only person who understands the design leaves the team.

If you’re facing these challenges, you need a formal design system.

What is a Design System?
A design system is a documented repository of every visual component and pattern that forms a site, app, or software product. Each component or pattern is given a name, description, and usage guidelines. This includes visual principles like size, repetition, color, and spacing, all which communicate to users what is important, what they can interact with, and how to understand context or navigation.

The Crucial Ingredient

Design systems represent a crucial way to document and govern design, but they cannot replace the essential work of user experience design. Carl Sagan once famously said, “If you wish to make an apple pie from scratch, you must first invent the universe.” Atoms form the elements that make apple pies. Intentional, user-centered design forms the elements that make your digital product.

Ideal Starting Point

Creating an ideal design system requires an investment in time and effort from a team of UX professionals, designers, content strategists, and developers. In a perfect world, your team would do a major redesign, establishing clear, consistent patterns centered around your users’ needs and best practices. Design systems built on this solid foundation from the beginning document more than surface-level patterns. They help you drive great user experience.

Creating a Design System Today

Most teams are not positioned to begin a major redesign (or a redesign project is years away). Constraints exist, the world isn’t perfect, and sometimes you have to work with what you’ve got. You can still take steps to forge a solid design system.

Decide on format.

Design systems come in various shapes and sizes. Some are simple documents. Some are visual specifications. Mature systems go beyond visual documentation to offer front-end code for all components and patterns. Your system must work for your team and process.

Tour your product.

Before adding a new feature or making updates, tour your product and look for existing patterns you can reuse. Create an initial inventory.

Consolidate similar patterns.

Just because a feature seems new doesn’t mean it is fundamentally unique. You may discover (or painfully remember) that your product includes several slightly different patterns for the same task type. Pick the best pattern and, if possible, consolidate those that are similar.

Make a “Best-Of” document.

Use analytics to see where users interact with your site or app the most. Note interactions that work well (e.g., useful widgets, clear heading hierarchy, consistent tabs). Document the context and best uses for each of these successful elements. This is your initial design system list.

Identify missing elements.

Familiarizing yourself with your product’s existing design patterns and documenting the best parts will help you recognize what’s missing. Make a list of gaps or areas in need of improvement. You’ll notice how new or evolved patterns can address these needs.

Put it all in one place.

All patterns should be documented in one logical, easy-to-access place (e.g., a shared drive, internal website, team productivity tool). Remember, if your system only lives in one person’s brain, it leaves when they do.

Make Change Happen

A successful design system helps you control product evolution, expansion, and usability. It will save you future effort, budget, and headaches. It will help make onboarding a new team member far more efficient.

Following these steps will help you begin, whether you are wrangling an existing, unruly product or starting something new. You can create a design system that works for your team and helps you govern a coherent design, no matter what changes come your way.

— — — — — — — — — — — — — — — — -

About truematter

Our team has been doing the real work of user experience since the earliest days of the commercial web. We’re out to make your digital products a whole lot better.

Author: @djosephmachado
Graphic: @djosephmachado