DELL.COM CART & CHECKOUT

Over the course of 3 years, I helped transform the buying process on Dell.com from a 1990's-looking, desktop-only, cluttered and tangled experience to a responsive, streamlined, and enjoyable user experience. During and after Dell's global e-commerce platform overhaul, with only one UX Designer (me) and one UX Architect for 2 years, revenue and CSAT vastly improved, validating the importance of our work. Budget and headcount grew to fuel further improvements. By year 3, with an additional designer, content strategist and acquisition of a testing and analytics team, we achieved a 30% total lift in customer satisfaction of the cart and checkout funnel from the previous years. Efforts to optimize, simplify, and add user-driven enhanced features continue to elevate Dell as a top global online retailer.

collage.jpg

 

Phase 1:  Lift and shift to the new, responsive platform.

Cart (before): Competing CTAs, tabs not well used, poor use of space

Shipping (before): Copy heavy, excessive forms fields (29), confusing payment options

Payment (before): Too much copy, poorly formatted forms, disorganized cart summary

>>  The architect and I started moving quickly to carry over the required features to the responsive platform while trying to lose as much as the unnecessary clutter as possible. I created the HTML/CSS prototype of the checkout flow and helped stitch it together with all other shopping path flows to make one, comprehensive prototype of the entire customer shopping experience. We took this prototype to Brazil to test consumer and small business users in both mobile and desktop views.

  Cart (usability):  Users thought this page was very clear but expected to see shipping and financing information here.

Cart (usability): Users thought this page was very clear but expected to see shipping and financing information here.

Shipping (usability): Users expected info to pre-populate for the address and "Create Account" section. They thought the Shipping and Payment info should be on the same page.

Payment (usability): Users expected to see specific credit card types, how to pay in installments, and a security icon or logo. The idea of splitting payments was confusing.

>>  Overall, there were relatively few problems with the checkout process, but we realized cultural differences and expectations would need to be accounted for. We also needed to correct our designs based on the user feedback and attack the list of prior optimizations: 

  • update VID, remove remnants and clutter
  • standardize components and language
  • review for excessive and repetitive information
  • reorganize the layout of all content to be more logical and efficient

 

 

Phase 2:  Optimization

Full throttle on optimizations. Now that we were past the basics, next we focused on payment types and the ability to split payments. We took a hard look at user task flows and ran competitive analysis to determine the current "best in class" criteria. A dozen more user tests were queued up to hone our designs before launch. 

Cart & Checkout user flow overview

Cart & Checkout user task flow

Mapping out all split payment combinations

We conducted another usability test with a refined mobile prototype for the checkout flow: 

  • streamlined flow, fewer steps/pages
  • no distractions (ads, unnecessary links, simple masthead)
  • better use of white space
  • autofill forms
  • only most necessary form fields for required user info

We ran A/B and multivariate tests on Dell.com for: 

  • sign-in page - make account creation faster and easier
  • cart page - show payment type icons, add secure wording
  • shipping page - fix inline formatting in forms
  • payment page - make the payment type icons clickable/selectable
  • confirmation page – add product ecosystem and the ability to create account
  • clickable/linked progress throughout the flow

Sign In (optimized)

  Shipping (optimized)

Shipping (optimized)

Payment (optimized)

>>  Results: The checkout path was clear, easy to navigate, and the easiest part of the entire customer shopping path! However, most users opted for "Guest Checkout" instead of creating an account. (Authenticated users = higher AOV and RPV)

 


Phase 3: Simplify and target

Design and launch of "fulfillment choice and delivery promise" and development of a highly simplified checkout experience. More specific optimizations targeted to raise KPIs and address customer pain points and a ton of testing.

 

Delivery Promise

Customers are confused about what a "ship date" is and when they will receive their order. Manufacturing affects when and how each item ships, so all items in an order may not ship together. We proposed the user can choose a delivery date and delivery method for each of their items.  How do we make this additional information clear and easily actionable for the user? How do we handle hot and cold users?

We went through 3 rounds of testing, carefully adjusting the language and interactions to figure out what worked and what didn't. Can users easily and naturally locate the zip code field in their Cart when choosing shipping options? Do users think the delivery dates and shipping dates are confusing? Are users  confused by item-level shipping and the inability to combine orders into a single shipment?

  • First round of testing – in their cart, users were looking for the delivery information by the item, not above where we had a zip code field
  • Second round – users were puzzled as to why they were choosing a delivery option for each item ("choose for each item" was overemphasized)
  • Third round – the most successful approach was to lead users to choose one delivery option for all items in their order but provide the ability to choose different delivery options for individual items

>>  Results: We saw a huge CSAT increase in US Consumer from 58% to 66% after launch.

 

Simplified Checkout

Reduce friction for customers who need to navigate between steps, maintain their personal information, apply their preferred payment and manage errors in the process. Through a full discovery process and numerous design iterations, we redefined user requirements for a simplified checkout experience:

  • Clarity of payment: Let me know my options, let me apply my exemptions and discounts and let me easily use non-traditional methods, such as Loyalty Rewards.
  • Clarity of navigation: Let me know how far I’ve come, how far I have left to go and how to go back if I need to.
  • Clarity of account management: Let me decide what information you save and let me easily retrieve that information when I need it.
  • Clarity of error management: Let me know when I need to change something and make it snappy.

Competitive research helped us set standards for a "best-in-class" checkout experience. Personas mapped to user stories were used as our frame of reference in a one-day design workshop with stakeholders, resulting in a (long) list of features addressing the user requirements. Prioritizing the features, stories and requirements was a large task.

The next usability test compared a multi-page checkout process to a one-page checkout process on both desktop and mobile. Both recipes used the same design for each step of the checkout process and both had the same amount of steps. Would users perceive one of the recipes as "easier" or "better"? Results showed that users were able to complete all tasks with the same amount of effort but many preferred the single-page prototype as it was "fast and easy". The business users thought it felt "too fast" and needed more detail to encourage them to double check their information. 

>> Results ?? While still determining if a multi-page or single-page flow is "better", continued testing is being done to keep optimizing each step. The presentation and selection of payment methods is still a big focus since that has historically been confusing for users. Will this current test reveal if a vertical or horizontal layout be easier to use across desktop and mobile?...