About the Project
This was a website redesign for Brooklyn Haberdashery, a small fast-growing craft store offering artisan supplies from around the world. As they were becoming known among makers as the go-to shop for high quality tools, they wanted their website to reflect that same quality. My role in this project was to improve the shopping experience and update the look of their e-commerce site.
Problem
Customers have a hard time locating specific items which may lead to lost sales opportunities and abandoned carts.
Goal
To make searching specific items in the shop of many product offerings easier and faster.
Role
As the sole project owner, I used a customized Shopify theme to meet the 3-month deadline and to enable independent site management for the business owner.
Information Architecture
With such diverse product offerings, it was important to first establish a clear and intuitive navigation system. Product categories which were once nested in multiple sub-categories were 'unpacked,' reduced down to one-subcategory, and spread out to span the width of the header.
Navigation header - original
Navigation header - redesigned
Search Performance
In the analytics report, the top search word on the site the word "sashimi" which was a misspelling of "sashiko" — understandable because according to Word Tracker, the word "sashimi" is searched over 150% times more than "sashiko" in the US, where 80% of their customers are based.
In case you're wondering:
sashimi = raw fish
sashiko = functional embroidery
The original search bar showed only items that entered the word exactly, which can impede the buying process. It was important to us to have a predictive search function to aid the customer in their shopping.
Cross Promotion
Some items could benefit from cross promotion within the product description as they are more than just complementary items, they are functional add-ons.
A quick glance at "Buy It With" shows you that the Carrying Case is modular with a shoulder strap.
Filter Function
With hundreds of inventory items, adding tags required a strategic plan. Solution: We analyzed our target audience's behavior and preferences to create a keyword filter list. We narrowed that list to 10, and assigned the keywords in bulk to the products. A simple Google spreadsheet was the perfect tool for organizing tags to complete this task.
Product Variations
Some items, such as the threads, included over 30 variations.
Others only 3.
How should we display these product variations?
Displaying variations as image swatches scored high on our user testing, so we applied these to items with variations of six or less. Items with more than six variations would display with selection buttons. While I wanted to keep the functionality for the user consistent, after testing, we learned that the users preferred the image swatches only with a small amount of variables - anything more was overwhelming to process visually.
Displaying variables as Image Swatches
Displaying variables as Selection Buttons
Making the Most of Constraints: Time and Resources
With a tight deadline and hundreds of products to categorize, I needed to be very strategic and efficient with my time. I did this by: prioritizing our fixes, requesting weekly feedback sessions for targeted sections, and tracking progress using spreadsheets and kanban workflows.
The Job is Never Done: How I Would Update the Site
I'm a strong believer in actively maintaining and improving products when possible. If I were to update the site I would: apply more user testing, implement AI for automated product tagging, improve SEO by preventing indexing, and simplify filter options by observing user tests.