Brooks Running

Global eCommerce Redesign

My Role in this Project
I was the Design Lead on the client side for site re-platform and redesign. It was a large effort spanning internal product teams, one in Seattle and one in Amsterdam. Two agencies were involved. My role as Design Lead was in most simplistic terms, to gain buy-in from VPs and Executives on the design decisions. This included integrating branding standards as they were being developed, advocating for a design system, educating why accessibility mattered, and managing expectations based on timelines and budgets.

Day to day included working though design system decisions that would enable site merchandising flexibility to meet weekly sales numbers, brand teams the components to express a unique aesthetic, and useability patterns that wasn’t reinventing how the users shopped.

Project Phases 1+2 was a 16 months engagement.

Team
Marketing + Brand Creative + EComm operations + Digital Products at the same table. Part of my role was to balance expectations on different timelines and speak multiple teams’ language
Audience
  • Dedicated Runners around the world shopping for Brooks running gear online
  • 13 eCommerce sites
  • 16 global distributor and partner sites
Outcomes
This effort created a shopping experience users had been asking for and expecting, and provided internal teams the tools to accurately merchandise and market products quickly. Success was seen in huge lift in conversion within the first sixty days of PDP launch
  • Juggle of interaction, visual, and brand design
  • Vision to design to future quarter priorities and CMS integrations without delaying launch
  • Mobile first with improved accessibility
  • New Design System
  • View brooksrunning.com

Project Approach

The design principles included being mobile first, component based, greater Accessibility (AA), inclusive of 9 ( different languages for global sites in 15+ countries for selling and non-selling sites, rich in brand and product storytelling. Additional complexity was to be considerate and support shopping in-store with various wholesalers, given users choice.

This project set the foundation for two product finders I also was lead on, as well as integrating community outreach programs.

I led a large, cross-functional design team to support the biggest digital design effort at Brooks to date.

Users demanded simplification.

Industry data and our own quantitative data wasn’t as strong as showcasing user study video clips where users on multiple occasions showed that although they are hard core runners (Brooks’ primary customer) they spoke in simplistic shopping terms and stated they wanted their shopping experience to reflect common patterns they used. They did not express they wanted bespoke shopping experiences as internal folks expected.

Empathy interviews and qualitative research clarified that user needs (runners) were not being met regarding the information and experience they needed to choose the right running shoe for them. Product Line managers, site merchandisers, and sales people in shops were able to articulate what users needed helped bring to life site features and experiences. User research was critical in guiding the language.

To address this, tasks included:

  • Research with site coordinators, product line managers, data scientist, and global dev teams (internal stakeholders on how they could be more effective on meeting the years needs).
  • Low-fidelity guerilla in-person user studies
  • Remote UserTesting.com for Qualitative Studies
  • InVision for lo-fi prototyping
  • Cross-functional UX workshops
Getting back to basics, then building from there.

Re-Focusing Team

As an internal team member of the company selling the product, I had to be conscious of how to use the product/brand knowledge i had to support users, and advocate for both sides. Being realistic about brand and business goal demands was necessary.

When project hit a few hurdles, I flew out to project teams on the East Coast to embed with my project team to gain trust and truly empathize with their needs. And contextualize business needs regarding timeline and expectation. Together we redefined working agreements that created better transparency and frequent feedback.

Show steering committee their concerns were being address in partnership with user needs.
Coaching team on what content and how to structure why decisions were made during product demos.
My role as Design Lead was in most simplistic terms, to gain buy-in from VPs and Executives on the design decisions.

Real runners, real engagement. Support and empathy was not just for customers, but for our working team as well.

Design Decisions

the pull of a unique and quirky brand to express its ecommerce experience in a similar was a key responsibility on mine. When demo-ing pages and features I had to express why we made design decisions that appeared to ignore opportunities to express brand, when in practice decisions were made to meet the users needs of a clearer and simple shopping experience. And that the content is the area to express brand (copy, images, video).

Web Accessibility Changes

  • Shift to webfont with better readability
  • evolve brand colors for screens
  • design components for live text
  • More breakpoints to accommodate tablet conversion (at the time it was 46% Mobile; 34% Desktop; 18% Tablet)

Design Impacts

  • Navigation Scheme - Mens/Womens or Shoes/Apparel
  • Taxonomy - considerate of industry/science and simplistic user/leisure terms
  • Load times vs lots highly-interactive content
  • Backend Component efficiencies: translating user needs to CMS-capabilities to deliver valuable content to more products
Accessibility improvements yielded typeface and color evolutions.

Design System

A new design framework was needed as the system in place at the start of the project was not scaleable.

Visual Design
Components were being designed at the same time as the branding of Brooks was being overhauled. I made a decision to work in parallel instead of waiting for brand to be finalized knowing that a Pattern Library would facilitate smooth updates in the future. We designed with that flexibility in mind.
The impacts for team and users long term was positive. However, getting executive support required building additional trust, more context in demos, and additional iterations to show its flexibility.

Interaction Design
Focused on five break points in a responsive design approach that started with a product detail page, then moved out toward the home page. Site navigation evolved with user testing, but did not have adverse impacts on interaction design related to design components.

Sample of components used in a product landing page.
Pattern library snippet for components that have lived into most recent updates.

Outcomes

Effort paved the way for more delightful experiences as the brand evolved. An atomic system enabled personalization for shoppers and lower effort for creative teams and site merchandising. 

Direct Outcomes

  • Atomic System Pattern Library
  • Component System and documentation
  • Nav/Menu/Footer, Home Page, Category Page, PDP, Storytelling pages
  • Integration of motion content
  • Accessibility Compliance (AA)

Less Direct Outcomes

  • Sketch Design System for Visual Design teams
  • Art Direction guides for content teams
  • Adjustments to brand standards for better accessibility (font, color, typographic scales)
  • DesignOps - initiated structure of eCommerce + DigProducts + Global Brand collaboration
Product Detail Page
Category Page