Formed in 2009, the Archive Team (not to be confused with the archive.org Archive-It Team) is a rogue archivist collective dedicated to saving copies of rapidly dying or deleted websites for the sake of history and digital heritage. The group is 100% composed of volunteers and interested parties, and has expanded into a large amount of related projects for saving online and digital history.
Design systems were all the rage half a decade ago, with an explosion of open source resources made public by Google, Salesforce and Shopify, for example. Not long after, design tools like InVision, Sketch, Adobe XD and Figma 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 own design career, I have become an advocate for building and maintaining design systems. It has become a niche passion of mine, and I hope to share some of what I’ve learned through the years as a design system nerd.
But wait – first, 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, developers 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 tasked with solving problems. We want to create a simple understanding of how our users can 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 current product. This inefficiency can lead to wasted time, especially if those existing patterns and components have not been documented. In a single-person design team, the negative effects may not be as visible, but one can imagine the exponential nature of a larger design team consistently duplicating existing work or creating new patterns that, ultimately, create an inconsistent user experience.
Instead, we want to empower ourselves as designers to focus on solving problems without the need to invent new interfaces every time we are posed with a design challenge. Design systems are always vital, but are especially so when design teams scale up and the product experience reaches a level of maturity.
Hopefully, you’re now convinced that design systems are the backbone of the best design teams and delightful user experiences. Below are a few tips to help you create a usable design system in your own organization.
Start Small
Create that button symbol. 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 for saving your precious time and creating beautifully consistent experiences for end users.
Prioritize Design System Documentation
Whether it’s as simple as a shared page, internal minisite or a full-fledged website, documenting your design system and making it easily accessible to the right people is fundamental to 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.
Keep Evolving Your Design System
Ask yourself and your team if certain parts of the design system are actually 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.
Have a System for the Design System
It’s easy to get lost in the moment and forget to create an important, requested component 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.
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. From the outset, advocate for working with a developer to build a design system that works as a fruitful collaboration between design and engineering.
These five tips will help you start creating a usable design system that will make your collaborators and, most importantly, your users, happy. Ready to get started?
