Brooks Running Refresh

Upon arriving at Brooks, I was asked to be part of the “Site Refresh” team. Our goal: evolve Brooksrunning.com into a mobile-first digital flagship.

I provided creative oversight from a UX perspective, acting both as an independent voice and as a liaison between stakeholders and a team of designers. I collaborated with them to create a new visual language – a library of repeatable UI patterns for use across the site.

  • Role Senior Interaction Designer / Creative Oversight
  • For Brooks Running
  • Date 2017-2018
  • Type eCommerce
  • URL brooksrunning.com

Before & After: Category Page

The old mobile product grid, seen on the left, doesn’t take advantage of available screen space.

The new product grid, on the right, allows for more products to be seen and is easier to scan for key details (like ratings).

On larger screens, a hover state reveals additional colors and product details.

Before & After: Product Detail Page

I managed the UI of our core shopping touchpoints, providing hands-on design work, creative direction, and detailed quality control.

The global site header and page layout has been optimized for mobile display. The aesthetic was refined as well.

We’ve allowed space for content to shine and be prominent. Large typography is used to enforce Brooks’ confidence and expertise in the running space.