Design System Checklist

I just started to create another design system for a client and there are some conceptual questions I need to first think about before I can design the system. I’ve got them in my head and roughly know what to look out for. But up until now, I never wrote those questions down.

-No, this isn’t my checklist. This is simply stock photo by Glenn Carstens-Peters on Unsplash to make the teaser of this article look nice :)

Today I needed to free up the hard drive in my brain, so here it is: my evolving design system checklist.

Feel free to use and abuse it. ❤️

And if you do so, please leave a feedback on what worked and what’s missing so we can add more important questions to this list as a community.


Goals

  • What do your stakeholders expect?
  • What are your expectations?
    (How perfect does it have to be? Do these expectations meet?)
  • Who will be using this design system? (Devs, Agencies, Content Editors, …)

Scope

  • Principles (Brand values, Purpose, …, Limit them!)
  • Style guide (visual)
  • UX patterns (interactions, best practices, …)
  • HTML/CSS utility classes (typography, colors, buttons, forms, …)
  • Functional components (ready-to-be used in your apps)
  • Copy (wording, tone of voice, …)
  • Icons, illustrations and images
  • Sound and motion library

Initial Setup

  • Is it a redesign or completely new? (Migrating applications can surface unexpected usages of utility classes, which then break with the new ones)
  • What rules and principles will you be following?
  • Where does the current design work well?
  • What do you want to improve over the current design?
  • Do you want a strict or loose design system?
  • Are you designing for multiple products?
  • Where can you get inspiration from? (Well copied > badly invented)

Stakeholders and Process

  • Which roles do you need on your team to be successful?
  • Which disciplines should be involved in your design process? 
    (Business, Product Owner, DevOps, Tester, Support, …)
  • Do you already have the buy-in from your team and stakeholders?
  • What deliverables and deadlines do you need to meet?
  • Will your work be implemented in parallel while you’re designing it or are you shipping the finished system once it’s done?
  • Have you defined the most important terms to communicate your design system? (Designers, Devs and Stakeholders must speak the same lingo)
  • Who needs to sign off your work and at what steps?
  • What is the road map for your design system and how will it be maintained in the future? (Scope, MVP, Iterate, Extend, …)

Users

  • Do you have enough insights to understand them? (Journeys, JTBD)
  • What context will your App be used in?
  • How frequently will they interact with your App?
  • Do they want to use your App?
  • How mature is your audience on your topic?
  • Will they receive training or start with zero knowledge? (B2E, B2B)
  • Are there standards or APIs your audience expects? (often the case in B2B)
  • What disabilities will you cater for?

Technology

  • What output channels suit your audience? (Web, Mobile, API, Services, …)
  • Does the technology stack have implications on your design?
  • What will you provide? (visual guideline, html and css templates, 
    functional components, …)
  • Do you need personalized accounts and different roles? (B2C, B2E)
  • Are Features or Components within a access restricted area?
  • Do you need logging and a change history?
  • Which systems or sources will be integrated?
  • Will you need live data? (Does data need to be pushed to the frontend, eg with websockets, or will the front-end poll data actively)

Layout and Content

  • What screen sizes and input methods are you designing for?
  • How consistent should different products and platforms be?
  • What types of content are you expecting 
    (Data, mostly text and images, products, …)
  • Where do you expect the highest complexity, both visually and functional? (Tables, Forms, Dashboards, Products, Check-Out…)
  • Will there be foreign languages and what are their needs? 
    (RTL/LTR, how long will labels be?)
  • Who will write the text? (both labels and descriptive text)
  • What requirements does your Information Architecture pose regarding navigation? (Deep, Wide, how many Levels, in 3 years?)
  • How will the user navigate? (Menu Navigation and/or in-content, Master-Detail Views, Search, Dialogs, …)
  • Will the user be able to customize his view?
  • Is your system capable of personalization?
  • Do you build on existing design systems or frameworks?
    (Material, Bootstrap, …)
  • How will your grid look and feel like? (appearance, columns, whitespace)
  • What components do you need? (Create an inventory, mark ones that you have but don’t need anymore)

Manipulating Data

  • Where does the user edit stuff? (Dialogs, Inline, Popup-Forms, …)
  • Auto-save or Save Buttons?
  • Do you need Inline-Edit (what happens with complex validation rules?)

Error Prevention and Error Tolerance

  • When do you validate input and how do you show validation messages? (complex validation over several fields)
  • Is there an Undo option and how big are the risks for our users if we don’t have one? (especially critical with autosave)
  • Do we need a history? (Log, Roll-back)
  • What happens on Session Timeout? (eg. someone resumes the task in an open browser window the next day, but the session has timed out)
  • Can you use plausibility checks to prevent errors before they happen?

Notifications

  • What levels of notifications are needed? 
    (Info, Success, Warning, Error, Critical)
  • Where do we show them?
  • What channels are used besides the screen? 
    (Push, E-Mail, SMS, Info screen, …)
  • Are there critical notifications that can lead to real problems if the users miss them?

Testing and Documentation

  • When and how are you going to run usability tests?
  • How do you test the code of your design system?
  • What parts are you documenting? 
    (Patterns, Components, Code, Do & Don’ts)
  • Where are you documenting it?

🚧 Work in Progress

If you’ve found this list to be useful, I need your help to make it even better. Please share it with your fellow designers and leave a comment below with additional questions you ask yourself or pitfalls you found out about the hard way while designing a system. 😅



On a side note: If you’re new to UX or would like to learn more about the topic, check out my first ever online tutorial: