Most tech professionals use some form of design system, whether that be a sketch library, design tokens, or style guide. When optimized, design systems have incredible potential.
However, designers and developers often think about them differently. And when your team doesn’t see eye-to-eye, it can lead to less-than-optimized processes and outcomes for everyone.
Related: 6 tasty ways for designers and developers to collaborate better
To help uncover a common understanding about building and maintaining design systems, DesignBetter.Co invited Brad Frost, author of Atomic Design, to lead an international group of designers and developers through a full-day workshop in Amsterdam.
Our diverse group commiserated over common challenges, compared workflows, and learned a lot. We listened intently as Brad gave us the inside scoop on design systems, sharing his own valuable insights on the best practices and most practical tools.
Together, we discovered a golden path to improved collaboration.
So, what’s a design system?
Brad taught us that a design system is the story of how your organization builds its products. The base upon which everything else grows.
For designers, a design system means a sketch library or brand guidelines; something to anchor creativity. For developers, it’s more likely to mean coding standards and documentation that guide precise work.
Imagine what can happen when we break out of those silos. In his definition, Brad includes design standards, documentation, and principles along with a toolkit of UI patterns and code components to achieve those standards. A comprehensive design system not only describes the product, but the process of how it comes to life. It can be as rigid or flexible as you need it to be—as long as it suits your product and unique style of work.
“A design system is the story of how your organization builds its products.”
The benefits of a living tool
Dynamic systems improve cohesion and productivity, make testing easier, and serve as a future-friendly foundation for your work to flourish. When a design system stops being a static document, you’ll see improved quality in your products.
Westpac’s did, and they reduced their production effort by 1600%.
ExxonMobil as well: They launched over 100 new web applications in 18 months.
Maintenance is key
Setting up a design system is one thing, but maintaining it as an active part of your workflow is another. The workshop highlighted this as a common challenge that many experience. So how do you make sure it stays up to date?
One way, Brad suggests, is by assigning different tasks to design system makers and users. Makers are responsible for maintaining the ecosystem; they keep a bird’s-eye view. Users, on the other hand, provide a ground-level perspective. They coordinate with makers to ensure the system addresses their needs. Both should come from different departments to reflect the diversity of your team.
To keep with industry best practices and real-world performance, design systems need to be current. To this end, design system users can propose changes by adding, removing, or modifying as needed.
Related: The value of investing in design systems
For every type of change, there should be a plan in place.
When adding new patterns, check if you can re-use another generic pattern that exists. The process for removal is similar; when patterns are rarely utilized, ask why. Make sure you establish a plan for removing patterns and suggesting alternatives.
The path to success
Brad said that building a design system is like building a plane while you’re flying it: “Surround yourself with people who are okay with that.”
The key here is to make sure that your team is on board with the dynamic nature of the process. A tailored, collectively-understood design system will bridge the work of designers and developers.
And this can’t help but improve your product.
Just wrapped up an amazing day with the #DesignBetter crew and @brad_frost!
Ready for some #DesignPlus Drinks ? pic.twitter.com/lizv6OcN5Q
— InVision (@InVisionApp) June 20, 2018
Learn more
Inspired by the work of leaders who have gone through the design system journey, DesignBetter.Co captured insights and first-hand experiences in Design Systems Handbook. Don’t miss it!
by Laura Lopez
Laura Lopez is a writer, living and working remotely in Charm City. She’s a Great Lakes native with a bachelor’s degree from Michigan State University in Professional Writing with a concentration in Editing and Publishing. When she’s not working her full-time job as a marketing copywriter, she’s volunteering with her church, drinking coffee in the city, or watching movies at home with her husband, Jack.
I am a UI designer, blogger and design system enthusiast. When I’m not playing with my dogs, I create websites and apps that help companies solve problems and realize their full potential. I’m also passionate about connecting designers and developers to help them better understand each other.
