Why You Need a Design System and How to Find the Best One
We recently had the opportunity to build a new UX proposition for a client from the ground up – which meant the chance to get it right from the start. Not about to waste an early Christmas gift, we embarked on an in-depth research exercise before settling on a suitable design system tool.
Why Use a Design System In The First Place?
Essentially, it’s an exercise in managing risk. Yes, you could be all gung-ho and just go for it, but inevitably, you’re not going to have just one person working on your website – and every time someone new signs on, there’s opportunity for something to break. A design system makes sure everyone is speaking the same language. The question is, which tool is going to work best?
How To Choose The Best Design System Tool
To find the best tool for this job, we created a checklist of non-negotiables to measure them all against. Once we’d narrowed the pool, we polled all the UX designers we know to get a feel for which platforms they dig and which are a waste of time. Finally, we researched the hell out of all the tools on the shortlist and tested them all in as much as free trials would allow.
Of course, in the end it comes down to the needs of the client. But with so many options out there, this checklist of fundamentals is a good place to start.
1. Works Equally Well for Tech and Design
Many systems focus purely on design and then you have to put in the hard code – which, unsurprisingly, creates opportunities for things to break. All of the platforms we looked at needed to do both.
2. Integrates with UI/UX Design Tools Such as Figma and Sketch
These are widely used tools for creating UI and UX designs so it is important for a design system to seamlessly integrate with tools like these.
3. Integrates with Code Repository
Similar to the first requirement – but this time on the dev side. Integrating with a code repository allows developers to implement the exact components as shown in the design system and allows a connected "basket" of connected and curated components to live in code alongside the relevant designs in the design system.
4. Non-Techy People Must Be Able to Create Pages
This is important as it means designers can update the designs directly in the design system (by using their normal design tools like Figma) without needing additional training on another tool.
5. Permission Management Functionality
Different types of users (admins, content creators, editors and so on.) need to be able to use the system in the way that suits their function.
6. Hosting Included
This brings costs down, as it means that the system runs in the cloud and doesn’t need additional hardware and costs to host.
7. Secure and Password Protected
This is an obvious one – you don’t want all parts of the system to be available to the public.
8. Reasonable Pricing
We’re not averse to paying for quality – but if you can pay a little less for quality, even better!
Bonus Features
In addition to the non-negotiables listed above, we also had a couple of nice-to-haves:
Digital Asset Management: the ability to store assets – like pictures, documents – within the design system in a way that’s easy to access and use.
Attaching Documents: the ability to embed/attach documents from other providers, such as Word and Google Workspace.
And the Winners Are…
Having gone through the whole exercise, we narrowed it down to Zeroheight with Storybook – unless your company already has a paid subscription to Confluence, which many companies have. Again, it comes down to the needs of the client. But if you start with the checklist of fundamentals above, you won’t go wrong.
