Design systems can achieve a world of good for companies and organizations. They tell a cohesive story about your products, while helping users navigate them in a clear and consistent way. The path to implementing them, on the other hand, is often anything but clear. Especially at large organizations, comprehensive design systems require a huge amount of cooperation from many different teams. So, how do you get buy-in?
Adobe is implementing its own design system, Spectrum, and now we’re sharing some stories of how we got to this point. To learn more about Spectrum, its challenges, and its solutions, check out our first post “Introducing Spectrum: How Adobe Is Building a Design System at Scale.” Below we’ve outlined some of the key steps we’ve taken to get company-wide buy-in on Spectrum, in hopes that it will help in your own companies and organizations. It hasn’t always been easy, but the results are undoubtedly better when all teams and stakeholders have a say in the future of our design system.
Building for scale as a team
Adobe contains a massive product library, with apps and tools across several platforms. Building for a design system at scale is no simple feat, which is why it is especially important to work smart. Scaling isn’t just about serving a gajillion users, it’s about getting the best results with the least duplication of effort.
Solving for this kind of scale requires bringing together design, engineering, and operations in unique and unforeseen ways. Here are the steps we’ve taken to get Spectrum off the ground in the most efficient (and effective) way possible.
1. Create trust across teams.
Transparency and consensus-building are key. In order to get buy-in across product teams, we started by building trust between the Spectrum team and the teams of designers and engineers building Adobe products.To do this, we’ve had to make sure our design system was as clear and comprehensive as possible. Early in the process, when we were just setting up Spectrum for scale, we created a simple and flexible taxonomy (styles, elements, patterns, and guidelines), defined our principles (rational, human, reductive), and established clear inclusion criteria that set the bar at a high level of quality. This paid off later in the process, as we looped more team members in.Everything that goes into Spectrum must meet the following criteria:
- Accessible: conforms to WCAG 2.0 AA standards.
- Cross-platform: has been evaluated on UWP, MacOS, iOS, Android, and web.
- Cross-theme: has been evaluated across all four primary color themes.
- Well-documented: includes examples, usage guidelines, and links to further reading.
- UI kits: includes a UI kit with reusable vector objects of every variant and state.
- Single source of truth: design and engineering resources are built using the exact same parts and variables.
Our goal is for everyone at Adobe to be able to use Spectrum with confidence. To pull off all of the above, we brought together subject matter experts under one team, so we can produce a single source of truth equally relevant to designers and engineers when they’re getting started with Spectrum.
Part of building trust is ensuring people can get the info they need quickly. We invested early in a website that enables users to explore and interact with Spectrum content.