Six tips to build better design systems
It’s been the year of the design system. Companies launch new design systems almost every week, and most executives now understand their value. Design systems includes style guides, pattern libraries, CSS frameworks, and design operations. Designers and developers feel empowered by a ton of resources, and there are conferences entirely dedicated to design systems (mostly notably Clarity in the US and Design Systems London in Europe).
The barrier to entry is now lower, but with so much information out there, it can be overwhelming and difficult to know exactly what advice applies to your own work — especially if you’re trying to build a design system at a smaller organisation.
We’ve asked insiders who built design systems at Slack, HubSpot, GoDaddy, IBM, and Lloyds Banking Group for their tips on how to build better design systems. Here’s what they recommend:
1. Understand the context your design system has to operate in
“Every new design system starts with dreamy aspirations to be the next Airbnb DLS or Google’s Material Design,” finds Lily Dart, Design Language Delivery Lead at Lloyds Banking Group. “But for those of us who don’t work in truly agile, user-centred organisations like AirBnb or Google, trying to replicate those examples can be a mistake.”
According to Lily, the real trick to creating a design system that works is to understand the context and culture it has to operate in. An agile organisation won’t appreciate ‘perfect’ releases once every six months, while a waterfall organisation will want slow releases, but they’ll also expect you to maintain older versions if they’re in production.
“Once you understand your context and culture, you can think about how your design system can improve it,” Lily explains. “Want to boost efficiency? Define as many pre-made patterns as you can to speed up the team. Want to boost creativity? Go the opposite route — keep patterns minimal, instead providing atoms to give designers flexibility.”
In the end, a design system is just that, Lily points out — a system. “And systems don’t exist in isolation. If you don’t work for Airbnb, then don’t recreate products designed for their team and their users. Focus on solving the problems you face every day, and you’ll create a beautiful design system.”
Google’s Material Design is great, but don’t recreate design systems that have a different context. Focus on the problems you face instead.
2. Stay unique and save overhead
Also question whether your company actually has a need for a completely new design system, suggests James Y Rauhut, a front-end developer and UX designer at Pingboard.
“The most powerful design systems manifest from a unique philosophy a company has,” he explains. “Google’s Material Design believes an experience extends past the glass screen you interact with. Microsoft’s Fluent Design believes an experience adapts to the window it occupies. Will your design system have a unique point of view? If not, you may want to adopt an existing design system to save yourself the technical debt.”
Even if you do have that unique perspective that will separate your system from the rest, you don’t have to reinvent smaller wheels. Here are some tools that James recommends to make it easier to release a design system and keep the company aligned:
- Framer X’s Team Store for design
- Reach UI’s base components for accessibility
- Grid Wiz’s CSS Grid framework generator for layout
Before James joined Pingboard, he worked at IBM Design. In this talk he explains how efforts like CSS Grid allow you to push what a design system does and how IBM is building a design system for their 350,000 members of staff:
3. Define a process, not a project
“It can be tempting to think about a redesign or creating a design system as a project,” admits Lara Tacito, senior manager (product design) at HubSpot. “In fact, it may need to start out that way to get buy-in or momentum. But the only way to see real success and not have to redesign every year is to define a process and treat define the process like a product.”
Lara suggests that the first step, like in any standard design process, should be to figure out the current workflows of the people who will be using the design system.
“A few simple interviews will go a long way,” she explains. “Then find ways to simplify that process, still meet the users’ needs, and make it undoubtedly easy to do the right thing.”
Lara also recommends bringing your design and implementation documentation together. “There are complexity tradeoffs to this, but at the end of the day we’ve found that the more designers know about the implementation, the better off they are — and engineers who know more about the design guidelines make better decisions for the user.”
Finally, Lara suggests involving the team who will be using the design system in the process because it helps educate them on how the process works, allows for a broader set of skills and contributions, and helps accountability and autonomy.
Watch Lara’s Talk UX presentation on building an evergreen design system that makes life easier for both your customers and your team:
4. Focus on communication
“Design systems are 80% communication and 20% doing the work,” points out Garrett Miller, staff engineer at Slack.
While establishing the foundational component architecture is an absolute necessity, Garrett has found that far more work is involved in making the case for resourcing and prioritization within the wider organization.
“This takes a tremendous amount of focus on collaboration,” he advises. “It requires negotiation with stakeholders to clear a path for such a large investment in your design infrastructure. The success of a design system is the result of how well its advocate is able to navigate the tensions between all sides involved in these conversations.”
Garrett recommends focusing on the business case for the investment in your communication.
“Design systems allow us to accelerate growth with lower risk of regressions. Surprises cost money and time, both things that your company is likely trying to save.”
5. Increase contributions through modularity
By their nature, design systems tend to be monolithic instead of modular. Charlie Robbins, senior director of engineering (UX platform) at GoDaddy, recommends focusing on modularity, however, as it has two major benefits for the community you want to foster around any design system.
“First, a modular and decoupled design system encourages users to take individual components and combine them with other design systems to meet their specific needs,” he explains. “This increases the pool of possible contributors.”
For a first-time contributor, even a small design system can be overwhelming to contribute to, though. “A modular approach can make updating or adding new components or documentation to your design system more approachable since a new contributor only needs to understand that one component,” Charlie points out. “By embracing modularity and ‘emptiness’ whenever possible, your community will have fewer barriers to growth.”
6. Be mindful of decision debt
“One of the biggest gotchas, when working with design systems at scale, is the idea that not making a decision is, in fact, a decision,” warns Sarah Federman, design engineer at Adobe.
“Every time you make a choice to put off setting a standard or creating a process, you accumulate decision debt, which can be just as — if not more — harmful as design debt or tech debt,” she explains. “When you put off a decision being made within your system, you put the onus on your users to make the decision. The result might not be one you like, and it certainly won’t be one that’s consistent across products.”
In Sarah’s experience, decision debt especially comes into play when you need to make far reaching design decisions around typography and spacing, but also when you need to make process decisions, such as how to version your system. “Users will develop expectations around what support they’ll receive or the stability of your system,” she advises, “and you’ll be fighting those expectations in the future.”
Also important is the decision — or more ideally requirement — to create an inclusive system. “Building in accessibility after the fact is much more difficult and effects the most fundamental parts of your system, such and colors and sizing.”
In the end, design systems should be adaptable, but starting with a solid and flexible foundation is the easiest way to enable change down the line.
“Decision debt isn’t always bad, but it is something to be mindful of and take on strategically,” Sarah concludes.
Click here to build your next great project on Media Temple.
