Design

The secret to connecting designers and developers

4 min read
Laura Lopez,
Roxanne Allard
  •  Jul 13, 2018
Link copied to clipboard

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.

DesignBetter.Co’s design systems workshop with Brad Frost

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.”

Twitter Logo

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?

Brad speaks with workshop attendees

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.Twitter Logo 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.


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!

Collaborate in real time on a digital whiteboard