Learn how to build, pilot and grow a Design System
What
A Design System is a library of reusable coded AND uncoded components used at the presentation layer for a brand's application/product and or marketing communication materials. A component library contains common Design Patterns, e.g., slideshows, email sign-up, top navigation, etc. These Design Patterns have Atomic elements, e.g., buttons, color, type, imagery, etc. User Stories are the call to action for when and where to use these components. Grid systems hold these components together as part of a page layout(s) within a User Flow.
Why
Why Design Systems? Over time as a company scales, so does its visual footprint. With more marketing campaigns and products shipped, an unstable foundation can form—this can happen when a single unified source of truth for your Design Language doesn't exist. Inconsistent interpretations and executions of a brand and/or product's Design Language can occur, creating Design Debt.
By lowering design debt, developers can spend more time on application logic versus interpreting pixel-perfect designs. And designers and writers can focus on marketing strategies, and user flows instead of creating new designs from scratch.
How to do it
Step 1. Do a component inventory
Review the existing components to determine where irregularities exist within the visual language.
Step 2a. Complete a component audit
Knowing what components to keep and what to remove needs a combination of design expertise and shared objectivity. The need for a design system typically goes hand in hand with little to no shared understanding of the customer.
Step 2b. Establish design principles
Therefore, your team must establish a baseline for determining what to ship and what to leave out. That's where a company's brand strategy (e.g., brand values, mission, and promise) and a set of Design & Messaging (voice & tone) Principles come into play. A cross-disciplinary team of an Engineer, a Marketing/Product Manager, and a Design/Content Leader must define and agree upon a set of shared Design Principles. Design Principles should have representative examples.
Step 3. Create UI/messaging sticker sheet
Once you've audited your components against an agreed-upon set of Design Principles, you'll want to fill in the gaps. Start at the atomic level and create all the necessary elements, e.g., buttons, form fields, colors, typography, etc., within Figma (not Sketch).
Step 4. Create components
You’ll leverage your UI/messaging sticker sheet of atoms to build your component library in Figma. These components are a set of previously identified Design Patterns.
Step 5a. Identify an “opportunity” pilot
Design Systems often collapse in on themselves when teams use a waterfall “lights on, lights off” approach when trying to ship them. This is due to entrenched legacy thinking e.g. launching large rebrand reveals w/o talking to customers. Instead you need to think about rolling out your Design System in the same way a construction crew builds a new “bridge” alongside the existing one. When the new bridge is up and working properly, only then do they tear the old one down. Similarly you’ll want to roll out new pilots alongside the existing design.
Step 5b. Customer journey mapping
I’d recommend using the customer journey mapping design method to identify your pilot. If you haven’t conducted that exercise do so before moving ahead.
This will help locate an opportunity to capitalize upon with a Design System pilot that could have tremendous upside for the customer.
Step 6. Build and testing your pilot
For brevity I’m really going to condense this process down. These steps presume you're familiar with the Lean UX approach on how to build and ship prototypes/pilots. If not, 18f has done a yeoman's job of documenting this process here.
- Conduct discovery research
- Validation board: Write a Problem Statement using your customer insight research write out a problem statement based on one customer persona.
- Validation board: List assumptions, core assumptions and riskiest assumptions.
- Validation board: Write a broad hypotheses
- Prioritize: Pick 3 to 5 hypotheses your team will focus on
- Break down hypothesis: Turn hypothesis into something actionable.
- Groom backlog: Organize your story candidates In your Kanban board using Trello or Jira. For more info on how to do this, click here.
- Determine your story points: Apply story points (the complexity of individual user stories)
- Plan your sprint: Discuss and agree upon a set of story candidates you and your team of engineers, product managers and designers/writers will build over a course of the week.
Repeat this process of identifying pilots for your new Design System until the old “bridge” and or Design Language is gone.
*Keep in mind that once you identify your pilot hypothesis make sure it has an agreed upon target audience, metrics of success. And above all make sure it has generative testing methods in place that can enable your team to validate and or invalidate your pilot. This will be critical if your cross-disciplinary team is to know if your new Design system is successful.
One more thing(s)
Design Systems are not fixed, and must be seen as a living thing. As your customer’s grow, shift and change so should your Design System.
Design and Messaging Patterns are shortcuts for creating campaigns and products/applications. But be weary of creating a homogenized look and feel as it erodes your brand. You must find a way to balance the need for differentiation and ease of use. No one needs to see another tiny head, big body illustration, right?
Click here to see an example of how we employed this method at O'Reilly Media.
