When looking to scale your design team, your first instinct might be to up the recruiting efforts. But there’s a much bigger determining factor for success, and it has nothing to do with human resources.
Instead, it’s all about design systems.
That’s according to Forrester Principal Analyst Gina Bhawalkar, who found that the strongest design organizations follow and update a set of deliverables that group past style guides, design libraries, reusable code and more to guide future efforts.
KEY COMPONENTS OF A DESIGN SYSTEM
- Style Guide
- Component + Pattern Library
- Design Principles
- Best Practices
- Purpose + Shared Value
- Brand Identity
- Reusable Code
Still, some companies have hesitated to create a design system because the project requires resources, time and ongoing attention. It’s also filled with challenges.
Maintaining a common design language as products change and scale can get tricky, especially as designers move to and from a company. Plus, getting total buy-in from everyone involved can stall development.
But when a design system is done right, Bhawalkar said it can lead to greater talent retention, increased accessibility efforts and the democratization of design practices. That’s in addition to speedier product builds, consistency across teams and simplifying the process for product modifications.
So where does one begin, and what are some ways to overcome design system challenges?
Here to help is Lead UX Designer Kimberly Morris, who led HR tech company Criteria Corp through its recent design system implementation.
In the initial planning phase, what were your key requirements for the design system?
Our main goal in building out a design system was to create tools that promote consistency across the visual and interaction patterns in our products. Before building out our design system we had to take inventory of all the patterns we were currently using, deciding where to consolidate any competing styles. Documenting these patterns in a UI library of reusable components enabled the team to spend less time designing common interaction patterns and more time solving bigger-picture problems for our customers.
Documenting these patterns in a UI library of reusable components enabled the team to spend less time designing common interaction patterns and more time solving bigger picture problems for our customers.”
While efficiently building design solutions is one of the main ways we use our design system, we also needed it to serve as a tool for collaborating with others. Meeting with our engineering team to understand how they are referencing design documentation helped us decide how much detail to include when documenting components.
Lastly, we needed to make sure that our product’s design system aligned with our brand identity. In the span of two years, we relaunched our visual brand identity and acquired two companies, so collaborating with our marketing team was essential for building a consistent visual language.
What was the biggest challenge your team faced while building and implementing a design system?
Our biggest challenge was building a design system that could be managed by multiple designers over time. I built our first design system in Sketch and published it on Zeplin, which was easy to maintain as a solo designer. As our team grew, I added Abstract to our workflow to manage changes to our evolving UI libraries. Now as a team of four, we are currently transitioning to Figma, which makes managing our design system a lot easier. We have a global UI library that feeds into several product-specific libraries and have found that Zeplin does a fantastic job of automatically organizing Figma library components. This reduces maintenance time on our end before we share them across teams.
What processes have been especially useful for keeping your design system relevant and bug-free?
Transitioning from Sketch to Figma has made it easier for our team to collaborate as we continuously refine our design system. In our weekly design team meetings, we share how we are using various design system components in ongoing projects and propose additions or changes based on any identified gaps in our UI libraries. Also, regular check-ins with our marketing team allow us to make changes to our design system that are up to date with our brand messaging and tone, such as adding a new set of illustrations for use in onboarding flows and modals.
.jpg)
.png)
