Cole Hardware



Update their site and streamline their e-commerce platform to reflect modern web best-practices.

My Role

UX Designer and Researcher. Project timeline was 2 weeks.

cole hardware website

cole hardware website

The Client and their Challenges
Cole is a local business that is valued by the community, and offers a unique presence. They must compete with bigger retailers who effectively leverage online commerce and compete with their market share. They want to update their site and streamline their e-commerce platform to reflect more modern web best practices.

User needs
We were given 3 user personas to choose from. I chose Lisa, a DIY enthusiast and creative professional.
Lisa reflects a customer base that would fulfill a few needs of our business:

  • Being a hobbyist, she would be a repeat customer
  • Being a young professional, and social media savvy, she would also be likely to share her projects with friends and tell others about how Cole Hardware is a reliable place for tools and supplies for their projects  
Lisa Persona.jpg

Lisa’s primary needs:
DIY-oriented resources including videos, reviews, and advice from other customers on projects and products.
Easy-to-find items by brand name, with full product descriptions and reviews, and the ability to order online with home delivery. In particular, she has a bookshelf staining project set for this weekend.  

Key Findings - Business + User
There are some direct points of intersection between the client’s needs and Lisa’s needs:

  • Improved search and navigation
  • Ability to shop by brand and related/popular items
  • Online shopping cart
  • Detailed product pages with descriptions
  • Member reviews

The areas where there may be a difference for our client regarding the goals or needs of Lisa include:

  • DIY resources pages, with videos and other content 
  • Free, or cheaper home shipping options

Hypothesis for design and testing:

  • Creating a DIY section with member-reviewed content, easy-to plan and buy project packages will satisfy Lisa's needs, and drive more community involvement to the site and business

R+D (research and discovery)
I did a competitive analysis of hardware stores' sites, with attention to site navigation, information architecture, visual design, and unique offerings to visitors. 
We need to consider the following:

  • Establish credibility for our users by improving navigation and usability
  • Sleeker styling and "ultra-modern” visual web design doesn’t fit with the client’s brand
  • Making it easy to find and purchase products will increase online sales, and satisfy the needs of customers

Client Research
User reviews: Cole Hardware has great reviews online, and community members seem to celebrate and value it as a local institution.

In-store Interview and Contextual Inquiry - with manager and customers
The interview with the manager validated that the site has many issues. A customer asked if an in-store product was available online, and the manager said "no". She replied by saying she'd just buy it on Amazon. 

Hypothesis to validate:

  • Using larger scale e-commerce website practices, and ACE Hardware in particular, as a reference for our redesign will fit our user's mental model of site structure and make the site easier to use, improving sales

Things that informed my process

  • Studying competitive sites and sketching their architecture was helpful in learning best practices for e-commerce
  • Card sorting and site mapping helped me understand what I was seeing in other sites
  • I used ACE Hardware and other sites as a basis for my process moving into site mapping, user flows and wireframes

site architecture for department categories

Discoveries from Competitive Analysis - Summary  

  • Big stores: OSH, ACE, Home Depot, Best Buy have similar solutions for product pages, checkout process, department categories and navigation. 
  • Function over form will fit our client’s brand.

Ready to design and test

Crafting a User Flow
My strategy at this stage was to focus on the user flow for my primary persona, Lisa. Her needs included having DIY resources and home shipping, so I worked towards crafting a simple checkout process for her visiting the site with the goal of purchasing products for a specific project.

  • I designed an interactive prototype, to validate or invalidate design through user testing.
  • Five subjects were selected for user testing.
  • I was able to iterate and apply feedback from the first round of testing, and validate these design choices in the second round.

Above: Wireframes built for usability testing


What did I learn?

  • During user testing, I realized that different people have varying mental models regarding how to "get at" information within a site, and we must design with this in mind

Next Steps:

  • Craft wireframes to accommodate multiple mental models for our user flow
  • Individual Item pages
  • Member rewards section
  • Contact Forms
Cole DIY 3.17.jpg

Was there a solution?

  • Providing a list of items "by project", with options for customization received positive feedback
  • Check-out flow and form design was smooth and predictable, while providing reassurances that met our users' needs

Open Questions:

  • How would the rewards section look and work?
  • What user feedback would there be at higher fidelity?

Live site viewable at: