Brooklyn Running Co.
My Role
Solo UX Designer
Timeline & Process
Scope
Category Navigation
Home Page
Product Listing Page
Product Page
Tools & Resources
Baymard Institute
Optimal Workshop
Maze
Figma
Adobe Photoshop
Project Overview
Brooklyn Running Company is a small running store in NYC. They have a great in-person shopping experience, but the e-commerce site left users feeling frustrated & disappointed.
This is was a conceptual project to improve the online shopping experience by helping first time customers learn a bit about the brand and then be able to quickly find products that suit their needs & gain a better understanding of product features in order to confidently make purchasing decisions.
Impact
Median CSAT score increased by
40%
When users were asked to rate how satisfied they were with their experience on the site.
Average time on task decreased by
1:02
Minutes, when users were asked to find a product matching particular criteria.
The Problem
Early usability testing uncovered deep frustration for first-time users when trying to find, sort through & evaluate products on offer at Brooklyn Running Co.
A heuristic evaluation against benchmarks identified by the Baymard Institute showed that the site fell particularly short on the guiding principle of consistency & standards.
Project Goal
Conduct a comprehensive research project to discover users’ pain points when shopping online at Brooklyn Running Company.
Design an intuitive and enjoyable solution which aligns with user needs and e-commerce conventions.
My Solution- The Final Design
DISCOVER
Heuristic Evaluation
Navigation
Home Page
Fails to feature any product categories or unique services, preventing users from understanding what the business has to offer.
Uses poor quality imagery, failing to exciting users or set B.R.C. apart from competitors.
Features outdated information in the blog, which has not been updated since 2020.
Product Listing Pages
Over-categorisation & no way to combine multiple filtering values or categories, restricting users’ ability to view products with shared attributes presented in siloed categories.
Uses poor quality & inconsistent imagery, so users cannot easily evaluate the items.
Product Page
Single, poor quality image. No “in scale” images, human models, no thumbnails or colour chips, so users cannot get a comprehensive visual understanding of the product.
No size guide, potentially making users hesitant to purchase due to uncertainty around sizing, and increasing likelihood of ordering multiple sizes & returns.
Shipping & returns policy easy to miss & not displayed anywhere else on the site, increasing the likelihood of users leaving the site due to lack of information.
User Interviews
Parameters
Study Type:
Location:
Duration:
# of Participants:
Structured
Remote
20 mins
4
Usability Testing
Results
Current-State User Journey Map
DEFINE
Persona
Problem Statement
How Might We...
DESIGN
Improving Navigation
HMW improve the organisation and presentation of product information?
Card Sorting Results
Strong Agreement
6
/ 6
Strong Agreement
4
/ 6
Users used the word “clothing” vs “apparel”
Weak Agreement
3
/ 6
Users grouped socks and underwear equally as "clothing" or "accessories.
Weak Agreement
3
/ 6
Used “gear”, “equipment” or “tools” to describe items like watches, water bottles and massage items
Final Global Navigation for B.R.C.
2nd Largest
Product Assortment
Gender-Specific
Product Assortments
Largest Product
Assortment
Unique Selling
Feature
Home Page Content Layout Iterations
HMW help Marcus to learn about Brooklyn Running Co.’s products, services & store policies?
01
02
03
DELIVER
Final Design
Home Page
Carousels were removed & updated with a scrolling home page, so users can easily explore the highlighted content, including sample products & B.R.C.s unique value propositions.
Clean & simple layout, with high-quality images and clear links to essential information, is easier to navigate, more helpful & appears more trustworthy to users.
Users can access all product sub-categories from the dropdown menu. 400ms delay for hover-based dropdown menu ensures the large submenus don’t trigger accidentally & distract users.
Product Listing Page
Product categories removed from the sidebar so that users can access filters immediately.
More important filters for users are moved to the top of the sidebar & opened as default.
Less important filters for users are moved to the bottom of the sidebar & collapsed as default.
Product thumbnails contain large images, show colour variations on hover & highlight the most important technical features.
Product Page
Provides a deeper product understanding through multiple large & high-quality images, highlighting key technical features, providing clear links to brand-specific size guides & revising product description to be more scannable.
Building user confidence by continuing to provide multiple links to shipping & returns policies, and provides details about shipping method before user proceeds to checkout pages.
Final Design Usability Testing Results
CSAT Score Improvement
40%
Median score when users were asked to rate how satisfied they were with their experience on the site.
CES Score Improvement
40%
Media score when users were asked to rate how easy it was to find suitable products on the site.
Time on Task Improvement
1:02
Minutes quicker, when users were asked to find a product matching particular criteria.
Next Steps
Build upon “key feature” highlights
Users really liked the “key feature” highlights in the thumbnails I designed. I’d love to take this further by making this a more engaging part of the experience, which could be a unique feature offered by B.R.C..
Explore “Save for Later” and the mobile experience
Several users mentioned that they first go online to research technical products, then visit physical stores to try on different styles and use in-store services like treadmills to test shoes.
Based on this, I’d love to imagine how users might use the “save for later” feature to compare products, and how this might look on the mobile experience when users take their phone to the store.
“Because running gear is so technical, I use the website for research before going to the physical store to try on different styles.”
Learnings
My background in fashion design, where I often specialised in technical athletic apparel, and my passion for running really came together in this project!
I enjoyed speaking to other runners about their experiences and pain points when shopping for gear, and spent a lot of time studying Baymard Institute’s many large-scale research project so I could understand e-commerce best practices - what an amazing resource! - and I’m confident these learnings will inform many future projects.
At each step I carefully examined how other e-commerce site solved user pain points, and considered why they made the decisions they did. This really clarified for me that good design is always intentional and is backed up by solid reasoning.
Thank you for reading!
MORE PROJECTS
