Winter 2016–Summer 2017 • Wondersauce
Team Members:
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.
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.
I developed the framework above to allow for quick and easy comparison across behavior types.
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:
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.
Our updates to BrooksRunning.com were deployed in phases, and while we didn't touch many areas of the site, their impacts could be easily seen and felt.
Our updates to BrooksRunning.com were deployed in phases, and while we didn't touch many areas of the site, their impacts could be easily seen and felt.
Increase in products added to cart
Increase in products added to cart
Increase in sessions with checkout
Increase in sessions with checkout
The redesigned product detail pages let users easily shop and learn all about each product, its features, how others feel about it, and more.
New and updated shoe launches are a big deal for Brooks and their customers which led us to create special pre and post-launch pages. To the right, the events page builds excitement around upcoming races and helps runners find events to participate in.
While the original site navigation was sorted into men's and women's buckets, we opted to strategically surface products by equipment type. Highlighting these items in the primary navigation helps users identify that Brooks sells more than just shoes, driving sales and helping Brooks grow that part of their business.
*Additional process available upon request
I've also recently helped...
Brooks Running
The Daily Dot
Chick-fil-A
Chick-fil-A