Native Cart for Best Buy

Jan 2016 - April 2017

Overview
​

When I joined Best Buy in 2016, the year-old shopping app used a web-wrapped cart, which was slow to load and not optimized for touch. I was tasked with designing and delivering a native experience for cart to have feature parity with the web version. The goal was to reduce cart abandonment, and increase revenue. 

I was the lead designer for both iOS and Android apps though discovery, testing, delivery, and product launch. I partnered with a product manager to strategize feature rollout, supported four agile teams through development, and worked with QA to ensure design quality.

​The native cart launched in February 2017 in a phased rollout. Early analytics show an increase in average order value and an increase in add-on purchases (such as Geek Squad service or product accessories). Designs from this project were foundational in developing Best Buy's pattern library for their suite of apps.

Discovery
​

To achieve the goal of reducing cart abandonment, I focused on providing CLARITY and CONTROL. CLARITY to give confidence that the customer has all of the information they need and CONTROL allowing the customer to build and adjust their cart to their liking. This criteria was based on the research below.

Neilson Norman
Many shoppers use the shopping cart to make final purchase decisions. Usable shopping carts provide product detail, allow access to product pages, and let users easily delete items.
Baymard - Top 5 Reasons for cart abandonment
  • 1. Extra costs too high
  • 2. Account required
  • 3. Long, complicated checkout process
  • 4. Couldn't see/calculate cost up front
  • 5. Crashes or errors

Evaluating the Web-Wrapped Cart​
​

I started my research with a thorough evaluation of the existing cart. Best Buy cart scenarios are uniquely complicated, due to the need for special product accessories and services

The Good
  • Big clear product images and price accurately correspond to the user's selection
  • Title links to full information on the product detail page
  • Quantity adjustments are easy to find

The Bad
  • It is hard to understand what items are in your cart vs. being offered as an upsell
  • The subtotal is hard to understand, it is not visible as you add and remove items from your cart
  • Delivery options are buried
  • Designs are not optimized for touch

The Approach
​

My approach was to create a structure to supports cart-building behaviors. This structure needed to be scalable to support all existing and future product scenarios.

This structure allows customers to easily SCAN the contents of their cart and FOCUS on important options for cart-building behaviors. 

Cards for Grouping

To provide easy scanning, I used cards to create hierarchy, grouping the main product with related attachments. 

Receipt-Style Pricing

Drawing inspiration from receipts, I chose to right align all prices such that the subtotal is always visible and responsive.

Focused Attach Options

In a bold departure from the existing web-wrapped cart, I obscured add-on products and services from the summary view. This maintained clarity on the Summary view while allowing for focused consideration of add-on items. 

Testing The Structure
​

I created three prototypes manifesting the above approach, and set out to validate with customers. Leveraging our access to Best Buy's retail locations, I recruited participants using store intercepts.
Findings: 
  • Full edit mode (Structure A) is confusing. Attach screens (Structure B) and modal (Structure C) are more clear
  • Subtotal is easily understood using the right-aligned receipt pattern
  • Removing an item works, but took too many steps
  • Geek Squad options were not clearly understood
Adjustments:
  • Use separate attach screen (Structure B) for MVP. It is more flexible and scalable than modal (Structure C)
  • Provide quantity control on summary screen, including product removal (Structure B)
  • For Geek Squad protection, give as much of a value prop as possible and explain difference between plan types

Quantity Control​

​Control
​For simplicity, the main product controls the quantity, and add-on items will inherit the main quantity. The add-on items can have further control from their attach page.

Clarity
For the main product, since the quantity is left aligned, I displayed the total item price and added the /ea pricing. For add-on items, I displayed the Quantity directly under the price, acting as a multiplier.

Product Removal

The main product can simply be removed by decreasing the quantity to 0. When the quantity is 1, I display a trash can to reinforce the concept. I added confirm removal step to add a touch of friction in the destructive action.

Checking Out​
​

Checkout Structure

To provide checkout options without feeling like an extra step, I used a drawer expanding from the checkout dock. Additionally, the expanding drawer pattern provided a scalable space to accommodate current and future checkout methods.

Checkout Sign In States

To accommodate both Best Buy and guest checkouts, I created the following flowchart, which inform which of the screens will be presented to the user. This structure allows guests to keep moving forward, while understanding the benefits of signing in.

Error Messages
​

Since the app did not yet have a global messaging strategy, I created two main patterns for handling service errors to be used app-wide.
  • Snackbars: A more passive pattern used for when the immediate user action didn't happen as expected. (eg. quantity was not increased due to cart limits)
  • Modals: An active pattern for when user action is required, or when the state of the app changed in a way that could affect how the user proceeds. (eg. Item is no longer available in checkout)

Tablet
​

The tablet designs were optimized to reuse the phone code, and to have one design for portrait and landscape mode. This choice allowed us to launch quickly and learn about tablet usage before evolving a tablet-optimized design. This strategy was supported by the knowledge that tablet usage is 10% that of phone usage across the board.

Results
​
Native cart launched for both iOS and Android in February 2017. A phased rollout ramped up to 50% quickly. With half the traffic on native cart, we could compare conversion and average order value between native cart and web-wrapped cart. We looked at sessions where the user had looked at the cart at least once.

Early results point to native cart having a higher AOV (average order value) and higher attach rates. 

My decision to not present all add-on options in the summary view, a bold departure from the existing web design, is showing the benefit of higher attach rates. These findings are now being considered by the web team.

The visual designs and patterns I established in this project have been adopted app-wide as part of our design pattern library.

I consider this project a huge success, as I've delivered a solid baseline which can be built on and evolved. While there will be many ways to improve and iterate on the design, I am confident that I've provided a solid structure that can scale to accommodate future enhancements.