Case study · AutoZone

AZ Checkout Experience

A four-step checkout wizard, rebuilt as one native screen in the AutoZone app.

Project roleLead Product Designer

PlatformAutoZone app · iOS, built in SwiftUI

ScopeResearch, flows, UI, prototyping, and SwiftUI handoff

Delivery section: shipping address and ground delivery with item thumbnails — One screen, top to bottom: the signed-in checkout with a saved card, Rewards balance, and order summary.

AutoZone Rewards balance with an Apply button, and a saved Visa asking only for the security code — One screen, top to bottom: the signed-in checkout with a saved card, Rewards balance, and order summary.

4 → 1 steps to place an order: cart, shipping, payment, and review now share one screen

Every way to get it ship to home, store pickup, split shipments, and multiple delivery speeds on the same screen

Native built in SwiftUI as part of the app's rebuild from a web wrapper

Context

A new app deserved a new checkout

The AutoZone app started as a wrapper around the mobile website. When the company rebuilt it natively in SwiftUI, checkout was where the rebuild mattered most.

The old checkout was a four-step wizard, with cart, shipping, payment, and review on separate screens. Customers couldn't see their whole order until the last step. As Senior UI/UX Designer, I led product design for the new checkout, from user interviews and competitive analysis through prototypes tested with users and SwiftUI components built with our engineers.

The web checkout was redesigned in parallel, within its own design system. This case study follows the app.

The problem

Four screens before you could see your order

The old flow walked customers through cart, shipping, payment, and review one screen at a time. Each step hid the others, so the full order, delivery, and total only came together at the end.

The new checkout puts every step on one scrolling screen. Customers can review and change anything without going back.

Illustration of the old flow: four phone screens for cart, shipping, payment, and review, one after another

Illustration of the new structure: one phone screen with delivery, payment, promo and rewards, and order summary stacked

Starting checkout

Pick how to pay before you start

Checkout opens from the cart as a bottom sheet with every way to pay up front: card, Apple Pay, or PayPal. Choosing card goes straight to the one-screen checkout, with delivery at the top and the card form ready to fill.

The cart with the Checkout Methods sheet: checkout with card, Apple Pay, or PayPal — **Checkout Methods**The entry point from the cart

The one-screen checkout with delivery at the top and the card form below — **The one-screen checkout**Card form ready to fill below delivery

One screen, every fulfillment

Ship it, pick it up, or both

The same screen adapts to how each order gets to the customer, so store pickup, split shipments, and faster delivery never send anyone down a separate flow.

Checkout shipping to a home address with ground delivery — **Ship to home**Delivery address and speed, then payment

Checkout for store pickup showing who's picking up, the store, and its hours — **Store pickup**Pickup person, store, and hours replace shipping

Checkout with some items delivered and others picked up in store — **Split shipment**Delivered and picked-up items grouped separately

Checkout with ground and same-day delivery in one order — **Multiple delivery speeds**Ground and same-day options per shipment

Payment

Fast for returning customers, simple for everyone else

New card, saved card, or express pay all live in the same payment section. Saved cards only ask for the security code, and express options swap the purchase button for a one-tap native checkout.

New card entry with card number, expiry, and CVV in one field — **New card**Card, expiry, and CVV in one field group

Saved Visa card asking only for the security code — **Saved card**Verify the security code and go

Payment options with Apple Pay selected — **Express pay**Apple Pay selected as the payment method

Details on demand

Edit anything without leaving the page

Every change opens as a bottom sheet over the checkout: rewards, gift cards, addresses, delivery speed, and who's picking up. Close the sheet and the customer is right where they were.

Earn AutoZone Rewards sheet to find or enter a rewards ID — **AutoZone Rewards**Earn and apply rewards

Shipping address form sheet — **Shipping address**Add or edit an address

Delivery option sheet: ground, next day, or same day — **Delivery options**Change speed for a shipment

Who's picking up sheet with an alternative pickup person — **Pickup person**Choose who picks up the order

Built for native

Details that only a native rebuild allows

Because the app was rebuilt in SwiftUI, checkout could behave like a native app instead of a web page in a wrapper. I worked with our iOS engineers on custom components for the moments that mattered most.

A tab bar that becomes progress

The app's custom tab bar collapses into a progress state during checkout, so customers always know where they are without a separate step indicator.

Back means back

Swipe-back gestures were rebuilt to tell going back a screen apart from going back a step, so a swipe never throws away what a customer entered.

Sheets, not new pages

Rewards, addresses, delivery, and pickup details open as bottom sheets, keeping the order in view underneath.

Outcome

Shipped in the native app

One screen instead of fourCart, shipping, payment, and review now live on a single scrolling screen, so customers see everything they're buying before they commit.

Built for how people orderThe same screen handles ship to home, store pickup, split shipments, and multiple delivery options without a separate path.

Native from the ground upCheckout shipped as part of the app's SwiftUI rebuild, replacing a web-wrapper experience.

Next case study

KeepStock Design System

View case study