Michael Grace / Designer

Brooks Running

Checkout Redesign

Role

Senior Interaction Designer


For

Brooks Running


Date

Launched 2019


Type

eCommerce / Web

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 the mobile users that 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.


brooksrunning.com

Expanding upon core functionality, I made user flow adjustments as needed to accommodate both business and user needs.

From the shopping bag through order confirmation, responsive layouts were designed across three key breakpoints to ensure a frictionless experience across mobile, tablet, and desktop devices.

Iterating on various approaches, I collaborated with stakeholders, engineers, product managers, and brand team.

I created an “item added” transition and sticky navigation in the bag to keep checkout easy to access.


There are five key steps in the Checkout flow.

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


The dimensions defined here are consistent across all new shopping bag and checkout pages.

Before & After


By organizing content into “cards” the page becomes less dense and much more scannable.


As the final step in the checkout flow, the order confirmation page celebrates the customer’s purchase.