Amazon AWS: Building a New Design System

How do we build a Design System while still prioritizing our B2B SaaS application?

Actions

Identify Issues

Research. Survey the current landscape and identify potential issues.

Plan

Address issues, think through execution, and create a strategy to scale for the future.

Implement

Optimize the process and ensure workflows align.

Scale

Ensure that we future proof our design system. As our B2B application scales, our design system will need to support it.

What we tackled first.

Problem

A 3rd party had created a style guide before I joined the team. There were too many colors for our B2B application and the color palette was outdated.

Solution

We reduced the colors and the ramps, simplifying the groundwork. We selected a bold, vibrant color palette for a more modern design.

Laying down the foundation: Design Token Names

Creating a Global Naming Convention

Taking inspiration from Asana, we moved forward with a Global Naming Convention for our Design Token Names with emphasis on standardization, clarity, and context. Our format:

Element - Property - Variant - State

Component Requests

For requests of new components or updates, we use Asana to track and prioritize these tickets. All requests are sent to me, and I have a designer and developer rotate out weekly to complete the requests.

Improving Our Process

  • Finding Alignment

    We use Style Dictionary so that our designers and developers are working in parity.

  • Final Review

    As a part of our design process, a designer and developer collaborate during the final review before it’s pushed. This pairing helps us avoid any delays in QA.

What were the Results?

Incremental Changes: Page by Page

We made updates so that our design system covered 100% of our B2B SaaS application.

  • Homepage Before

  • Homepage After

Moving Fast

Leveraging the design system, we’re able to use a wireframe theme to iterate quickly - improving our design process and better supporting our product and engineering partners.

Good Job, Team!

The VP of AWS Supply Chain presented our work at AWS re:Invent 2023.

Next Steps: Design System Website

This will serve as the source of truth for our partner developers.