Cart & Checkout Redesign

An evaluation of the Best Buy Cart & Checkout redesign in collaboration with Best Buy UX Research  
Project Type: App/Small View Web Redesign Evaluation
Tools: Figma, Miro, DScout, Confluence
Timeline: 2/14/2024 - 6/6/2024
Contributors:
Teddy Noun: UX Design | Prototyping | Research Planning
Jacob Schlesinger: User Research | Usability Testing Moderator

Overview

Problem Statement

The current purchase experience does not follow modern best practices resulting in confusion, degraded trust, and failure to purchase. The current cart, checkout, and order confirmation pages provide a sub-optimal experience on both mobile devices and a cluttered, unfocused experience on all screen sizes.

The Vision

By following the well-established industry best practices and relying heavily on Best Buy research, we can redesign the cart & checkout experience to be mobile-first, transparent, fast, and easy to use in order to build customer satisfaction and trust.

Users

Based off of site analytics and extensive market research, 5 different customer segments have been identified which capture all of Best Buy’s customer base. The two largest segments which most often checkout with the Best Buy App, or the mobile version of the Best Buy website, are Segments “1” and “2”. These customer segments were identified by the Best Buy Marketing team and are embodied by Ana and Swarupa; our two user personas.

User Persona: Segment 1

User Persona: Segment 2

Background

Best Buy’s mobile cart & checkout experience currently lacks many common best practices that could potentially make it more transparent, faster, and easier to use. Based on literature review style research, we decided that a complete end-to-end redesign was necessary in order to incorporate cart & checkout best-practices that were missing from the experience.

Feedback from Best Buy Designers

“The input forms on the Checkout - Payment page are not optimized.”
“The UI of the Order Confirmation page is cluttered”
“Autofill is not widely supported.”
“Design decisions within this experience are not guided or obvious. They also require significant mental load.”
“The Cart & Checkout experience has duplicative content.”
“The input forms on the Checkout - Payment page are not optimized.”
“The UI of the Order Confirmation page is cluttered”
“Autofill is not widely supported.”
“Design decisions within this experience are not guided or obvious. They also require significant mental load.”
“The Cart & Checkout experience has duplicative content.”

Best Buy’s Enterprise Initiatives

A major priority for Best Buy’s technology teams within half 1 of 2024 is to improve the Best Buy mobile shopping experience. This experience encapsulates the shopping and buying journey on Small View and App. The goal of this work is to make it easier for customers to engage in their visit to Best Buy’s digital platforms on their phone.

Key Insights from Previous Research

A literature review research study conducted internally at Best Buy in 2023 defined the best-practices which make up a “good” checkout experience which can be distilled into four key pillars...

The Redesign

Current View

The current Best Buy cart & checkout experience for mobile viewports spans 5 separate pages starting on “Cart” and ending on “Order Confirmation.” The key functionalities of these pages are to help users efficiently compare, review, and purchase items.
The Best Buy Design team conducted a comprehensive audit of each of the pages which included pattern review activities to make sure that all viewports had consistent experiences. They also conducted a best-practice audit which evaluated whether checkout best-practices were present within the experience.
Best Buy Researched Best Practices: The Best Buy checkout experience was missing 12 of the 28 total Best Buy checkout best-practices
Baymard Best Practices: The Best Buy checkout experience was missing 5 of the 18 total Baymard checkout best-practices
Nielson Norman Best Practices: The Best Buy checkout experience was missing 40 out of the 115 total Nielson Norman Best Practices.

Cart & Checkout Redesign

Based on the insights we gleaned from the best practice audit, the Best Buy “Buy” UX Design team collaborated to redesign the Cart & Checkout experience to better encapsulate many of the missing best-practices from all three sources.

Research Planning

Key Research Objectives & Questions

At this point in the design process, we knew we needed user feedback to further iterate, improve, and test our redesign. However, there were several open questions. “How do we focus our evaluative study so that we can collect rich and informative insights from users?”, and “How can we build excitement within the organization around our work so that it is prioritized by the research team?”
We needed to tell a consistent and compelling story about the work, and we needed to ensure that it aligns to our enterprise initiatives. To do this, I decided to revisit once again the previous BBY research on checkout best practices in order to gauge if the changes made in the redesign were effective in improving the checkout experience.

User-Focused Objective

Assess whether the cart & checkout redesign embodies the four key best practices outlined in our literature review style research

Enterprise-Focused Objective

Assess whether the cart & checkout redesign serves to advance our key enterprise objectives to establish a mobile first shopping experience

Key Research Questions

Heuristic Analysis & Prioritizing Research Questions

To determine the specific aspects of the redesign we wanted to test with users, I performed a heuristic analysis on each page of the cart & checkout experience, specifically calling out questions around the biggest changes to the experience now present in the redesigned experience. I then categorized each call-out by key best practice so that we could better prioritize our four research questions.

Heuristic Analysis by Page

Cart
Checkout Fulfillment
Checkout Payment
Order Review
Order Confirmation

User Scenario & Tasks

After presenting a research proposal which resonated with the Best Buy Research team, I achieved buy in. I collaborated with one of the Sr Researchers, Jacob Schlesinger. Together, we collaborated to create the user scenario and user tasks for a moderated usability study of the end-to-end redesign using our key objectives and research questions as guideposts.
User Scenario: Imagine that you’ve decided to buy this TV, but you need it tonight, so shipping is not going to work. Use the design to purchase the TV with an extended warranty from the Best Buy store near where you work in Richfield, Minnesota.

Tasks:

  • Switch fulfillment method from shipping to pickup.
  • Change the pickup location to the Richfield Best Buy.
  • Navigate through the checkout experience to the Order Confirmation page.

Prototyping

After aligning on the key objectives, research questions, scenario, and tasks, I needed to build an interactive prototype of the redesigned experience with all the functionalities required for users to complete the tasks.

Clickable Prototype

Usability Testing

Researcher: Jacob Schlesinger
Timeframe: May 22-23, 2024
Number of Participants: 9
Screeners: Best Buy Segment 1 & 2 Customers
Methodology: Moderated usability tasting & User interviews lasting one hour each
Approach: Nine one hour usability testing sessions were conducted 1-on-1 (Researcher & user) via Dscout. Participants were asked to think out loud while the completed the tasks provided to them. They were then asked post-task questions to collect additional feedback.

Findings

  • Switch from Shipping to Pickup: 9 out of 9 100%
  • Switch pickup location: 8 out of 9: 89%
  • Navigate through the checkout experience: 9 out of 9 100%
1
All participants successfully opened the fulfillment drawer and changed from shipping to pickup. However, after completing the task, a couple participants re-opened the fulfillment drawer explaining that they wanted immediate feedback on the cart that reflects their updated selection of pickup location.
2
All of the participants attempted to change the pickup location in cart and none felt comfortable moving forward in the checkout process without doing so. This suggests that users expect to the cart to have a robust and editable functionality.
3
All except one of the participants were successful in changing their pickup location in the fulfillment drawer in cart. The participant who was unsuccessful explained that they could not find the link - and that it was not distinctive or obvious enough to them
4
A couple of participants stated that the chevron within the fulfillment method section of the cart did not do a good job of indicating that fulfillment method could be changed to pickup - rather, they thought that tapping in that location would allow them to change their shipping options specifically.
5
Participants want the ability to edit contact information on the Order Review page including the flexibility ro add/edit their cart, contact information, payment information, and fulfillment information so they don’t have to waste time and effort returning to the start of the checkout process and repeating steps.
6
Some participants lacked confidence in their understanding of the origin of the  $80 savings depicted within the order summary. 4 out of 9 of the participants suggested a display of pricing on the order summary that includes the original price, the new price, and savings per item.

Iterations

Based on the insights we obtained through usability testing, the Best Buy UX Design team iterated the cart & checkout wireframes by enhancing the UI components that caused confusion for users during usability testing.

Results

The insights we gained from this study served as key data points informing the most up-to-date design iteration of Best Buy's Cart & Checkout Experience.

The study itself served to boost excitement within the Best Buy organization around The Cart & Checkout Redesign, and even informed the design decisions of other experiences within the Best Buy App/Website such as the "Buy Now Express Checkout Experience."

Once the experience is live, we will be monitoring KPIs such as conversion rate via site analytics. The final iteration of the Cart & Checkout Redesign will be developed and launched on Best Buy's live site and app during Q3 of Best Buy's fiscal year.

More Case Studies

Buy Now

UX Design | UX Research
An evaluation of the Best Buy “Buy Now” checkout redesign in collaboration with Best Buy UX Design/Research

TrailBlazer

UX Design | UX Research | UI
Simplifying the planning process for camping trips
Three iPhone Mockups depicting the Home page, the "Trips" page, and the "Packing List" page of the TrailBlazer App

Say Hello

I’m always looking for new opportunities to create outstanding user experiences! Please feel free to reach out for a potential project, a potential job opportunity, or to just say hi! I’ll do my best to answer your email!
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.