Portfolio 1: Dell Cart and Checkout

Timeframe of project: Summer 2015

This past summer of 2015 I had the privilege of working as the Product Manager for Dell’s Consumer Cart and Checkout team. The objective for the summer was to implement a responsive mobile cart and checkout experience in the United Kingdom, Dell’s third largest consumer market. I worked very closely with the design team in outlining the Engineering, Business, and Legal requirements for the UK expansion. Because the site will not go consumer-facing until 2016, mockups of the new responsive design have not been included for privacy reasons. The focus of this writeup is on design decision making.

Dell’s Cart and Checkout process consists of four screens. Cart, Shipping, Billing, and Verify/Submit.

Cart

The landing page of the Cart and Checkout domain is the Cart. The Desktop display provides information on items in the cart, suggested items to bundle with, and other payment and support info.

The redesign of this page is centered around the “Secure Checkout” and “Check out with Paypal” buttons, both of which have been flattened (under Dell’s new branding guidelines), enlarged, and center-displayed on the new responsive page. The aim is to improve conversion rates on mobile through a seamless cart to checkout transition.

To further reduce friction between cart and checkout, several features have been removed from Cart. Customer support information on the right-hand column as well as “Customers who bought this item also bought” have been removed, based on data implying low interaction with these features on mobile. Accepted forms of payment have been abstracted to the Payments page, where the information is more relevant.

Shipping

Shipping is the first step of Checkout. This is based on logic that a) the Shipping page has high completion rate and b) Users starting a process (Shipping) are more likely to finish it and further, complete remaining Checkout pages with higher bounce rates. The Desktop implementation of the page is cluttered with legal requirements and vestigial copywriting from previous updates of the site.

A large part of the page’s redesign was in working with Content and Legal (for compliance) to reduce content. The sections of “Please read the address tips below”, “Get Text Notifications”, and “Dell would like to contact …” have all been removed, due to low usage.

The shipping form has been redesigned to be more concise. Optional fields (second address line, county, phone extension) have been hidden in a right-aligned “+” that appears upon click. Title and fax number have been removed from the form, and the three phone number fields have been compromised into one phone field. Delivery method (not shown above) has been added as an un-editable radio button of “Ground shipping”, the only available option in the UK.

The pricing stack on the right hand of the page has been greatly reduced and shifted to the bottom of the Shipping page. Instead of showing a confusing eclectic of subtotals, shipping, and taxes, only VAT tax (legally required), free shipping, and a final total are shown, inline. The “Important Information” section in the pricing stack has been moved to a notice on the Verify/Submit page.

Non-visual design changes included introducing a new server-side UK address validation system (meant to reduce shipping and payment errors post-order), and updating client-side masking and formatting to meet current UK standards.

Billing

The UK Payment options are Credit Card, PayPal, and Bitcoin. The UK responsive redesign included support for the regional Maestro credit card.

As with shipping, a lot of the page redesign involved reducing content. Almost all copywriting has been removed to strip the page down to a form. The Billing Address section, similar to before, has been shifted to an optional “+” expansion. The pricing stack retains the same design as the responsive Shipping page.

Additionally, options to change payment types (e.g. Credit Card to PayPal) have been redesigned. The previous user flow required customers return to the Shipping page to change payment options — the redesign selects Credit Card by default, and allows other options available through a dropdown.

Verify/Submit

The Verify/Submit page is the last step of Checkout and offers users a comprehensive order summary.

Unlike previous pages, much of the content on Verify/Submit is relevant and necessary for legal reasons. There were two challenges to this redesign. One, was abiding by the legal Terms of Sale and Right to Cancel, which required users to read a lengthy statement and mark separate checkboxes to accept. The second was to display lengthy information from the Shipping and Billing pages and allow user editing — a common complaint by users was not being able to see the subtle blue hypertext to “edit” information on the Desktop site.

The solution to the former problem was a compromise of the best UX solution, and one approved by Legal. The button to confirm an order has been changed from “Order” to “Order and Confirm Payment”, with additional text above stating: “by clicking the Order and Confirm Payment button, you agree to Dell’s Terms of Sale (hyperlink) and your Right to Cancel (hyperlink)”, thus reducing clicks to acknowledge the statements and proceed while effectively abstracting terms and conditions to a hyperlink.

To display a concise order summary on mobile, “cards” were introduced. Each card represents a short summary of the corresponding page in Checkout (Payment Method, Delivery Method, Deliver To, and Bill To), and are separated by whitespace and a grey card background. Each of the cards contains a prominent “edit” link in the top right corner of the box, providing an affordance that redirects to that page of Checkout should the user wish to edit.

Summary

Dell’s move to responsive, although late in the industry, is expected to yield big returns. The U.S. site has already seen big increases in revenue and visits since moving to responsive. The UK Cart and Checkout design was a result of a 3-month collaboration between many teams, and for myself, a fantastic learning experience in project lifecycle. Future extensions to Cart and Checkout may include single-page checkout and further personalized buying experiences.