Back to case studies

/ Design system

Design System for Large-Scale Web Experiences

Improving speed, consistency, and collaboration across complex page design work

Design System for Large-Scale Web Experiences

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

Built a design system and supporting documentation for a large Amazon department to help designers, project managers, developers, page builders, and outside agencies create and update web pages more efficiently and consistently.

The work involved auditing existing patterns, documenting design decisions, improving accessibility, rebuilding components in Figma, and creating resources that made page design faster and easier to understand.

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 needed a clearer way to document existing design choices, guide future design work, and help teams create new page mockups more quickly.

Key challenges included:

  • Understanding which existing patterns should be documented, improved, 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.
  • Building a useful design system with limited dedicated resources.
Template and page pattern documentation helped teams create new pages without starting from scratch.

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

/ 02

Role

I led the design system effort from analysis through rebuild and documentation.

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.
  • Using Figma Auto Layout to create more scalable components.
  • 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, and reusable page structures.

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

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. I documented recommendations for updates and incorporated stronger accessibility guidance into the components and patterns being created.

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

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

Simplified organization

Feedback from new users showed that the original organization was too complex. I simplified the structure, removed duplicate or overly similar objects, and rebuilt related patterns from more flexible standard components.

Built for different user types

Designers needed reusable components. Developers needed sizing and color information. Project managers and agencies needed guidance. Documentation was placed in multiple accessible locations, including design files, InVision DSM, and an internal wiki.

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

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 to take advantage of Figma features including Auto Layout, shared styles, and collaborative editing.

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

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

/ 04

Outcome

The final deliverables included a comprehensive design system in Figma, supporting documentation, an internal wiki page explaining how to access resources, and a PDF reference version.

The system helped reduce the time needed to gather design information, create new page mockups, and understand existing patterns. It gave designers a faster starting point and helped stakeholders make more consistent decisions.

What this shows

This project shows experience with complex systems, scalable design patterns, documentation, accessibility, stakeholder alignment, and the practical work required to make a design system useful to real teams.

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