Brooks
Building an E-Commerce Site With Atomic Design
Brooks Running is a staple name in the running community. Their shoes and gear are rooted in science and continually tested in their biomechanics lab, giving them the reputation for creating high quality, performant products. However, their e-commerce website did not instill this same trust due to inconsistent pages, lack of UX best practices, and a poor mobile experience. My role in this project as design lead was to take Brooks’ “Run Happy” brand ethos and create an updated look and feel while designing a high performing e-commerce site.
Goals
Transform BrooksRunning.com into a mobile-first e-commerce site
Use the principles of atomic design to create a pattern library for Brooks to pull from and add to in the future
Engage a broader audience by building stronger brand affinity
Our team started out by getting to know how runners buy their gear online. We talked to various runners of different experience levels to gain insight into their purchasing behaviors. From there, four behavioral patterns were identified:
First, we focused on reworking Brooks’ navigation. Instead of organizing categories by gender, we improved the IA by showing product categories first, so it was clear to the user what Brooks was selling.
By surfacing contextually relevant images within the navigation, users are introduced to key products and enticed to explore further.
With just the navigation deployed, we were already seeing progress in sales.
Our user research showed that when runners shop for shoes in-store, they compare the silhouette of the running shoe to their own. To bring that in-store experience online, we altered the product card imagery to show the side view to mimic how a customer would look at shoes on a shelf.
Throughout the project, I collaborated with our development team to create a pattern library for Brooks so they could continue to build pages in the future. To achieve this, we used Brad Frost’s methodology for creating design systems called atomic design.
