Amtrak Design System - Templates
A design strategy and solution for standardizing the Amtrak website.
Duration
4 months - 2024
Team
Development & Marketing
Tools
Figma, Google Search Console
Role
Product Designer
Overview
The goal of this project was to review the current Amtrak website in order to gain a comprehensive overview of all existing screens and develop a strategy to consolidate and standardize them. As Amtrak is moving to a newer AEM version, we found the opportunity to create a unified, scalable, and brand-consistent experience.
Interior Page & Component Audit
The first phase of the project involved creating a visual site map of the Amtrak website in Figma, organizing pages by tiers—Tier 1 being the homepage, with Tiers 2 to 4 representing increasingly nested pages.
While mapping, I also documented which components were used on each page, with special attention to those highlighted in pink, indicating custom-coded and infrequently reused elements. At the end, I categorised components by most frequent to least frequent use. This is to prioritise which components to create first,
Key Findings from the Audit
Promotional pages compared to service information pages vary widely in layout, content structure, and visual design, lacking standard templates or design patterns. Component inconsistencies also exist with multiple versions of similar UI elements used across different pages, leading to a fragmented user experience and increased maintenance. This variability creates confusion for users, dilutes brand consistency, and slows down content production and development efforts.
Multiple pages containing identical or overlapping information – such as baggage rules and deals – without clear cross-linking or content consolidation. This duplication creates confusion for users, hampers SEO performance, and increases risk of outdated or inconsistent information across the site.
How Might We…
Define templates that fit a wide range of pages – from visually driven with short-written content to rich in information with little visual appeal – leaning into bolder web design
Context & Strategy
Context:
Templates serve as the foundational structure. Each template is designed to accommodate specific content needs while maintaining visual and functional consistency – utilizing components for flexibility.
Strategy:
Templates are defined based on density of content
Components will help to demonstrate where the page sits within the site map
Templates highlight which components can be utilized
I developed three main templates in low-fidelity to be used from low to high density pages.
Templates in Hi-Fidelity
Lastly, for a stakeholder meeting, I designed high-fidelity templates to illustrate how the proposed layouts could function in practice. These designs aimed to highlight the value and scalability of standardized templates while presenting a clear vision for the future of the Amtrak website. To provide context and contrast, each template (mobile versions were created as well) was paired with a corresponding screenshot of the current production version.
A key architectural feature of these pages is the dynamic hero section, which adapts based on the user's depth within the site hierarchy. As visitors transition from high-level Tier 1 pages, which prioritize eye catching visuals and direct CTAs, into deeper Tier 2 and Tier 3 levels, the layout shifts to accommodate more comprehensive, information-rich content.
Post-Project Summary
Senior leadership and stakeholders were very pleased with the presentation I gave, and the templates have approval. The next steps are to develop and test our template strategy. We need to build components and templates into Design System for mass re-use, and to launch design variants through experimentation for top-level navigation structure and loyalty pages.