5 Simple Tips for Creating a Usable Design System
This article first appeared on DevOps.
Design systems were the rage half a decade ago, with an explosion of open source resources made public by Google, Salesforce, and Shopify. Not long after, industry leading design tools like InVision, Sketch, Adobe XD, and Figma heavily featured ways for product teams to maintain design systems within their apps. If you want to build a scalable, consistent product that increases build velocity in design and engineering teams, a design system is integral.
Throughout my design career, I have become an advocate for building and maintaining design systems. Through my work at 2U, CBS Interactive, SoFi (formerly Clara), JUUL Labs, and MetaCX, it has become a niche passion of mine and I hope to share what I’ve learned through the years as a design system nerd.
But wait, what is a design system? A design system is a library of style, components, and other patterns documented so that building and adopting products is more efficient and cohesive for designers and end users alike.
The key benefit of a design system is that it creates consistent, repeatable patterns that make end users think less. A product experience that delights is usually designed with persistent visuals and consistent interaction. Users want to feel comfortable knowing that no matter where they navigate, they won’t be surprised by what they find. Repetition, in the case of product design, is not boring, but welcome. Design systems create trust with users.
Another benefit is the increased build velocity from design and engineering teams. As designers, we are posed with solving problems. We want to create a simple understanding for our users of how to accomplish tasks in a workflow. Of course, we are tempted at times to invent new patterns to solve design problems. We often forget in the minutia of design iterations that we’ve already solved a particular problem in a prior project or in another part of the product. This inefficiency can lead to wasted time because no patterns and components have been documented. In a one-person design team, the negative effects may not be as visible, but one can imagine the exponential nature of a larger design team consistently creating new patterns that ultimately create an inconsistent user experience.
Instead, we want to empower ourselves as designers to focus on problem solving without the need to invent new interfaces every time we are posed with a design challenge. Design systems are always vital, but especially when design teams scale up and the product experience reaches a new level of maturity.
Hopefully, you’re convinced that design systems are the backbone of the best design teams and user experiences. Below are a few tips to help you create a usable design system in your own organization.
1. Start Small
Create that button symbol in Figma. Save that primary color or header text style. Audit your designs and see what patterns emerge. You get the idea! It doesn’t matter where you are in the design process. Any remnant of documenting a pattern will do wonders in saving your precious time and creating beautifully consistent experiences for end users.
2. Prioritize Documentation
Whether it’s as simple as a shared Figma page, internal Storybook mini-site, or a full-fledged website, documenting your design system and making it easily accessible to the right people is fundamental in its success. You need to determine the level of complexity that is needed for your organization and teams that you collaborate with. Talk to your engineering team to see how to best document and stay in sync between design and code.
3. Keep Evolving
Ask yourself and your team if certain parts of the design system are helping solve problems. Iterate on a component that needs to be more flexible or add a new one if there is an important use case that needs to be addressed. Audit your component library to see if there are components that are not used or if there are multiple components that can be merged.
4. Have a System for the System
It’s easy to get lost and forget to create an important component that has been requested or remind a developer to build a part of the UI as a component. Having a project management system and workflow for your design system can help prioritize needs and keep communication organized. Whether it’s logging tickets in Jira, moving cards over in Trello, or simply annotating or resolving comments in Figma, there needs to be a workflow that is consistent and works for the entire team.
5. Collaborate
I’ve fallen into the trap of being inside a design tool bubble. As designers, we’re often stuck inside software that is great for communicating a user experience, but poor at staying in sync with the actual code that is being written. This causes an inconsistency between design and code. Design systems are no exception to that problem. Advocate to work with a developer from the outset to build a design system that works as a fruitful collaboration between design and engineering.
These five tips will help you create a usable design system that will make your collaborators and, most importantly, your users happy. Ready to get started?