/ Design system

Design System for Large-Scale Web Experiences

Building a scalable design system that made page design faster, more consistent, and easier to scale

Template and page pattern documentation helped teams create new pages without starting from scratch.

Built and led a scalable design system for a large Amazon department, giving designers, developers, project managers, page builders, and outside agencies a shared set of components, templates, and guidance for creating web experiences more quickly and consistently.

The work involved auditing existing patterns, simplifying and documenting design decisions, improving accessibility guidance, rebuilding components in Figma, and creating resources that made the system useful to both design and non-design contributors.

An overview screen from the design system covering components, documentation, and reusable page patterns.

Project details

Context: Amazon department design system
Platform: Web
Focus: Design systems, documentation, accessibility, component libraries
Tools: Sketch, Figma, FigJam, InVision DSM, internal wiki
Role: UX designer and design system lead

/ 01

Challenge

The department was creating and maintaining a large number of web experiences without a single, scalable source for established patterns, reusable page structures, or design guidance.

Designers often had to reconstruct existing solutions, while developers, project managers, page builders, and outside agencies needed clearer guidance on what patterns already existed and how they should be used.

Key challenges included:

Understanding which existing patterns should be documented, improved, consolidated, or retired.
Supporting a wide range of users, including designers, developers, project managers, page builders, and outside agencies.
Choosing tools that worked for both design contributors and non-design stakeholders.
Improving consistency without over-prescribing every decision.
Making the system easier to navigate than the collection of existing patterns it was replacing.
Building a useful design system with limited dedicated resources.

/ 02

Role

As the sole designer responsible for the system, I led the work from initial audit and information architecture through component design, Figma migration, documentation, accessibility improvements, and rollout support.

My work included:

Auditing existing pages and visual patterns.
Documenting fonts, colors, buttons, layouts, templates, and recurring page fragments.
Researching design system tools and public design system examples.
Building the system first in Sketch, then rebuilding it in Figma.
Creating 23 reusable components with 2 to 17 variants each.
Organizing 8 categories of reusable page fragments.
Building 24 editable Auto Layout page templates.
Improving accessibility recommendations around contrast and readability.
Creating documentation resources in InVision DSM and an internal wiki.
Collaborating with designers and stakeholders for feedback and direction.

/ 03

Approach

Audited existing patterns

I started by reviewing existing department pages to identify recurring patterns, variations, inconsistencies, and usability issues. This included typography, colors, button styles, content layouts, reusable page fragments, and common page structures. The goal was not simply to collect what already existed. It was to understand which patterns were useful, which were redundant, and where the existing experience needed clearer standards.

Page-level templates captured recurring structures and helped clarify how different content types should be organized.

Improved accessibility

While reviewing high-traffic pages, I found contrast and readability issues in existing experiences. I documented recommended changes, incorporated stronger accessibility guidance into the components and patterns being created, and submitted development requests where implementation changes were needed. This allowed the design system to improve not only consistency, but also the quality of future design decisions.

Typography guidance supported clearer hierarchy, readability, and more consistent page design decisions.

Simplified organization

Early feedback showed that simply documenting every existing variation would create a system that was almost as difficult to navigate as the pages it was meant to simplify. I consolidated duplicate and overlapping patterns, reorganized the library, and rebuilt related variations from more flexible base components. The goal was to reduce the number of decisions designers had to make while still giving them enough flexibility to support different content and page needs.

Built for different user types

The system needed to work for more than designers. Designers needed reusable components and templates. Developers needed sizing, color, and implementation information. Project managers, page builders, and outside agencies needed clear guidance about what patterns existed and how they should be used. Instead of assuming everyone would work directly in Figma, I distributed guidance across the places different contributors already worked. Designers could use reusable components and templates directly, while developers, project managers, page builders, and agencies could reference specifications and usage guidance without needing to understand the design library itself.

Component documentation clarified variants, usage guidance, and implementation considerations for different kinds of contributors.

Rebuilt for Figma

As the team moved from Sketch to Figma, I rebuilt the system rather than simply converting the existing files. I used Auto Layout, shared styles, variants, and collaborative editing to create a more flexible system whose components and page templates could serve as practical starting points instead of static references. This made common structures easier to reuse while still supporting different content and interaction needs.

Form component guidance documented labels, placeholder behavior, states, and usage recommendations in a reusable Figma structure.

/ 04

Outcome

The completed system gave the department a shared foundation for designing and documenting web experiences instead of requiring teams to repeatedly reconstruct existing patterns. Designers gained reusable starting points for common page types and interactions, while supporting documentation made the same guidance accessible to developers, project managers, page builders, and outside agencies.

For page types covered by the new templates and patterns, designers could move from requirements to page mockups substantially faster, with less time spent researching and recreating existing solutions. The work also surfaced accessibility problems in existing high-traffic experiences, including contrast and text-size issues. I documented recommended improvements, incorporated stronger standards into the design system, and submitted development requests where implementation changes were needed. The result was not just a component library. It was a clearer shared framework for how the department designed, communicated, and maintained web experiences at scale.

What this work demonstrates

This work demonstrates the ability to turn a fragmented set of existing design decisions into a scalable system that improves both product consistency and team efficiency. It required system-level UX thinking, component architecture, accessibility analysis, documentation, stakeholder collaboration, and the judgment to simplify existing patterns rather than simply catalog them.

Need a more consistent product or interface system?

Designing Realities can help review existing patterns, improve usability, and create clearer design system direction.

Start a conversation