Shopping Bag & Checkout Redesign

A key part of a larger site platform upgrade was the development of a new shopping bag and checkout flow for our site. We needed to modernize the experience to be friendlier for mobile users, who now make up over 50% of site traffic.

In addition to being responsible for all hands-on design work, I also facilitating a series of in-person usability tests, authoring findings that informed key design adjustments and potential future enhancements.

  • Role Senior Interaction Designer
  • For Brooks Running
  • Date 2018-2019
  • Type eCommerce
  • URL www.brooksrunning.com

Adapt & Improve

Expanding upon basic wireframes provided from Salesforce (providers of our technology platform), I examined the default functionality and made adjustments as needed to accommodate both business and user needs.

This involved taking an out-of-the-box experience from Salesforce and examining it from both user flow and visual design perspectives, ensuring it properly represented the high quality (and “Run Happy” personality) of the Brooks brand. Additionally, since the site is used across many regions (and displays in 5 languages), I had to ensure the designs would work well regardless of the language.

The Shopping Bag

From the shopping bag through order confirmation, everything is mobile-first and responsive; all pages were designed across three key breakpoints to ensure a good experience across mobile, tablet, and desktop devices. The goal: create less friction when purchasing through a simplified, clean UI.

Here’s the Shopping Bag seen across different screen sizes. Each step in the the flow was designed to work responsively across various device types.

When designing a new “item added” message and subsequent shopping bag, I emphasized obvious and easy access to the checkout experience and third party payment methods for mobile users.

Video clip demonstrating the “item added” animation and sticky navigation in the full shopping bag.

The Checkout Flow

The primary user flow. Note the clear indications of the user’s current step and easy access to adjust previously entered details.

Capturing Every Detail

I iterated on approaches and socialized designs over a months-long process, collaborating with stakeholders, engineers, product managers, and the brand team. Dozens of screen designs and variations were created and discussed, and I wrote and wrangled many a line of copy.

A birds-eye view of most of the mockups created for the checkout redesign.

Expanding upon and complementing our existing design system, the designs were documented and shared with developers using a combination of Zeplin, a design handoff tool, and newly-authored additions to the Brooks Digital Style Guide.

The dimensions defined here are consistent across all new shopping bag and checkout pages, and will be adopted globally on the site as part of the Brooks Pattern Library. The spacing is variable and adjusts as needed for various screen sizes.

Before & After: Login

The previous login page was an awkward mix of many fonts and awkward spacing. By organizing content into “cards” the page becomes less dense and much more scannable.

Before & After: Shipping

Before & After: Payment

Before & After: Order Confirmation

As the final step in the checkout flow, the order confirmation page celebrates the customer’s purchase with a bit of a brand moment.