Checkout-Bag.png

Bag

In the old Checkout experience, we noticed a trend where users would go through Checkout, get to their total, and drop off. To prevent this, we brought all the pricing and details into the bag so a customer would know how much their items would cost before filling out all of their personal information.

 
Checkout-Fulfillment.png

Fulfillment

Customers are able to choose whether or not they’d like their products delivered or if they’d like to pick them up in store. Toggling back and forth between the options provides information on when or where they can receive their items and make selections that work best for them.

 
Checkout-Pay.png

Payment

All payment options are displayed directly on one page. Clicking on any of the options will open a drawer to display areas where someone can enter their credit card information, PayPal information, etc. For customers who choose to sign in with their Apple ID, all of their personal information is saved and pre-populated, which makes jumping to the next step quick and easy.

 
Checkout-Review.png

Review

When all of the shipping, pickup, and payment details are completed, customers will see a summary of their selections. Under each Detail, is an option to quickly go back and edit any information they may need to revise before placing their order.

 
Checkout-Momentum.png

Confirmation

After an order has been placed, customers are taken to a final page that lists their confirmation information, order number, and a list of all the products they’ve purchased.

 
Checkout-Components.png

Components

We discovered a vast number of scenarios that could change the way pages appear. To accommodate these differences, we developed a “components” system where each small section of the design could be swapped out with a design variant to display different types of information.

This components system saved time by reducing the amount of comps required to communicate between design and development teams. It also aided future teams, by providing design patterns that could be reused in creating new variants to meet Checkout requirements of other countries across the globe.

 
 

Agency

Huge Inc, via embedded team at Apple


My Role

Designer


Team

Associate Creative Directors: Kirk von Rohr, Kelly Rodgers, Isaiah Andrew
Project Mangers: Keith Foy, John Davenport
Copy: Azadeh Ensha, Rob Thiemann
UX: Dan Fornal, Joanna Gee
Art Director: Yan Argeris
Designers: Ellen Chou, Allen Loggins, Daniel Reibold