THE NORTH FACE CHECKOUT
A checkout redesign built to reduce friction and increase conversions.
Working from UX wireframes, I translated the checkout redesign into a fully branded, production-ready UI, building the component library and designing every screen across the full purchase ecosystem: mini cart, cart, guest and member checkout, express checkout, order confirmation, and a complete set of variations including BOPIS, loyalty rewards, gift with purchase, upsell, promotions, and error states.
It shipped. It's live on thenorthface.com today.
My role
Component design
High-fidelity UI & brand application
Multi-breakpoint execution (mobile, tablet, desktop)
Happy path prototyping
Highlights
EVERY STATE DESIGNED
Happy paths, edge cases, errors, and empty states, all designed before reaching engineering.
CONSISTENT ACROSS EVERY SURFACE
Components built to scale across mobile, tablet, and desktop from the start.
BEYOND DIGITAL
BOPIS and retail checkout variations extended the experience into physical retail.
FROM WIREFRAME TO PRODUCTION
Typography, color, interaction states, brand applied consistently across mobile, tablet, and desktop.
Happy path
Checkout flow
PDP
The user makes a product selection on the PDP and adds it to the cart.
MINI CART
The mini cart slides from the right when the product is added to the cart.
Cart
Sticky CTA with two options:
Checkout and Express Checkout.
Once the items are in the cart, the user has the option to use Express Checkout.
If the user wants to update the cart, clicking the ellipsis menu on the product card will open a drawer.
Shipping & Delivery
The Checkout CTA guides users to the next step: Shipping and Delivery. This process differs for Guests and Members: Guests must enter their information, while Members have their Shipping and Delivery form pre-saved.
GUEST
MEMBER
Payment
There are four payment options: Credit Card, PayPal, Apple Pay, and Klarna. Credit Card is the default option. Guests must enter their information, while Members have their Credit Card information pre-saved.
GUEST
MEMBER
Order confirmation
The user receives all information regarding their order: order number, products ordered, delivery date, shipping details, and total cost.
