Design Systems are a Journey
by Jamie Myrold, Adobe
Adobe’s design system, “Spectrum,” has been a labor of love for our 300-plus-person design team. You know our work: Photoshop, Illustrator, InDesign, Acrobat and recently, Adobe XD, our user experience design tool. We design the user experience for all of these mission-critical applications.
Spectrum is bringing rigor to our discussions (and arguments) around product design, turbo-charging the impact design has across Adobe’s business and enabling us to think bigger about how we want to treat our customers.
Design systems have increasingly come to the fore as designers grapple with the complexity of delivering cohesive digital experiences for products across multiple surfaces and platforms. Customers expect contiguous experiences, across all touch points in their journey, regardless of platform or surface.
The breadth of Adobe products and target platforms and surfaces
For the design team at Adobe, this is a complex problem to solve. For example, a single UI element like a button in Adobe Photoshop has – and believe me, we’ve counted this – 1,080 permutations across operating systems because we give customers preferences over background colors. Extra light, light, dark and extra dark.
The different permutations of an interface item in a typical Adobe product
What lessons can we learn from Adobe’s experience implementing our own design system, Spectrum, over the last few years?
Firstly, let’s define what we mean by Design System. For Adobe’s design team we wanted Spectrum to be a single source of truth, allowing designers to easily pull common elements to design and develop products and experiences. And it should evolve, always providing a collaborative space for innovation and iteration.
Our Design System consists of three classes of building blocks.
Components: the reusable elements that designers will use (and reuse) to build experiences. Buttons, navigation elements, and icons.
Assets: colors and character styles for designers to use.
Guidelines: sizing and scaling details, navigation patterns, and other frameworks designers can reference to make sure they’re on track.
As we mentioned before, we also wanted Spectrum to evolve on-the-go, and find a sweet spot between innovation and consistency. So, we made some commitments that helped build trust with our product teams, knowing we were going to tweak things.
Predictable cadence: we ship updates to the design documentation on a regular schedule, with a change log and an archive of all previous versions.
Backlog/roadmap exposure: our backlog is available for all Adobe employees to see, and we allow people to add items directly to it.
Clear policies: we adhere to the philosophy of making process policies as explicit as possible, and, where applicable, publish them directly on the Spectrum website.
Adobe’s Spectrum Design System at work
This all does beg a big question: who gets to decide what’s in and what’s out when it comes to components, assets and guidelines? Our approach was to start with a single project and have a small group in charge of the Design System itself, serving as gatekeepers and updating the elements as iterations came in. There was surprisingly little friction in this process because every designer understood that the system would always evolve. As we expanded its use, designers saw their ideas being integrated into the system, and buy-in became viral.
When it comes to adding new elements, what keeps the design team between the lines is that from inception, our Design System had a clear ideological underpinning: this set of principles would inform every decision about how Spectrum should evolve. Necessarily, these principles are directly applicable to Adobe, but carry value across organizations:
Rational. Spectrum is based on real-world situations. Every component, pattern, and principle is informed by research and thoughtful testing.
Human. Spectrum places customer needs first. It's deeply committed to a high standard of accessibility, honesty, and respect for user attention.
Focused. Spectrum strives to deliver what’s needed, when it’s needed. No unnecessary decoration or irrelevant content.
Coming up with these founding principles, our defining ideology, was probably the most difficult and rewarding part of our Design System journey. The dialogue across our design leadership team helped codify what we were always working towards: our best practices and our best intentions. It also brought into focus an experience-centric view of design that can be lost when there are business demands to be met.
Spectrum also made us more intentionally “Design with Words,” or consider language as an integral part of a user’s experience. Just as we think about shapes and colors and components as integral to a design system, so is terminology, content patterns, voice, and tone. They’re as systematically important as visual design.
For example, when we think about names of surfaces like “your work” or “my work” — how do we decide what to say? Is it yours or mine? How does that affect the conversational nature of a product? What’s the user’s relationship with that product? In the end, we focused in on “your work.” It’s more of a conversation, a give and take with the user, and allows users a chance to respond in kind. Words make software more human, and, like layout and code, require careful thought and design. Our content design team writes with one rational, human, and focused voice in parallel with visual design; obsessing over clarity, consistency, and brevity.
Another area we dug deeper into when it came to these Human elements was inclusive design. No two users are identical; we all differ in our ability to see, perceive colors, hear, control our motions, concentrate, or understand concepts. Inclusive design makes room for every background, and that means involving a wide range of users when it comes to product testing. Inclusivity also requires an international outlook from the get-go, understanding the various potential implications of design. Acknowledging cultural characteristics and differences is the first step to creating richer, world-ready digital experiences.
Inclusivity was always a part of Spectrum’s guardrails. As Adobe development teams picked up Spectrum, they received the accessibility, design features, and frameworks essential for user experience consistency and inclusion.
One recent example is the introduction of Voice Control in MacOS Catalina, which allows users to control their Mac using only dictation and voice commands rather than other inputs like touching, tapping, or typing on their device. With Voice Control, people have a whole new way to navigate and interact with software. This can be particularly empowering for people with physical or motor disabilities who have difficulty interacting using their hands. As quickly as we could, we incorporated these capabilities into Adobe XD. You can use Voice Control to access all of the core design features of XD, including drawing tools, layers, properties in the Property Inspector, and the XD application menus. For example, you can say “Click layer one,” “Select all,” and “Click Distribute Horizontally” to activate a layer on the canvas, select all the objects within that layer, and distribute them horizontally on the canvas.
And when it came to Spectrum’s rational principle and goal of integrating data into our design decision making, Design Tokens entered the process. Design tokens are all the values needed to construct and maintain a design system — spacing, color, typography, object styles, animation, etc. — represented as data. These can represent anything defined by design: a color as an RGB value, an opacity as a number, an animation ease as Bezier coordinates. They’re used in place of hard-coded values in order to ensure flexibility and unity across all product experiences. Design Tokens are directly integrated into Spectrum’s component libraries and UI kits. They cover the various options of platform scales, color themes, component states, and more.
Today, as we know, design decisions in the digital world have real economic impact. Spectrum has not only helped us ship products faster, but also allows Adobe to unlock business opportunities through design.
What do we mean by that? At Adobe, our design team is not simply designing products: we are creating high-impact customer journeys that help people discover and try out our products, on the web and through free mobile apps, that act as a marketing funnel for our business. Two years ago, we had virtually no business coming to us via app stores. Now, it’s worth tens of millions of dollars (sorry I can’t be more precise!) and is our fastest growing channel. Our mobile designs are powering this business by enabling easy on-boarding to paid versions of our products.
Lastly, we drive business impact through Spectrum by designing experiences that regularly engage customers and enable successful tool use: surfacing help content and tutorials in non-intrusive ways. Our designs help customers discover new features and, in a subscription-based business model, ensure they want to renew their plan every year. In that sense, we bring Adobe’s product value to life.
Spectrum is now integrated across Adobe’s “full stack” design organization, that has skillsets ranging from design operations, content strategy, user research, prototyping, growth design, design strategy and, of course, UX design. We deliver access to Spectrum as a plug-in to Adobe XD and for our 300-plus designers it is now an essential part of their everyday workflows.
Adobe’s Design Team
One important learning was that some products can adapt more quickly than others when it comes to implementing a Spectrum-inspired experience. Photoshop, for example, turned thirty years old this February 2020. Generally speaking, the older a product is, the more challenging it is to change some aspects of the user experience. That said, the Photoshop team puts a lot of energy into working with Adobe’s design team, particularly as the product has become an integrated multi-surface system, across desktop, iPad, and in the future: the web.
One last piece of advice that can benefit our design colleagues across SoDA and beyond: share your work. We decided to make Spectrum available to all of our customers, with the hope of setting the standard for how to deliver a Design System. Already, Spectrum is being used by Adobe’s growing ecosystem of third-party software developers to design plugins and extensions for Adobe products. Please check it out at spectrum.adobe.com. We’d love to get your feedback.
Jamie Myrold, Adobe