Projects
Microsoft Outsource Leysi Piton Three Pillars Access Direct Giga Graphic Design
Resume

Client

Copilot Pay | Microsoft Shopping

Role

Designer (interaction, visual, prototyping, design system)

Timeline

7 weeks

Platform

Browser / Desktop / Mobile

Bringing frictionless native checkout to Copilot shopping

Copilot Pay product detail page with native checkout

Overview

Copilot Pay is Microsoft's first native checkout inside Copilot across browser, desktop, and mobile. It surfaces Buy buttons on product cards and PDPs, then enables express checkout through Apple Pay, PayPal, Venmo, Google Pay, Shop Pay, and Amazon Pay. Before this work, users were redirected to retailer sites, which introduced friction and broke continuity.

Team & Role

I worked with a principal designer, PM, and engineers over a 7 week sprint, leading interaction design, visual design, prototyping, and design system work. My focus was making native wallet checkout feel coherent inside Copilot while staying scalable across platforms and partner payment experiences.

Enable frictionless checkout inside Copilot while standardizing visual and interaction patterns across native wallets.

Bang & Olufsen checkout flow in dark mode

FRICTIONLESSCONSISTENTSCALABLEAI COMMERCE

Goals

The project focused on keeping users inside Copilot through checkout, standardizing payment interactions across multiple wallet brands, and expanding Microsoft's AI commerce capabilities with a reusable foundation for future shopping flows.

Responsibilities

Designed express checkout flows for desktop and mobile.

Created an intermediate screen showing all payment options before opening native wallets.

Evaluated button placement above and below product info for usability across devices.

Rebuilt and expanded the Copilot Pay component library across product cards, carousels, PDP side panels, checkout sheets, input fields, order summary, confirmation pages, and payment icons.

Standardized design tokens, spacing, typography, light and dark modes, and color consolidation.

Built prototypes and internal specs to align the work with cross-team design standards.

Designing Across Native Wallets

One of the core challenges was integrating multiple native wallet experiences, each with different branding, affordances, and interaction expectations, without making Copilot feel fragmented. The solution was an intermediate selection screen and a tighter component system that kept the transition into each wallet legible and predictable.

Desktop Copilot Pay recommendation surface

Mobile Copilot Pay multi-step checkout experience

Challenges

Multiple native wallet UIs introduced different branding and interaction patterns.

Desktop and mobile needed to feel consistent without ignoring platform-specific constraints.

The component library needed to scale quickly while remaining reusable for future AI commerce scenarios.

Express checkout had to slot naturally into both product cards and PDPs without breaking the shopping flow.

Express checkout across brands

Each express partner brought its own visual system. The intermediate selection screen and shared component foundation let Amazon, PayPal, and other wallets coexist inside Copilot without losing brand recognition or breaking the flow.

PayPal express checkout variant inside Copilot

Copilot Pay establishes Microsoft's first frictionless native checkout inside Copilot, creates a robust design-system foundation for future AI-assisted commerce, and supports seamless shopping across Microsoft platforms with scalable, consistent components.

Impact