Strategically rolling out design systems across legacy products.

Aligning a product’s design system is much like renovating a house—it's messy and often overwhelming at first.

In the case of Adobe Sales Insight Actions, we needed to integrate functionality, visuals, and the scalability of components between multiple products.

To make the most of our limited resources and build momentum, I proposed a careful, step-by-step approach to rolling out the design system changes.

We asked ourselves:

What would be the most impactful component changes?

Should we follow Adobe Spectrum system 1:1, or does our use case justify deviating from their system?

Are there other parts of the app that might “break” if we decide to change this component?





Prioritizing the fundamentals

Perceptible changes vs. engineering cost

Given some team restructuring, our engineering resources were more strained than expected.

We had to make numerous small decisions that could affect engineering costs, degree of alignment with the north star design system, and user experience.

Phase 1: Foundational elements

Typography
Colors
Buttons, inputs
Top navigation bar

These are the backbone of the design system, and make the highest impact in terms of "branded feel".

Phase 2: Containers, Dialog windows

Object cards
Dialog windows

Crucial components in displaying information.

Phase 3: Key feature components

Insights Panel
Email Compose
Add to Campaign
Live Feed

Focusing on the key features people use everyday.

Implementating the approach.

Weaving incremental design improvements with each product update

Throughout the weeks, I'd suggest to engineers, "if you're going to change this button in this component, let's apply the change across the product." Furthermore, I redesigned key pages in Figma so they knew what to expect.

Execution and impact.

Ensuring implementation, celebrating results

Regularly reviewing staging, we ensured everything looked correct. PM and I would then break down our needed changes into bite-sized tickets. Gradually, a more modern, attractive, and consistent product experience came to life.

In spite of any initial hesitation, the visible positive impact genuinely excited the engineers.