Brooks is a performance running brand selling gear carefully crafted for runners, by runners. They are experts in running and running gear and were ready to become experts in e-commerce as well. We worked closely with their digital product, marketing, and development teams to launch a refreshed online store that lived up the reputation and unrivaled quality of their gear.

Brooks is a performance running brand selling gear carefully crafted for runners, by runners. They are experts in running and running gear and were ready to become experts in e-commerce as well. We worked closely with their digital product, marketing, and development teams to launch a refreshed online store that lived up the reputation and unrivaled quality of their gear.

Getting to Know Runners

Getting to Know Runners

We kicked off the project by simply getting to know runners and trying to understand how they shop for running gear online. We selected and spoke with a diverse array of 8 runners across the United States with experience levels ranging from novice to ultra-marathon running. During these user interviews we also watched them interact with the legacy site trying to understand what was important to them along their shopping journey.

We kicked off the project by simply getting to know runners and trying to understand how they shop for running gear online. We selected and spoke with a diverse array of 8 runners across the United States with experience levels ranging from novice to ultra-marathon running. During these user interviews we also watched them interact with the legacy site trying to understand what was important to them along their shopping journey.

After getting to know this group of runners we developed a set of 4 key digital behavior patterns that kept surfacing in our interviews. We then used these patterns to guide the features, content, and design decsions we'd be making throughout the site refresh. It was important for us to remember that these were behavior patterns not personas, so one user could exhibit multiple and were not restricted to just one.

After getting to know this group of runners we developed a set of 4 key digital behavior patterns that kept surfacing in our interviews. We then used these patterns to guide the features, content, and design decsions we'd be making throughout the site refresh. It was important for us to remember that these were behavior patterns not personas, so one user could exhibit multiple and were not restricted to just one.

Keys to Success

Keys to Success

Through our research we identified four things we'd need to create for the project to be successful:

Through our research we identified four things we'd need to create for the project to be successful:

• Credibility - Brooks is the authority on running with the products and expertise to back it up.
  
• Connection - The Brooks personality must be felt on every page of the site – building a personal connection and platform for the brand.
• Confidence - Giving customers the confidence they need to shop online by overcoming as many of the physical barriers as possible.
• Commerce - Creating organic opportunities to expose customers to Brooks products, across departments, while nailing e-commerce best practices.

• Credibility - Brooks is the authority on running with the products and expertise to back it up.
  
• Connection - The Brooks personality must be felt on every page of the site – building a personal connection and platform for the brand.
• Confidence - Giving customers the confidence they need to shop online by overcoming as many of the physical barriers as possible.
• Commerce - Creating organic opportunities to expose customers to Brooks products, across departments, while nailing e-commerce best practices.

Modular Design

Modular Design

Easy page creation, content flexibility, and reusability were project requests from the start leading us to follow atomic design principles for this project. To do this we worked hand-in-hand with both our internal developers and those at Brooks that would be building and maintaining the site. Together we built a pattern based system were individual components like buttons or text (atoms) could be combined together to form reusable clusters (molecules) and then arranged in various lock-ups to form reusable modules (organisms). Predetermined arrangements of these modules ultimately formed preset templates for various page types and use cases.

Easy page creation, content flexibility, and reusability were project requests from the start leading us to follow atomic design principles for this project. To do this we worked hand-in-hand with both our internal developers and those at Brooks that would be building and maintaining the site. Together we built a pattern based system were individual components like buttons or text (atoms) could be combined together to form reusable clusters (molecules) and then arranged in various lock-ups to form reusable modules (organisms). Predetermined arrangements of these modules ultimately formed preset templates for various page types and use cases.

Designs

Designs

06%

06%

Increase in products added to cart

Increase in products added to cart

04%

04%

Increase in sessions with checkout

Increase in sessions with checkout

Runners find their perfect running shoes  ➝

Runners find their perfect
running shoes  ➝

Internet junkies get their daily news fix  ➝

Internet junkies get
their daily news fix  ➝

Hungry Americans eat mor chikin  ➝

Hungry Americans eat 
mor chikin  ➝

Restaurant operators connect with their communities  ➝

Restaurant operators connect with their communities  ➝