Cole Hardware Store

Cole Hardware Store

Project Overview:  Cole Hardware is an independently owned family business dealing with an extensive cross-section of clients including builders, businesses, developers, and local customers. They opened their Cole Valley store in 1959 and have since expanded to six other locations around San Francisco.

The business model is very much based on customer service, pricing, and keeping it local — employing local staff and supporting our community.

My Role: I was responsible for user research, information architecture, wireframing, interaction design, and prototyping.

Deliverables: Site Map, User Flow, Wireframes that illustrate the user journey, Interactive Prototype 

CHALLENGES Their website hasn’t been updated in a couple of years, and they are looking at streamlining their current e-commerce platform to reflect more modern web best practices. 

SOLUTION In the redesigned website users will be able to locate the products and services easily, and also be part of the online Cole Hardware community. Users will also be able to communicate with the Cole Hardware store of their preference if they chose to do so via a website.




To start; Cole Hardware has six local stores around San Francisco. They’re highly rated on yelp, and offer a level of customer service and personality absent in larger chain hardware stores. Walking into a physical Cole store, you’re in good hands, and will find whatever you want.

But, their website is old, cluttered, hard-to-navigate site that doesn’t offer an efficient or pleasant online shopping experience. For potential customers becoming discouraged and leaving the site long before checkout.


The Personas; I decided to describe them what kind of shopper they are.

Andy; He is the pro. 

Thomas; is the newbie. 

Lisa; DIY enthusiast.

I started to think about how I can redesign the website based on my user’s needs. My primary persona was Andy, the secondary was Lisa. They are different users, they have different needs and different pain points.

Competitive Analysis; Cole hardware store has strong competition such as ACE, Home Depot, and Lowes. Competitors have more features then Cole hardware store. 

Cole Hardware Store has just six local stores, but they like to show how they are different than other big stores because they are from the local community and they want to help to the local community

 Competitive Analysis was very useful for understanding business needs and what features Cole Hardware needed to improve.

What business needs

  • customer service
  • the store's heritage
  • reflect modern and best practices
  • establish trust and relationship

The main difference between Cole Hardware store and others is good customer relationships.

He shows how they are actually different how customers are important for them. 

Solution & Strategy; Card Sorting. My first goal was to organize and understand the products. They have overwhelming products and categories. At first, I did card sorting by myself and then I asked my friends to do card sorting.

Information Architecture;  was definitely very important to improve the navigation in the redesign of the website. When I used card sorting (both open and closed) method, it was so effective. I found some interesting and unexpected results like BBQ or bbq tools. Some people said bbq is a hardware, but some people said it is a seasonal item. It was really interesting to see how people are thinking different. 

It was very important to understand the users, their background and goals. Involving the users early on in this process turned out to be very effective in my design process. After card sorting, I started sketching Sitemap. Thanks to sitemap, I understand the user flows better and help me also understand the users

My Question was — what is the most important thing for my users? Based on what my users need. 

User Flows, I started sketching with pen and paper before developing a quick (but slightly more hi-fi) computer rendering.

A tradesman quickly is a product - focused shoppers and he knows exactly what he wants.

Andy needs to put in an order for some circular saw blades to be delivered on site (something that he does on a regular basis).

 for Lisa, and Andy User Flow

for Lisa, and Andy User Flow

Lisa, DIY enthusiast.

She needs to buy a stain for a bookcase and wants to make sure she has all of the supplies and likes to see DIY projects and videos. 





Early Sketches

  The first version of the home page, wireframe

The first version of the home page, wireframe

Wireframes and Usability Testing;

I designed the home page first. I have a global navigation and side navigation menu. I have a rotating message panel it shows updates, new arrivals, and messages. WHY? because for Andy. He wants to find the products.


The First version of search result page, wireframe


The search result page. There are an advance filters on the left side. 

When Andy finds what he wants  —  circular saw blades then he adds it to his card. 

WHY? This version of the search page, I focused only how he can add the product and can go quickly to check out page.


 The first version of a product page, wireframe

The first version of a product page, wireframe

The first version of a product detail page.

I designed the summary of the cart to the right side, but my users didn’t understand it. They were super confused, and they thought after “add to cart” action, they were in the checkout page, but no.

I wanted to show only “Summary of the cart” page and I had to redesign three times.

Thaks for user testing !

Here the high-fid clickable final version of the prototype. I used Invision for interaction prototype.



Summary: I learned a lot during this project. Not only InVision and high-fi wireframes, but also I found out about a cool San Francisco business.

Cole Hardware Store redesign allowed me to think and work in the space between business and design — striving to find a balance between the needs of a business and the motivations of the customer.

User Testing is so important and applies the design decisions with your findings from those tests and your research. It was super easy to me jump to the sketching / wireframing and re-designing the website, but the most important question was always not to forget “Why” question.