During my time at Adobe I was fortunate to work on several exciting projects, all connected to a common theme: empowering creativity.
I hired and managed teams building new tools and services, such as Adobe XD and Creative Cloud Libraries. I also oversaw the effort to design Adobe's marketplace of creative content, Adobe Stock. And I led a cross-functional team responsible for Spectrum, Adobe's design system.
Adobe's design system
Spectrum provides components and tools to help product teams work more efficiently, and to make Adobe's applications more cohesive. It is utilized by every major product team at Adobe (>100 products in market), and is available to 3rd-party developers at spectrum.adobe.com.
The design system consists of design guidelines, components, patterns, UI kits and tools, and is available publicly via CSS and React implementations.
Clockwise from top left: Card Pattern; Quick Actions Component; Color Loupe Component; Toast Components (showing RTL language), Dialog Components
As with many things at Adobe, Spectrum started organically. In fact, prior to 2017 there were multiple simultaneous efforts to cultivate greater consistency and cohesion within certain areas of the company.
An early version of the Spectrum website homepage
The Experience Cloud organization was one of the earliest proponents of a common design language. This makes sense when one takes a look at the products themselves: they are primarily web-based, and many of them are focused on managing or visualizing information. Tables, charts and forms permeate the products. This was fertile ground for systematizing the UI, and thus emerged a collection of patterns and a proprietary framework (known as Coral UI). This was arguably Adobe's first true design system, and for Experience Cloud products (and other web-based tools), this was a great solution.
Early experimention with different scale factors of Spectrum UI components in Creative Cloud application panels
All the text inputs
But Adobe has other products for which this solution doesn't make quite as much sense. The suite of applications that comprises Creative Cloud and Document Cloud are drastically different from Experience Cloud. Creative Cloud products are, for the most part, desktop-based, and chock full of functional toolbars and panels. Instead of tables and charts, elements such as sliders, color pickers and on-canvas UI rule the day. Furthermore, these products don't share a common framework and are built on differing tech stacks.
Document Coud: Adobe Spectrum shown in Acrobat on desktop, mobile and tablet
Creative Cloud: Adobe Spectrum shown in Adobe Premiere Rush across multiple form factors
Aligning a vast ecosystem
The natural approach to aligning across Adobe's vast array of professinal tools was to start with an audit, cataloging the various inconsistencies in Adobe's products and looking for opportunities to unify. But the similarities ended there. Whereas Experience Cloud products could accelerate the process of building consistently via a shared platform, the process with Creative Cloud relied more on negotiating with individual product teams to adopt up the new design system within their own domain. Tantalizing comps were created to demonstrate the potential of unifying the products, and, after a long and painstaking effort, some progress was made.
Spectrum DNA: Example of design tokens for the Button component
Design tokens: enabling flexibility and scale The most powerful method of achieving visual and experiential consistency across Adobe's wide array of products was to rely on tokenization.
Spectrum is a highly tokenized design system, driving a multitude of customized implementations internally, and powering a set of automation tools that allow for push-button updates of components, UI kits and web documentation.
Sarah and PJ presenting to the bay area design system community in 2018
Leading the Spectrum team was one of the most rewarding experiences during my time at Adobe.
The Spectrum team was groundbreaking in establishing a truly cross-functional center of innovation within the Adobe's design organization. UX design, visual design, design engineering and product management were all integrated into one team.
In addition to building and maintaining the design system, the Spectrum team included a strong sub-team working on design system Tools, which focused on automating production design tasks and integrating the design system more natively into Adobe's creative toolset.
Spectrum integration into Adobe XD
The Spectrum Form Builder Tool
A modern application for digital creativity
Before Adobe XD launched officially, it was codenamed Comet. But before that, it existed under a different codename: Sparkler.
One of the very first Sparkler prototypes, showing a side-by-side drawing comparison between the new tool (left) and Adobe Illustrator (right). Our goal with this was to demonstrate how "efficiency enables play."
This prototype pointed in a bold new direction for Adobe's creative toolset: a lightning-fast layout and transformation engine, and a streamlined, focused feature set. This implicitly recognized a fundamental truth that was not yet widely acknowledged within Adobe at that time: that tools such as Photoshop and Illustrator, powerful though they are, do not meet the needs of designers creating experiences for web, mobile and other natively digital environments.
Companies like Bohemian Coding (Sketch) and Figma were racing ahead with modern functionality built for this very purpose. Adobe was at risk of missing this important opportunity.
Making the case: slides from the original Sparkler pitch deck
I was the first designer attached to Project Sparker (so named because it aimed to be the reinvention of Fireworks, which, despite being sunsetted by Adobe the year prior, still had a cult following from its Macromedia days).
Working with NJ, Anirudh and a product manager (Tom Krcha), we set out to envision what this product could become. We were soon joined by another designer from my team, Talin Wadsworth. It's important to note that Talin deserves much of the credit for the amazing and powerful tool that Adobe XD has become. My role in those early days was primarily in helping get the project off the ground.
Very early UI and workflow sketches for Adobe XD (nee Sparkler)
This team of five worked collaboratively to hone that prototype into a workable proof of concept, which eventually became the tool that was showcased at Adobe MAX in 2015: Project Comet.
Today, Adobe XD occupies a key place in Adobe's Creative Cloud offering, and, along with Sketch and Figma, is one of the most widely-utilized tools for creating modern interactive experences.
The marketplace for creativity
Adobe Stock homepage (circa 2018)
Adobe Stock is an online marketplace for royalty-free and rights-managed imagery, video and other creative assets.
Imagery from the Premium Collection
Building a marketplace for users to buy and sell creative assets was a natural extension of Adobe's existing Creative Cloud ecosystem. The opportunity to integrate this market directly into Adobe's collection of professional-grade applications creates a defensible advantage, and allows users to work more efficiently than ever before. Furthermore, by creating an outlet for creatives to sell their work, Adobe is taking the first steps toward a sustainable solution for customers to support themselves financially by doing what they love.
Early low-fidelity iterations
I led the design of the initial Adobe Stock rollout in 2015, individually designing the first version of the Adobe Stock website while simultaneously hiring and bootstrapping the team that would eventually improve and expand the service. At the time I was also managing the Creative Cloud Experience design team, which is directly responsible for integrating the Adobe Stock service into Adobe's desktop products.
Adobe Stock integration into Photoshop (New Document Dialog)