DICKSON BROS. HARDWARE
 
Lo-fi mockup of Dickson Bros. Hardwar Ecomerce Site

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.

Dickson Bros. Original Site.png

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

Screen Shot 2019-09-05 at 2.54.55 PM.png

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

P2 persona 1.png
P2 persona 2.png

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.

IMG_2235.JPG

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.

Screen Shot 2019-09-05 at 4.50.58 PM.png

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

Dickson Bros. Homepage.JPG

I sketched the homepage of Dickson Bros.' site with an aim to call attention to the two main inventory categories 

IMG_2260.JPG

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

IMG_2264.JPG

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

P2 Checkout Wireframe - Iteration 2.png

Round 1

Users wanted a clearer way of navigating the shipping and payment page. 

P2 Checkout Iteration 3.png

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

SIMPLIFYING THE MORTGAGE APPLICATION PROCESS

Lo-fi mockup of Dickson Bros. Hardwar Ecomerce Site
Homepage Copy.png

ENABLING PEOPLE TO GET THEIR RECORDS CLEARED

Code For boston

Etsy Home_iphone8spacegrey_portrait.png
IMG_3060.PNG