Checkout is a core feature of Ferguson.com that provides the primary means to purchase product.

Checkout Design Philosophy

Key experience goals to keep in mind:

Avoid distractions in checkout to keep the user on task and completing their order
Provide proper secondary navigation CTAs once the order has been placed

TODO

Releases

Single-Page Checkout 2017-2019

Single-Page Checkout is a Checkout redesign project that was initially conceptualized in January 2017 by Bianca Chesimard and Matt Evert. It was officially prioritized in the fall of 2018 by Billy Colonna and the Dragon team and finally launched on RELEASE_DATE. The goal of the project was to reduce overall checkout abandonment rates.

Research

Research began in January 2017 and concluded in March. Over that time, a full content audit, competitive analysis, and heuristic evaluation were completed. Two important problems identified were that the current design had too many form fields, and navigating checkout was cumbersome.

Studies suggested that 27% of users abandon orders due to too long/complicated checkout process. On average, checkouts require 14 fields to complete and at the time Ferguson.com's checkout was more than double that at 35. Additionally, design decisions had been made with Quotes to take users to the Review screen to complete their order, but all too often users were forced to go back to previous steps to make changes.

Design

The primary design goal was to get customers through the checkout process as quickly as possible. This was done by:

Moving from multi-page to single-page
This allowed the user to remain on one page even when they needed to go back to a previous step to make changes
Trimming the form fat
Several fields were removed entirely. Optional fields were either removed or concealed behind a link. This allowed the page content to be dramatically reduced.
Summarizing whenever possible
Information would automatically be rolled-up into a summary to present the page as 'near complete'.

Included in this enhancement

Fully-responsive design
Content modules toggle between Detail and Summary mode
Floating Order Summary box
Address Book for retrieving infrequently used addresses
Pro-Pickup 1-Hour integrated into existing pickup options
Improved product list item interactions

See the design documentation for Single-Page Checkout for detailed UI information.

DXT

Checkout (Feature)