DICKSON BROS. HARDWARE
Overview
How do we bring a local business online?
The Problem
My Role
Dickson Bros., a local hardware store in Cambridge, MA, aims to be a one-stop shop for all of its customer's household and hardware needs.
However, it does not have an ecommerce site for shoppers to buy items online. As the sole designer, I redesigned its site to allow shoppers to browse and purchase its inventory online.
I was the sole designer and completed a full UX process.
My process included:
-
User research
-
Digital wireframes
-
Usability testing.
-
Delivering a mid-fidelity interactive prototype.
Duration
Tools
2-Week Design Sprint
Axure RP
Miro
Paper & Pen
The Problem
The Solution
Dickson Bros., a local hardware store in Cambridge, MA, aims to be a one-stop shop for all of its customer's household and hardware needs.
Its customers want to shop local and like the convenience of the store because it helps them save time, but due to the overwhelming amount of items, they find the store difficult to navigate and almost always ask for help.
When tasked with creating an ecommerce feature for its existing site, I aimed to reorganize the information architecture of the site to ensure its customers could find what they need and provide a way for them to ask questions.
How would I know that I had solved the problem?
If my design were to be implemented, I would know I solved the problem when users expressed satisfaction with the site and 20% or more of the business revenue could be attributed to online sales.
Overview
UX Process
Stakeholder Research
What are the business considerations?
Dickson Bros.' business goal is to help customers find what they need. Their brand goal is to be a local store focused on service.
By adding an ecommerce feature, they would want to increase sales while
They would also want to cater to their target customers: college students in the Cambridge area and local homeowners.
User Interviews
Who uses their local hardware store?
I wanted to understand:
-
Who shops at their local hardware store and why?
-
When do shoppers go to Dickson Bros. versus a competitor?
-
What pain points do customers have at the store?
-
Would customers shop online at Dickson Bros.? Why or why not?
I conducted:
-
6 user interviews with
-
3 existing customers
-
3 hardware store users
-
Affinity Mapping
I synthesized key interview quotes and came up with four main user takeaways:
-
I want to save time
-
I want to support my local business
-
I want to know they will have what I need
-
I want to know that I'm getting something that is useful
I conducted affinity mapping to synthesize the information from my 6 user interviews. I chose this method to allow me to see the major insights in one place and find common patterns easily.
Personas
Primary Persona
Secondary Persona
The Architect
The Student
Uses hardware store for projects
Looks for specialized items
Wants to save time and willing to sacrifice on price in order to get what he needs more quickly
Uses hardware store when needs something immediately
Buys items for dorm room
Wants to support local businesses and would choose them over a competitor.
Goals
Needs
Needs
Goals
Pain Points
Has to ask for help to find items in-store
Pain Points
Doesn't know if store has item before going there.
Card Sorting
How do users organize hardware store items?
In my user research, it was clear that users had a hard time finding items they needed at hardware stores.
I wanted to get a better understanding of how users would categorize items found at a hardware store in order to help them navigate the information architecture of the ecommerce site.
To do so, I conducted:
-
3 open card sorts
-
1 hybrid
-
2 closed
of 115 items from Dickson Bros.' inventory that represented a cross-section of their whole store.
Users found it very difficult to place items into larger groups so I knew I would need a mega-menu in my design to showcase several categories at once.
1 of 6 card sorts I conducted to understand how to design the information architecture of the site
Competitive Analysis
To get a better sense of the categories that existed already within hardware, I compared:
-
Dickson Bros.' existing site categorization
-
Dickson Bros.' in-store signage through site visits
-
Competitor Site categories:
-
HomeDepot
-
Backbay Hardware, another local hardware store.
-
I compared categories across the store's existing site, their in-store signage, their two main competitor sites as well as the 4 open card sorts I conducted. I then created categories to test in my closed and hybrid card sorts which would give me the data I needed to create the sitemap.
Site Map
I analyzed the card sorting results as well as competitive analysis to come up with a revised sitemap that organized Dickson Bros.' inventory within the site's existing Household and Hardware sections.
Through my card sorting and category analysis I decided that the user would most benefit from a clear division between Household and Hardware items.
User Flow
How would a user find an item and check out?
Product Discovery Flow
I designed a simple product discovery and checkout process that would facilitate the user's ease of use, a heuristic that needed to be addressed in the site redesign.
I addressed these by:
-
Creating a popup checkout flow within the product page to speed up the checkout process.
-
Combining the payment and shipping pages in the checkout process to take out an extra step for the user.
A combined flow of the user's product discovery and checkout process.
Live Chat Flow
I created a live chat feature for the site to address additional user needs, these included:
-
Asking for help to find an item
-
Asking for advice on items to use for a project
I also decided a live chat would allow the business to address their brand goal of wanting to help its customers find what they need.
Sketches
How would a user find an item and check out?
Homepage
I sketched the homepage of Dickson Bros.' site with an aim to call attention to the two main inventory categories
I sketched a live chat flow that would begin on the homepage but could start on any page of the site so users could ask for help and the business could fulfill their business goal of helping their customers.
Live Chat
I sketched out the product listing page, a "quick view" look at a product, and different options for the product page layout.
Product Listing & Product Details Page
Wireframes
Product Discovery & Checkout
Homepage
Menu Dropdown
Dorm Room Essentials
Hamper Product Page
Hamper Product Page - Pop Up Add to Cart
Hamper Product Page - Pop Up Sign In
Checkout - Shipping and Payment
Checkout - Review and Place Order
Checkout - Pop Up Order Placement Confirmation
I created digital wireframes to layout the site and demonstrate the user journey from homepage to order completion.
I created mid-fidelity digital wireframes of the live chat feature to demonstrate prompts it would provide the user and how it would respond to the user.
Live Chat
Usability Testing
Review & Checkout
Round 1
Users wanted a clearer way of navigating the shipping and payment page.
Round 2
I added steps to the shipping and payment stages so users could easily complete the page.
I also put Billing Information before Payment as users expected them to go together.
Live Chat
Making the live chat more human-friendly
Round 1
Users did not like the browser taking them to a page without their consent.
Users also wanted an error confirmation and to know whether they could ask another question
Round 2
Users wanted a more friendly link that indicated what it was
Round 3
Users liked the more human-like suggestion of a product.
The Solution
An integrated ecommerce site
Takeaways
What did I learn?
Next steps
You can always make things more simple.
Users like to be in control.
There are no perfect categories. Users will disagree, so you have to make a choice of what users to prioritize and make a category that makes the most sense with the data you can gather within your time constraints.
If I had more time, I would build out the live chat feature to make it even more "human" as that was a central concern from fellow designers when I asked for feedback.
If ecommerce was a feature that the business was planning to add, I would have found out more about how they would do that, what constraints they would have and what they would want to see.
Check out my other work
