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

Hey there!

Want my new Video Tutorial on Efficient UX Design for free?

  1. Open the coure on udemy
  2. Enter the code UXDESIGNNOV
  3. Watch the tutorial, rate it and help me spread the love 🤟

Hurry up, the codes are limited


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: