E-Commerce Design System

Tommy Hilfiger

2021 - 2023
Lead UX Designer (North America)

Using Figma, we used established branding and content strategies, dev standards, style guides, and best practices in design principles and accessibility.

By standardizing design elements, we improved the

  • efficiency of UI/UX development
  • ensured brand consistency across global markets
  • streamlined workflows
  • reduced development time
  • supported scalable growth across digital touchpoints.

Design Process

Design Thinking Approach

Empathize

Understanding the problem

Tommy Hilfiger, a global fashion brand, faced growing challenges in maintaining design consistency. The lack of a unified design system resulted in:

  • Inconsistent UI elements across different global markets.

  • Fragmented design documentation, leading to inefficiencies for designers and developers.

  • Scalability issues, making it difficult to integrate new features or support multiple teams working across various digital touchpoints.

To address these challenges, the goal was to create a comprehensive, scalable, and developer-friendly design system that streamlined design workflows while maintaining brand identity.

Define

Key Objectives

Based on research, stakeholder interviews, and competitive analysis, the main objectives were:

1. Establish a Unified Design Language – Ensure consistent branding across all platforms.

2. Enhance Collaboration Between Designers and Developers – Minimize redundant work and improve efficiency.

3. Improve Scalability – Design a system that supports multiple teams and evolving product needs.

4. Optimize the Developer Handoff Process – Provide clear, accessible documentation and code-ready components.

Ideate

Exploring Possible Solutions

The design team explored various approaches, leveraging insights from existing design systems such as Material Design, Shopify Polaris, and Salesforce Lightning. Key focus areas included:

  • Conducting a UI inventory to assess inconsistencies and redundant components.

  • Evaluating design tools to improve collaboration (transitioning from Sketch to Figma for real-time collaboration).

  • Implementing an AA Web Content Accessibility Guidelines compliant modular component system that allowed flexibility while maintaining uniformity.

  • Testing documentation frameworks to ensure accessibility for designers and developers.

Prototype

Building the Design System

Component Library Development

  • Created a comprehensive UI library with standardized typography, colors, buttons, and form elements.
  • Ensured components were responsive, scalable, and reusable.
  • Ensure better accessibility practices to achieve AA compliance.

Documentation and Guidelines

  • Built a Figma-based component library for designers, ensuring easy updates and team-wide access.
  • Integrated a developer-friendly documentation site using Storybook, providing real-time previews of UI components.
  • Established best practices and usage guidelines to maintain consistency across digital experiences.

Test & Implement

Launching the Design System

Testing and Feedback

  • Conducted usability tests with internal design and engineering teams to validate ease of use.
  • Gathered feedback through weekly design critiques and developer QA sessions.
  • Iterated on component accessibility, refining contrast ratios and keyboard navigation for inclusivity.

Once refined, the design system was rolled out to site recreation to support the switch to SalesForce from Websphere.

Training sessions to onboard teams and ensure smooth adoption were conducted.

 Established a governance model to manage future updates and improvements.

Impact & Results

By implementing a robust and scalable design system, Tommy Hilfiger strengthened its digital brand presence, improved operational efficiency, and provided a seamless experience for users and stakeholders alike.

  • Faster design-to-development turnaround, reducing redundant work.

  • Consistent branding across global markets, reinforcing Tommy Hilfiger’s identity.

  • Improved collaboration between designers and engineers, leading to fewer design inconsistencies in development.

  • Scalable and flexible system, allowing seamless integration of new features.

Reflection & Next Steps

This project highlighted the importance of:

  • Early cross-functional collaboration between designers and developers.

  • Continuous iteration and governance to maintain the system’s relevance.

  • Scalability in design systems, ensuring future adaptability for new platforms and trends.

Future improvements may include:

  • Automating component updates to further streamline development.

  • Integrating AI-powered design suggestions to optimize layouts dynamically.

View More Tommy Hilfiger Projects