Cole Hardware InsideCole Hardware Inside

The Challenge

The e-commerce site of Cole Hardware, a family-owned company, is antiquated and doesn't reflect modern web best practices.

Given Materials

Personas: 3 personas with varying levels of knowledge on hardware
Sample Products: A list of the best-selling items
Brand Collateral: A collection of media used to promote the brand

Solution Overview

A streamlined design enhancing online shopping experience by including:
•  Intuitive product categorizations
•  Product review/comment section 
•  'Recently Viewed' section


  • Duration: 2 weeks

  • Role: As this was a solo project, I was in charged of everything from reasearch to Information Architecutre, UI design, navigational design, wireframing and prototyping.

  • Tools: Pen, paper, Sketch 3, Omnigraffle, InVision

  • Deliverables: high-fidelity interactive prototype

The Context & Challenge

Cole Hardware is a family-owned business, which first opened in 1959. Their main audience is a mix of builders, businesses, developers, and local people. 
They want to update their current e-commerce site to reflect more modern web best practices. The stakeholders recognize that by enhancing the online shopping experience, there are a lot of opportunities to engaging more users.

I began the research process by examining the materials given to us. Based on the brief that we were given, I started to think about how I can rebuild the site to align the business goals of the client with the end user’s needs.

Methodologies Used:

Examined and analyzed the 3 given personas. They are categorized by their knowledge level on hardware and attached with a tagline.

•  Thomas: "The Newbie"
Wants: gift card options
•  Lisa: "The Enthusiast"
Wants: DIY ideas
•  Andy: "The Pro"
Wants: fast checkout/delivery process

Card Sorting

Conducted 3 iterations of Card Sorting with 8 different users in total. Based on the results, the following design decisions were made for the information architecture of the site:

•  Categories for global navigation
•  Vertical menu for better mobile scaling 
•  Vertical subcategory dropdown menu


Examined 3 of Cole Hardware's main competitors in depth: AubuchonOrchard Supply, and Home Depot. Other popular e-commerce sites were also reviewed for inspiration, such as:

•  The "Recently View"/"More Items to Consider" sections from Amazon
•  The product detail displays from Instacart

Customer Experience Map

In order to focus on the needs and pain points of the personas, a Customer Experience Map was constructed to highlight all the potential negative that the users can go through during their online shopping experience.

With the results of the Card Sorting, I created a Venn Diagram to help visualize how different users the categorized the products. The overlapping middle portion gave me a good indication of the category names that the majority of the user had a consensus on, which became my foundation for constructing the navigation menu. 

I wanted the home page to be simple so that novice users wouldn’t feel overwhelmed. I made sure that the DIY section was visible for Lisa’s needs. The “Andy”-type user are likely to go straight for the search bar, since they know exactly what products they want. 

Process & Ideation 

Using the sitemap built based on results of the card sorting, I constructed a series of tasks and analyzed how each of the 3 personas would perform them on the site. This led to the creation of a user flow diagram, which helped me to map out the frames I need to make for the prototype. 

Task Analysis

Wrote out what each user would do step-by-step, which helped me to create the user flows.

User Flows

The user flow diagram gave me an idea of the amount of wireframes I needed to create.

Usability Testing

Tested 6 users to eliminate 80%+ of design problems. Made major changes to the nav menu design.

With the redesign of Cole Hardware's site, my main goal was to Accommodate the needs of users with different levels of knowledge: 

For the Novice: 
•  Simple, intuitive landing page
•  Gift card option

 For the Enthusiast: 
•  DIY section for ideas & inspirations

For the Pros:
•  Visible search bar on home page
•  Faster checkout process for site members 

[unex_ce_button id="content_6j2fx1ifj,column_content_0280hncui" button_text_color="#000000" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#33b2b5" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#000000" button_border_radius="0px" button_text_hover_color="#000000" button_text_spacing_hover="2px" button_bg_hover_color="#e8e8e8" button_border_hover_color="#000000" button_link="" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]Interactive Prototype[/ce_button]