Adobe XD – the beginning
The story of what is now Adobe's premier digital design tool begins in late 2014 with a simple prototype, which was codenamed Sparkler.
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.
Shown above is one of the earliest demos – a side-by-side comparison of the XD prototype and Illustrator, using the step-and-repeat tool.
I was the first designer to work on Adobe XD. As time went on, I was joined by Talin Wadsworth, who helped articulate the vision further.
Our initial focus was on fast drawing and object manipulation. We eventually progressed to canvas behaviors such as artboard management and prototyping workflows, as shown above. We also explored collaborative design modes. All of these were a first for Adobe at the time.
One of the best aspects of this project was our ability to move quickly. We went through many rounds of rapid iterations, finessing the details of the UI and interactions. This velocity, combined with open-ended possibilities, made for one of the most satisfying times in my design career.
Spectrum – A bold new vision for professional creative tools
Later on, my focus at Adobe shifted to helping the company build the first version of Spectrum, Adobe's design system.
This was a fun challenge, working outward at a level of abstraction that would ultimately impact all Adobe products. My team's first goal, however, was to modernize the look and feel of the super dense and confusing UI found throughout Creative Cloud.
This all came together in a series of UI studies where we applied Spectrum's principles (Rational, Human, Focused) – along with the detailed thinking the team had done on color, scale, layout, UI controls and panel designs – into complete visions for each product in Creative Cloud.
This was an immense vision, encompassing everything from photo editing, illustration, videography, print design, 3D design and interactive design tools, such as Adobe XD, shown above. Spectrum wasn't just about how things look; it was also about how the workspace is organized, and how to make the creative toolset feel calm, spacious and inviting.
Working on Spectrum taught me that every pixel really matters, especially in dense workspaces. Where earlier versions of Adobe software had needless bevels, inner shadows and other decoration, Spectrum UI was simple and streamlined. We also ruthlessly stripped back the various colors and type styles and made everything a lot more accessible and easier to parse.
The evolution of Spectrum – looking beyond the creative toolset
Adobe's products serve a diverse array of customers: creative individuals (novice and expert), design studios, document services teams, marketing/analytics organizations, and many others. Despite this diversity, these products are all part of an increasingly integrated ecosystem, so a big part of Spectrum’s job is to bring it all together.
Ultimately, Spectrum grew to encompass a wide array of products and solutions – not just Creative Cloud, but also Acrobat, Marketing Cloud and Adobe's various web interfaces.
Spectrum's design language eventually evolved into a mature design system with multiple implementations – from its highly tokenized Spectrum DNA, to Spectrum CSS and Spectrum React. This also included React Aria, a library of unstyled React components and hooks that facilitates the creation of accessible, high-quality UI components for web applications and design systems. My experience working on Spectrum made me a much more well-rounded and technical designer, paving the way for my eventual focus on platform experiences.
Codesign: A modern prototyping tool
At Google, I had a unique opportunity to work with a group of design engineers on a tool that was purpose-built for live prototyping.
The Google Cloud Console is the world's largest Angular app, with hundreds of pages. We aimed to make it easy for designers and engineers to build new Cloud Console features, with a performant web canvas and simple drag-and-drop functionality.
In many ways, Codesign was the tool that I had been hoping to build for many years – using real components as building blocks and CSS as the layout medium. Although this tool was internal-only, over 1,000 Googlers were using this weekly, even before our GA launch.
