Case study

Common Patterns Program, (AWS Fintech Design System)

Design Manager/Lead UX designer - AWS Fintech

Streamlining Design and Efficiency: AWS Fintech's Common Patterns Initiative Enhances Usability Across AWS Fintech Products (23+)

what we worked on

Design

UX Research

Product Design

Product Management

Challenge: AWS Fintech faced inconsistent user interfaces, high development costs, and usability issues across it's 23 + products.

A shot of the figjam board we used

The journey to create a powerful and accessible Data Grid for AWS Fintech began with a thorough exploration of existing solutions.  Initially, we considered third-party options like AG Grid, but their pricing model, which charged per product per developer, proved cost-prohibitive for our extensive product suite.

Seeking an alternative, we consulted with the Cloudscape team, Amazon's central design system team.  While they acknowledged the demand for a robust Data Grid component, having received multiple requests from other teams, they lacked the resources to prioritize its development in their roadmap.

This presented a unique opportunity for AWS Fintech to take ownership and spearhead the creation of a Data Grid that would not only meet our specific needs but also benefit the broader Amazon ecosystem.

To ensure the Data Grid met the diverse needs of our teams, I facilitated numerous workshops across AWS Fintech and partner organizations, engaging with over 10 partner teams to gather requirements and validate design decisions. This collaborative process led to the identification of key features such as:

  • Grouped headers: For improved data organization and visual hierarchy.
  • Keyboard navigation: To enhance accessibility and user efficiency.
  • Excel copy-paste functionality:  To streamline data transfer and manipulation.

Leveraging these insights, I led the development of the Data Grid component, prioritizing high-impact features through a carefully managed ATL/BTL list.  Throughout the process, I collaborated closely with the Cloudscape team to ensure compatibility and leverage their expertise, ultimately achieving AA accessibility compliance through rigorous design and testing.

And in December 2024, we successfully launched the Data Grid, achieving a shared CFO-level goal!

This user-centric approach and dedication to accessibility resulted in a Data Grid component that delivered exceptional value across AWS Fintech:

  • Efficiency:  Developers saved up to 170 hours per adoption, significantly accelerating development timelines.
  • Accessibility:  Our Data Grid became the first AA compliant component across AWS Fintech, setting a new standard for inclusivity.
  • Wide Adoption:  Over 80 teams across Amazon committed to adopting the Data Grid, demonstrating its broad appeal and utility.
  • User Satisfaction:  In user testing, 100% of participants preferred our Data Grid over Cloudscape's default option.
  • Cross-Team Collaboration:  The successful partnership with Cloudscape benefited the entire Amazon ecosystem, fostering a culture of shared learning and innovation.
  • Future-Proofing:  The project laid the foundation for an ecosystem of high-quality, reusable components, promoting consistency and efficiency across future projects.

The Data Grid project exemplifies the power of user research, cross-team collaboration, and a commitment to accessibility in driving the development of high-impact design solutions. By delivering a feature-rich, user-friendly, and accessible component, we empowered teams across Amazon to build better products and experiences.

Process:

  1. Conducted numerous workshops across AWS Fintech and partner organizations
    • Engaged with 10+ partner teams to validate needs and gather requirements
    • Identified key features such as grouped headers, keyboard navigation, and Excel copy-paste functionality
  2. Led the development of the Data Grid component based on validated needs
  3. Implemented a prioritized ATL/BTL list to focus on high-impact features
  4. Collaborated closely with the Cloudscape team to ensure compatibility and leverage their expertise
  5. Achieved AA accessibility compliance through rigorous design and testing

Results:

  1. Efficiency: Up to 170 hours saved in developer time per adoption
  2. Accessibility: First AA compliant component across AWS Fintech
  3. Wide Adoption: Commitments from over 80 teams across Amazon
  4. User Satisfaction: 100% of users preferred our Data Grid over Cloudscape's default
  5. Cross-Team Collaboration: Successful partnership with Cloudscape benefiting the entire Amazon ecosystem
  6. Feature-Rich Design: Delivered validated features including grouped headers, keyboard navigation, and Excel copy-paste functionality
  7. Future-Proofing: Laid foundation for an ecosystem of high-quality, reusable components

Key Partnership with Cloudscape: Our collaboration with the Cloudscape team was crucial to the project's success, ensuring the Data Grid component met AWS Fintech's specific needs while integrating seamlessly with Amazon's broader design ecosystem.

Challenge: AWS Fintech struggled with fragmented notification systems across its products, leading to inconsistent user experiences and reduced productivity.

Role: Led the initiative to develop a unified notifications system as part of the Common Patterns team.

Approach:

  1. Conducted needs assessment, identifying 9 instances for common notifications.
  2. Prioritized features with stakeholders.
  3. Partnered with Uno for development.
  4. Focused on user-centric, standardized design.

Solution: Developed a unified notifications pattern featuring:

  • In-app and email digest notifications
  • Customizable notification types
  • Integration with existing systems

Expected Results:

  • Reduced user clicks/steps
  • Improved cross-product learnability
  • Enhanced user engagement and productivity
  • Standardized implementation for development teams

Impact: This pattern sets the foundation for a more cohesive user experience across AWS Fintech products, demonstrating my ability to lead collaborative initiatives that drive significant improvements in user experience and product integration.

Challenge: AWS Fintech products lacked a consistent, user-friendly approach to guide users through complex workflows, leading to inefficiencies and user frustration.

Role: Led the development of a Guided/Stepped Out Workflow pattern as part of the Common Patterns team.

Approach:

  1. Identified limitations in current wizard components.
  2. Explored various design themes through audits and working sessions.
  3. Conducted usability sessions with 5 users to validate key features.
  4. Collaborated with FinPress as the building partner.

Solution: Developed a Guided Workflow pattern featuring:

  • Sub-steps within each main step
  • Non-linear navigation
  • Expand/collapse pane functionality
  • Flexible design to optimize screen real estate

Expected Results:

  • Improved navigation of complex workflows
  • Reduced user frustration and cognitive load
  • Increased efficiency in task completion
  • Consistent user experience across Fintech products

Impact: The pattern has been adopted by FinPress and ADAPT, with potential for wider adoption across Roster and other Amazon-wide products. This demonstrates my ability to identify common user pain points and develop scalable solutions that improve user experience across multiple products.

next Case study

Jazz Template Library (T-Mobile w/ Piktorlabs)

explore