The next step: Design Systems beyond UI 🚀

In this article I list some practical ways to enhance Design Systems. A word of advice, though: do not fall into the trap of hoarding stuff!

Most Design Systems are approached from a visual UI perspective: a UI-kit for designers and coded components for developers. Added to that are design principles, documentation, typography and color-tokens. Some Design Systems include tone of voice, animation or a brand-guide as well.

But designers do other things too. Things like (user-)research, facilitating workshops, wire framing, and UML-diagramming (apparently 😱).

So let’s add it all to the Design System, right?

Most Design Systems consist of a UI-kit, Component-library and some documentation on tone-of-voice, animation or a brand guide. But is there more to #DesignSystemLife?
Most Design Systems consist of a UI-kit, Component-library and some documentation on tone-of-voice, animation or a brand guide. But is there more to #DesignSystemLife?

Word of caution: do not add stuff for the sake of adding stuff

A bigger Design System does not mean better results. Larger systems are in fact more difficult to use and get outdated quicker. They are also intimidating to new users and people are less likely to use them.

Spending time on your Design System (components, flows, graphs, text, whatever) means you spend less time on your product. You actually “lose time” twice: once when you add stuff to the Design System and later when you maintain that stuff. You should only spend time adding something to the Design System if it outweighs the investment.

So focus on practical things specific to your situation. A Design System is not a book. Minimize the amount of prescription (“you should do this”) and maximize the amount of practical things (tips, plugins, templates, components).

Not sure what you want to have in your Design System? Try our simple checklist!

If your Design System looks like this, you’re doing it wrong. Source


So practically, what can we add to our Design Systems, Matthijs?

Yeah sorry, the text above was really abstract. You want examples, practical suggestions and inspiration!

I’ll add more ideas in follow up articles, but here are some suggestions for your Design System:


1. Standards for doing research

You can help your UX-research colleagues by giving them useful tools and standardizing things in your Design System: 

  • screener questions for usability tests or interview
  • texts for recruitment, e.g. inviting people to participate on social media: “participate now in our awesome survey and get a $10 coupon!”
  • emails for communicating with participants (“Thanks for signing up! You’ll need a computer with a microphone”)
  • downloadable templates for the consent-form and NDA’s 
  • reward-levels for different types of research and what your companies’ rules are regarding rewards (e.g. can you give fellow employees a coupon for participating?)


2. Documenting user research findings

Research results can be useful multiple times during product development and a Design System could be the right place to store these results. I’m thinking of fundamental (or “timeless”) research, such as Customer Profiles and user-contexts.

Bulb is a great example: research insights are sprinkled all throughout their Design System. This gives credibility to their guidelines. A practice which is incredibly useful and something I’d like to see in more Design Systems.

Caveat: results from user research can become irrelevant very quickly. Do not dump all your reports into your Design System

That’s one way to turn long-and-boring researchreports into valuable bits of insight within your Design System! Thanks Bulb!

3. Non-UI stuff

The list of non-UI stuff we could add to Design Systems is near-limitless. But these are some practical examples I thought of:


4. Workshops

At Angi Studio we have a library of tools and workshops (some of which we share with the rest of the world). These workshops are a core part of our design activities. We use them every day and we keep improving them. They are an excellent candidate for our Design System!

Lots of empty space in Design System land: my fingers are itching already, what can we build there? Source

Want to know more?

I’ve added a couple of examples of how to expand the use of our Design Systems, but I have more ideas to add in this topic: information architecture, Design Ops, more processes, artificial intelligence, ethics… So keep an eye out for future articles!

I’m also really looking forward to your reactions, email me or contact me on LinkedIn.

So, I don’t think we should add all of this to our Design System, but more is possible!

Don’t make your Design Systems into intranet v2.
Keep your Design System lean and small! 
Happy creating!






More about Design Systems?

If you enjoyed this blog please check out our other Design System Safari’s or check out the results of our research about the State of Design Systems in The Netherlands (in Dutch).

Curious how other organisations in the Nederlands build and maintain their Design Systems? Check out our research State of Design Systems in Nederlands, 2018.

Or visit our Meetups about Design Systems and download our tools.

Wij gebruiken cookies voor de beste ervaring van de website. Tijd teveel, beklijk onze privacyverklaring