Design System for an Amazon Department
Building a scalable design system to improve speed, consistency, and collaboration across a large set of web pages.
I led the creation of a design system for an Amazon department to support the design of new and updated pages across a large set of web pages. The goal was to document existing patterns, reduce repeated design effort, improve consistency, and give internal teams and outside partners a clearer foundation for building page designs.
The system included reusable components, page fragments, templates, typography, color guidance, documentation, and access instructions. It started in Sketch and later moved to Figma as the team's tools changed.
I led the UX design work for the system, starting with an audit of existing pages and patterns, then building the component and template library from the ground up.
I worked with a small group of designers, meeting regularly to share progress, discuss research findings, and make decisions about structure, organization, and documentation. I also considered the needs of project managers, developers, page builders, internal designers, and outside agencies who would use the system in different ways.
As the team moved from Sketch to Figma, I rebuilt the system so components, fragments, styles, and templates worked properly with Figma and Auto Layout.
The work started with a large set of existing pages, patterns, and decisions that had accumulated over time. Teams needed a way to understand what already existed, what should be reused, and how new pages should be assembled without starting from scratch.
The challenge was not just making a component library. It was deciding how much of the system should document existing design choices, how much should guide future work, how the information should be organized, and where documentation should live so different users could find and use it.
The system also needed to work for a wide range of stakeholders, including internal designers, project managers, developers, page builders, and outside agencies.
A sample of reusable components, page fragments, and templates built in Sketch and later rebuilt in Figma with Auto Layout.
I started by reviewing existing pages and documenting common patterns, variations, and inconsistencies. I looked at typography, color, buttons, layout structures, content blocks, and repeated page fragments. I also noted unusual patterns and edge cases that needed to be understood before deciding what belonged in the system.
At the same time, I researched public design systems and looked at how different teams documented components, guidance, and usage rules. Sketch was the main design tool in use at the time, so the first version of the system was built there. InVision Design System Manager was added as a documentation layer so people without Sketch access could still view guidance and resources.
During the audit, I found pages where text contrast, background imagery, or font sizing created readability and accessibility issues. I tested high-traffic pages and documented fixes for developers. I also tested the components and patterns I was building, which led to stronger recommendations around type size, contrast, and reusable component behavior.
As new team members used the system, their feedback exposed issues in the original organization. Some pages were too hard to scan, and some components were too similar or duplicated. I simplified the structure, removed redundant objects, and rebuilt similar layouts from shared components so they could adapt to different use cases without fragmenting the system.
Different users needed different kinds of documentation. Developers needed sizing, color, and implementation details. Designers needed reusable patterns and guidance. Project managers and outside agencies needed enough context to understand what to use and where to find it. I attached documentation to relevant design objects, kept shared guidance in InVision, and created a company-accessible wiki page that explained where the resources lived and how to access them.
As Figma became the team's primary tool, I moved the system from Sketch into Figma. This was not just a file import. I rebuilt components and page fragments so they worked with Auto Layout, updated styles, and used Figma's built-in features for colors, fonts, reusable components, and collaborative editing.
The system needed to show what existed, but it also needed to help teams make better future decisions. I organized it so people could understand existing patterns while still getting practical guidance on reuse.
When similar layouts appeared across pages, I consolidated them into more flexible components. This made the system easier to maintain and easier for designers to use.
Not everyone who needed the system had access to the design files. Documentation in InVision and the internal wiki helped project managers, developers, and outside agencies find the information they needed.
Templates and page fragments were structured so designers could drag, drop, copy, paste, remove, and adjust sections rather than building each page from scratch.
Moving to Figma made it easier for the team to review ideas together, test alternate organization models, and keep the system more usable over time.
The project resulted in a comprehensive design system and documentation set in Figma, along with supporting documentation in InVision, a PDF version, and a company-accessible wiki page explaining where resources lived and how to access them.
The system gave new designers, project managers, developers, and outside agencies a clearer place to find existing patterns, usage guidance, templates, and page fragments. It reduced the time needed to gather examples and helped teams create consistent page mockups faster.
Instead of rebuilding common structures from scratch, designers could start from known patterns and spend more time on the parts of each page that needed real content strategy, information hierarchy, and design thinking.
The work reinforced that a design system is not only a component library. It is also an organization problem, a documentation problem, and a collaboration problem.
If I continued the project, I would separate some reference documentation more clearly from the active design system so each could stay simpler and easier to use. I would also give mobile patterns more attention. As the team learned more about mobile usage across the pages the system supported, it became clear that mobile could not remain a secondary design target.