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.
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.
Often, checkout flow changes can result in an initial dip as users adopt the new experience. Our primary KPI was to “do no harm” and then grow conversion in the long run.
Happily, we rolled out updated checkout in July 2019 and saw an immediate increase in conversion in both North America and EMEA regions among mobile users.