Cole Hardware Website

Creating an Updated E-commerce Experience for Cole Hardware  

Project Goals: This project was about executing a full 2-week design process while applying fundamental UX skills. Specifically, Competitive Analysis, Card Sorting, Information Architecture, Wireframing and Prototyping. 

Deliverables:

• Site Map
• User Flows
• Wireframes that illustrate the user journey
• “Click-Thru” Prototype

Tools: Sketchbook, Index Cards, Sketch App, InVision App

About the Client: Cole Hardware is an independently owned family business dealing with an extensive cross-section of clients including builders, businesses, developers, and local customers. 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.

Part 1: Define the Goals 

Some of Cole Hardware's goals include:

• Streamline the website to reflect current web best practices.
• Create a more intuitive navigation structure, product category and product detail pages.
• Better engage the local community by providing a more engaging online shopping experience.
• Maintain Cole Hardware’s identity as an independently owned family run business — different than the “big box” chains nationwide.
• Generate more online and in-store sales: A better web experience will yield more first-time and return customers (the site currently suffers from a high bounce rate) Interesting DIY / Blog content online might inspire people to visit physical stores to browse, explore and talk with a Cole expert face to face.

With 5 stores around the city, Cole Hardware is a San Francisco staple in the market with a strong brand. 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 that perfect drill.

However….

The current Cole Hardware web presence is cluttered and hard-to-navigate that doesn’t offer an efficient or pleasant online shopping experience.

Part 2: Competitive Analysis and Research

I began by looking at the websites of “big box” (Home Depot for example) stores as well as smaller local San Francisco hardware competitors, and evaluated site structure, navigation, functionality and overall feel of the online shopping experience. 

• The big store websites (Home Depot, Ace) feel more generic, colder and have less personality than Cole Hardware. However, they offer a smoother and more efficient online shopping experience. (product search, categories, checkout)
• Smaller local stores (Nob Hill Hardware, Progress Hardware) may compete for local in-store customers, but offer little in terms of online shopping. Their sites are dated with limited shopping functionality.

Cole Hardware has an opportunity to be uniquely situated as a local, non-corporate store with personality and SF roots that also offers a great shopping experience on the web.

Part 3: Information Architecture, Site Map & Personas

In order to better understand how people think about and categorize hardware store products, I conducted a Card Sorting exercise.

What’s that?

Card Sorting is a technique for finding patterns in how people would expect to find content or functionality on a website. It helps create product categories that make sense.

Using Optimal Workshop’s on-line tool, I asked testers to create categories and sort a selection of popular Cole Hardware products. A professional contractor created categories that were quite different than those created by a 20-something college theater major. This wasn’t surprising. But despite these varying perspectives, I was able to extract some common conventions to establish product categories.

Personas

By evaluating the needs, pain points and profile of each group of typical customers, I was able imagine a site structure that is well organized and caters to the specific needs of each persona.

I organized a site that’s intuitive and easy for the typical customer to use, focusing on the needs of “Lisa,” a busy, 28-year-old graphic designer.

Lisa doesn’t have a ton of time to shop, she works M-F, and needs an online experience that is fast and seamless. She’s not a total newbie to making and fixing things on her own, and desires more in-depth product descriptions so she can better compare and contrast items before buying. Lisa is also a DIY enthusiast, she’s constantly looking for inspiration for at-home projects.

Key design decisions I’m planning for based on Lisa’s persona:

• Simplified product categories and sub-categories for easier navigation
• Product pages with detailed descriptions, specs and customer reviews (everyone expects customer reviews with little stars these days)
• Streamlined and cleaner design with more up-to-date e-commerce conventions + faster check-out process for return customers

Also:

• Talk to Cole Hardware about potentially having cheaper shipping options for certain situations, or free shipping for certain members (this could be a big plus for the tradesman / contractor persona as well)

Using the information gained from my competitive analysis and card sorting exercise, I began sketching some ideas for the site map.

After a few more iterations I created a more refined site map. A sitemap should organize information into meaningful categories so that customers can find what they need, and understand what they’ve found.

Part 4: Designing Flows for the User Journey

Mapping out the major user journeys helped me understand actions that the user (not the computer) takes when they use the site. Here are three scenarios:

1.) A DIY enthusiast is planning to stain some new bookcases first thing Saturday morning and wants to make sure she has all of the supplies ready to go.

2.) A resident is looking for inspiration for a gift for his gadget­-freak DIY brother who loves to collect every tool imaginable.

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

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

his particular user journey shows an “ideal path,” or the fastest path to checkout. The path of least resistance. The most awesome scenario.

Part 5: Wireframes and Prototype

Now that I have a sense of how typical users are likely to navigate an improved Cole Hardware site, I can start working on wireframes. Serving as a visual guide, these screens are meant to serve as a basic template that shows where various (repeatable) elements will be placed. It’s basically the skeletal structure for the site’s key pages.

A few of the wireframes I created:

Part 6: Next Steps for Cole Hardware 

If I were to continue this project with Cole Hardware, I would want to conduct usability testing based on my click-thru prototype, and from there, make further improvements to the site’s information architecture and wireframes. It would also be useful to think about content creation and planning. With the addition of a DIY / How-to / Blog section on the site, there’s potential for more traffic and new customers interested in getting ideas for home projects. Cole Hardware seems to have a strong network of locals with deep maker knowledge — perfect candidates for producers of original content.

DIY is a growing trend, and young “maker minded” San Franciscans may represent Cole’s second largest customer base, after the contractor / tradesman that is Cole Hardware’s core bread and butter.