Checkout redesign

Reimagining the Staples checkout experience to meet user needs, facilitate and improve conversion.

-During user testing, Fullstory sessions and through direct costumer feedback channels, many users mentioned not being able to see a clear ‘whole’ picture of what they were trying to purchase, creating a sense of uncertainty and the potential for abandonment. The proposition consists of a new, more visible and intuitive layout for the entire checkout screen based on competitive analysis and user research.

Overview and Key requirements

-Express checkout option w/ multiple payment methods should occupy the most prominent real state on the screen and be the first UI element the user interacts with and facilitate a faster conversion.

-Express checkout option should include extra payment methods (multiple BNPL, other) to future proof the new design.

-Checkout product tiles need to be redesign to fit new screen and take less valuable space and be visible above the fold

-All content should be stacked at left side of screen while keeping existing Order Summary at right side.

Challenges

-Competitive analysis showed that being able to enter information (email/address/etc) right on the page/screen is the expected behavior and the most intuitive. However the functionality of the site with regards to the use of a drawer component to enter data had to remain as is, due to platform constraints and business priorities.

Production/Existing experience

Competitive analysis

While direct competitors such as Wayfair still demand to sign in or create an account when starting the checkout process, we focused on brands such as Swimoutlet, CVS and Macy’s that are allowing costumers to pay in different ways without the friction of having to create an account in order to finish the transaction. Online shoppers that might not be regular Staples costumers might abandon the cart and not finish the purchase if forced to create an account to proceed. The express checkout options are also displayed front and foremost to encourage immediate conversion.

UX Research Goals

* Evaluate the ease of use, accessibility, and user confidence of the Staples.com Checkout redesign and identify opportunities for future improvements.

* Task: Finish purchasing item on your cart.

* Method: Unmoderated sessions recorded on User Testing platform, using Figma and Axure clickable prototypes.

* Demographics: 8-10 US adults who regularly shop online.

(Multiple sections of the new checkout experience such as entering payment information or editing a credit card were tested separately)

Pre-test feedback

“ I cannot see the item that was in my cart anymore”
“ When I shop other sites or brands I can pay quickly. It’s frustrating to have to create accounts every time you shop ”
“I prefer to see my information updated as I enter it, and not end up somewhere else and having to go back”
“When I’m ready to place my order I need to see the order details on the screen to do a final check”

Key Findings

* All participants felt the checkout page was very easy to navigate and it was what they expected to find.

* 8 out of 10 participants were able to see the item information (checkout tile) without any issue and with minimal or no scrolling.

* On mobile XS, 4 out of 10 participants did not feel comfortable hitting the ‘place order’ CTA if they did not see the price and shipping charges displayed above.

A/B testing

* On the live site the new design is being A/B tested and performing very well, in accordance to what we saw during usability testing.

*While not fully rolled out yet, the new checkout redesign is already live on the recently launched mobile app.