Role: Lead UX & Systems Designer
Context: Large-scale AEM (Adobe Experience Manager) re-platforming and digital transformation.
Deliverables: E-commerce website redesign, centralized Design System, and coded interactive component library.
Overview
The Home Depot Canada was preparing for a massive Adobe Experience Manager (AEM) re-platforming. Their legacy platform had accumulated significant usability debt, featuring inconsistent UI patterns and a disjointed frontend architecture. A simple lift-and-shift of the existing pages onto the new tech stack would have carried those same systemic issues over.
My role was to establish a centralized design system and a coded component library to guide the redesign. This provided multiple product teams with a single source of truth to overhaul the entire e-commerce experience—from product discovery to checkout—ensuring accessibility, consistency, and speed.
Business Impact
- Conversion & Engagement: [Insert % lift in conversion rate / reduction in bounce rate following the deployment.]
- Engineering Velocity: [Insert % or hours saved in time-to-market for new features by utilizing the centralized library.]
- System Adoption: [Insert the number of cross-functional teams you governed or how widely the system was adopted.]
Auditing the Legacy Platform
Before establishing the new architecture, I mapped the existing friction points across the site. The platform featured dozens of conflicting button styles, mismatched product cards, and fragmented navigation patterns. Design and engineering were also highly siloed. Designers handed off static files, leaving engineers to interpret complex states and responsive behaviors, which routinely slowed down the QA process. Furthermore, the upcoming AEM migration required modular, reusable components to function properly.
Building the Coded Component Library
Static design files fall short for an e-commerce platform with complex states like inventory alerts, pricing variants, and dynamic cart behaviors. I developed a working, coded prototype of the Home Depot Component Library (available to view on GitHub) to serve as a shared language between UX and engineering.
By building these interactive prototypes in code, we tested complex behaviors—like mega-menus and filtering facets—right in the browser before pushing them into the costly AEM development pipeline. We embedded AODA/WCAG compliance directly into the foundational components, baking in ARIA labels, focus states, and contrast ratios from the start. This responsive, coded approach allowed stakeholders to interact with components natively across all breakpoints, cutting down on late-stage engineering feedback loops.
Applying the System to E-Commerce Workflows
With the structural foundation set, we targeted the primary conversion flows.
Product Discovery & Navigation
Users frequently had trouble filtering through Home Depot’s massive SKU count. We deployed standardized, scannable product cards and faceted search filters from the design system. This allowed users to easily compare price, ratings, and availability directly from the search page.
Product Detail Pages (PDP)
The legacy PDPs were cluttered and often buried key purchasing decisions. We re-architected the information hierarchy using modular alert banners and standardized typography tokens. This pulled fulfillment options (like In-Store Pickup vs. Delivery availability) to the forefront and smoothed out the “Add to Cart” flow.
Governance and Team Adoption
A system only works if product teams integrate it into their workflow. I cooperated with UX, product managers, and AEM developers to ensure the design patterns mapped cleanly to Adobe’s specific technical constraints. I also established a clear intake process for proposing and vetting new patterns. When a team requested a bespoke component, we evaluated it against the existing system to see how an established pattern could solve the underlying user problem.
