COLE HARDWARE

E-commerce redesign

 

 

Dave Karp opened the first Cole Hardware store in San Francisco in 1959. He wanted to create a service for the people in his community. 
 

 
 

 

"COLE HARDWARE'S PRINCIPLE AS A COMPANY IS TO PROVIDE SERVICE AND KNOWLEDGE."

Julia, Marketing Coordinator of Cole Hardware

 

 
 

Over time, they realized that people prefer to shop on the internet and they are losing revenue to online competitors such as amazon. 

But Cole Hardware is a proud community service provider and prefer to remain to help the needs of people in the community. 


OVERVIEW

MY ROLE

 

I did user interviews, research and the visual designs such as paper prototyping and wireframes. 

CUSTOMER INSIGHT
I partnered with two UX designers with strong research and interview backgrounds to collect and synthesize data to address user needs.

STRATEGY & UNDERSTANDING
I targeted current users and asked questions based on their current pain points that led to ideation and our design decision.

VISUAL DESIGN & IMPLEMENTATION
I created paper prototypes and tested them early on. With Sketch and Invision, I was able to share design ideas and iterate between user testing.
 


THE CHALLENGE

MODERN TECHNOLOGY


Users find the Cole Hardware site to be very confusing to navigate, items are impossible to find, and certain links lead to error messages.

When I talked to an employee, they said their site is mainly to serve as informative source for their community and not exactly for people to shop. But because they realize that they are losing to online competitors, they want to improve their site but not lose the 1-1 interaction they've been having with their customers for decades.
 


THE PROCESS

INTERVIEWS

 

 
 

I reached out to Cole Hardware to get a better understanding of their mission and how I can help them grow their business without changing their business model.

 Julia, Marketing Coordinator of Cole Hardware

  • Cole Hardware's principle as a company is to provide service and knowledge.
  • They value in person relationships and are loyal to their customers.
  • They realize that they are losing revenue to online stores.
  • They do not have the money or man power to hand pick items in store and ship them out to customers.
     
 
 

 

"SOMEONE TRIED TO BUY A POOL FROM US IN FLORIDA AND WE CANCELLED THEIR ORDER BECAUSE WE WOULD NEVER GET TO MEET THEM IN PERSON."

Julia, Marketing Coordinator

 

 
 


UNDERSTANDING THE USERS


Current customers

  • Life long customers didn't even know Cole Hardware had a website.
  • All customers know the owner Dave Karp personally, and remembers his famous card tricks.
  • They prefer to go to into the store to ask questions and interact with workers and get the best advice they need.
     
 
 

 

"THE STAFF HERE IS WONDERFUL. THEY ARE ALWAYS HELPFUL AND REALLY GO OUT OF THEIR WAY TO FIND EXACTLY WHAT YOU'RE LOOKING FOR."

Carol C, loyal customer for 2 years

 

 
 

PERSONA DEVELOPMENT


Thomas is the type of person that would rarely shop at Cole Hardware. Meanwhile Andy could be considered a frequent loyal customer. Cole Hardware should have an online store that can cater to both personas. 

 
 

PRIMARY PERSONA: THOMAS

A 37 year old business analyst that prefers to shop online and has no idea about hardware tools

Pain Points:

  • Overwhelmed by choices
  • Indistinct product categories
  • No gift options
 

SECONDARY PERSONA: ANDY

A 45 year old tradesman that works on-site 90% of the time and prefers to order equipment online and shipped to job site

Pain Points

  • Too little choices of specialty brands
  • Lengthy checkout process
  • Needs to be reassured of product details
 
 

THOMAS'S GIFT IDEA


Based on the interviews done with Thomas, I learned the following:

  • Thomas needs to buy a gift for his brother Charles's 40th birthday
  • Charles wants to build the legendary treehouse they've always wanted as kids
  • Thomas wants to surprise Charles with a new chainsaw
  • Thomas hopes that the chainsaw will encourage his brother to not force him to help with building

How I plan to help Thomas:

  • Thomas needs support with finding the right items
  • He needs reassurance that he is purchasing the latest and greatest item
  • Do not overwhelm Thomas with too many choices
 
 
 

COLE HARDWARE COMPETITORS


I did a competitive analysis in order to get a sense of what competitors are doing. 

Cole hardware's biggest competitor is Amazon. But they are also losing revenue to Home Depot due to their strong search options, reviews and details. 

With that information, my assumptions are that Cole Hardware can improve on their search options, adding product reviews, and having a secure checkout process to improve the experience for people such as Thomas and Andy.

 
 
 

CREATING THE USER FLOW

 
 
 

First I wanted to create a user flow in order to get a better understanding of how Thomas might navigate through the page.

Thomas can browse through the most popular items giving Thomas reassurance that he's in the right area. He can narrow down his search with reading reviews from previous buyers and add the item to cart. Unfortunately there are too many steps from start to finish, leaving Thomas flustered. 

 
 

I thought it was very important to make sure Thomas and Andy can quickly find what they were looking for with the helpful suggestions from the site.

 

Original solution: Home Page with a DIY feature in mind

Final Solution: Decided to add project pictures that may relate to what Thomas needs

 

I then created different paper prototypes to test.

I quickly learned that there were too many options for users to choose from. They weren't sure where to look for the perfect chainsaw for Charles's birthday gift.

I thought the ideas button would give inspiration to users, but it confused them instead. Users also preferred not to click on it. People mainly clicked on the project pictures because it's the biggest call-to-action button.

 
 

The next step was to figure out the most legible way for Thomas and Andy to read reviews, ratings and also see details.

Adding the modal when an item has been added to cart can reassure Thomas that the item was added so he doesn't accidentally add two. 

 
 

Next, the checkout process needs to be reassuring and secure in order for Thomas and Andy to know exactly what they're purchasing with their preference of purchasing option. 

I added a modal to allow users to choose their payment method and users liked it!

Interestingly enough, when I created the modal in my wireframes, users felt like it was abrupt, unexpected and they didn't find it secure.

 
 

The address & payments page allows Thomas and Andy to enter all their information carefully while the summary of the item and costs remain on the right hand side for them to review.

The review page allows Thomas to review his order, be reassured of the item he is purchasing, where it will be shipped, and ensure his customized gift option is in place. 
 


THE VISION

FINAL SOLUTION
 

 

Current Cole Hardware landing page

My Solution

 
 

The solution consists of a search bar that would guide Thomas and Andy straight to the item. Many items would appear but there is an option to select multiple items and compare them in order for Thomas or Andy to see the minor details and reviews in both items. They then get to add the item to cart and finish with including a gift option and reviewing their order before finalizing their purchase.
 


THE AFTERMATH

TAKEAWAYS

I learned that not all test results from paper prototypes will translate well when built as an app or web design. I also learned that it is very important to test prototypes constantly and with different people. 

 
 
 

NEXT SPRINT


I would like to incorporate more of an interactive sales approach where a Cole Hardware employee can answer questions, give advice, and choose the best items for their customers, just like how they do in person.