Google Checkout Templates

Problem

Designing one-off payment flows for over 100 integrations across Google led to fragmented experiences over time. This patchwork approach confused users and left our Payments team struggling to maintain consistency while supporting the larger infrastructure.

Skills

  • Design Systems
  • Project Management
  • AI Tooling
  • UX/UI Design

My Role

I was brought on to work with our Engineering and PM teams to create a standardized set of flows that made Google’s payment experience consistent while reducing design and maintenance costs for the team. This involved establishing a cross-team working group to support design systems and build/maintain shared component libraries.

Solution

After leading and participating in three cross-functional workshops focused on aligning partners and concepting solutions, I developed a workflow my team used to create over 30 research-backed flow templates. These were based on critical user journeys and provided the flexibility needed by Google teams integrating with our payments infrastructure.

As part of this effort, I built AI tooling that allowed us to analyze over 10,000 production screens, resulting in comprehensive design requirements and a clearer project scope.

Alongside the launch of our new design system, I trained our UX and Engineering teams on how to use design tokens, advanced Figma features, and component libraries to ensure correct and consistent adoption.

Impact

  • AI tooling saved over 250 hours of manual work analyzing UI patterns.
  • Achieved a 91% reduction in average screens per integration (from 115 to 10).
  • Led the migration of 9 existing integrations providing 1.4 billion in annual revenue to a new tech stack with improved UX, accessibility, and analytics, meeting or exceeding conversion targets.
  • Piloted a new accordion checkout design, increasing conversion by 8%.
  • Drove the launch of a brand new subscription service, generating $6M+ in annual revenue.
  • Created a workflow for managing style and layout overrides, improving integration seamlessness while keeping core UX consistent.
  • Contributed 8 new patterns to the design system.
  • Boosted design system adoption by 275% per month (from ~4,000 to ~15,000 component insertions), saving ~800 work hours monthly (around 4.5 FTEs).

Templated payment flows

Before

  • No shared components between integrations
  • No use of design tokens
  • No centralized source of truth

After

  • 4 new component libraries
  • Over 800 design tokens implemented to support multiple versions of Material Design
  • Clear documentation demonstrating core platform capabilities

Template Workflow

This workflow was used to design and build the checkout templates, emphasizing core user journeys and needs from our integrators.

Efficiency with AI

I created an AI agent to audit over 10,000 production screens, providing requirements for design system and screen templates.

Standardized Flow Templates

One example of over 30 flow templates built using our workflow and newly created design system.

Seamless Integrations

The templates were built to support custom styling, making our integration more seamless with the parent product.

Close Project