← All work
Visual Systems · Payments · Amazon Business · 2023

Amazon Business
Pay Studio

A design system organized in an atomic structure to enable rapid construction of payment method use cases — with pre-defined components, templates, and use cases that let teams ship payment products quickly.

Role
Visual Systems Designer
Team
Amazon Business
Scope
Wireframes, Prototype, Production
Deliverables
18 Components · Templates · Use Cases
Amazon Business Pay Studio design system overview
Overview

A payment design system built for speed

The Amazon Business Pay Studio is a design system organized in an atomic structure to enable rapid construction of payment method use cases with pre-defined components, templates, and use cases. Payment solutions are preconfigured to enable quick building of payment products.

Work completed in 2023 with Amazon Business. I was responsible for component and template wireframing, design prototyping, and final production.

Explore the full system in Figma →

This system informed later product work including the Amazon Business Credit Card ECM experience (2024).


Core Elements

Components, templates, and use cases

The system is organized in three layers — each building on the last to move from atomic UI pieces to complete payment journeys.

Components

Components are the building blocks of the Amazon Business Pay Studio. I created 18 unique components — explore them in the Figma file.

Amazon Business Pay Studio components
Component library — 18 unique building blocks for payment method interfaces.

Templates

Templates are standalone interfaces for users to perform specific tasks. Templates were divided into task groups — explore here.

Amazon Business Pay Studio templates
Template library — standalone task interfaces grouped by workflow.

Use Cases

Use cases connect templates in a journey for a user to complete a payment task — see more use cases here.

Amazon Business Pay Studio use cases
Use case pathways — templates connected into end-to-end payment journeys.

Prototype

Adding a new payment method

Explore the use case pathway for adding a new payment method. Click through the flow or use arrow keys to navigate.

Explore full system in Figma →
Next project
Amazon Business Credit Card
View project →