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.