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.
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.
- 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, …)
- 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
Want my new Video Tutorial on Efficient UX Design for free?
- Open the coure on udemy
- Enter the code UXDESIGNNOV
- Watch the tutorial, rate it and help me spread the love 🤟
Hurry up, the codes are limited
- 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, …)
- 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?
- 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)
- 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?
- 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. 😅
Here are some useful resources I can recommend if you’re about to start with your own design system:
Companies like Airbnb, Uber, and IBM have changed the ways they design digital products by incorporating their own…
A design system unites product teams around a common visual language. In this book, learn how you can create a design…
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: