COLE HARDWARE
I come from a strong customer service background. I have worked at companies that value customer service and its customers. I appreciate and support small and local businesses.
My last position was supporting a luxury e-commerce site and I felt that I could relate. I took my past work experiences and applied them to my learnings on this project (and this program).
I also wanted to practice my technical skills and see how much I’ve learned in a few weeks.
PROJECT SCOPE
Duration: Total of 4 weeks
- Second project of program: present low fidelity prototype (2 weeks)
- Fourth project of program: develop case study and present high fidelity program (2 weeks)
Solo project
OVERVIEW
Cole Hardware is San Francisco’s favorite hardware store. It was founded by Dave Karp 1961 and he established several stores in San Francisco and Oakland since.
His motto and business philosophy is to practice excellent customer service and treat his customers as friends. He even put this sign over the cash register at his original store on Cole St.: “There are no strangers here, only friends we haven’t met.”
CHALLENGE
My initial assumption was that the Cole Hardware site was unorganized, cluttered, dated and did not provide an efficient shopping experience for new and existing customers.
COLE HARDWARE'S CURRENT WEBSITE
SOLUTION
The solution was to redesign the site to make it a more organized, efficient shopping experience for Cole Hardware’s new and existing customers.
MY ROLE
I played many roles in this project due it being a solo project. From the User Researcher to Information Architect to Designer.
Recalling my past visits at the Cole Hardware on Fourth Street, I realized that customer service in the store is exceptional and engaging — which did not reflect their website.
RESEARCH AND COMPETITIVE ANALYSIS
To better understand Cole Hardware’s site, I started my study by visiting Cole Hardware on Fourth Street and several competitor sites such as: Home Depot, Lowes, Orchard Supply and Ace Hardware.
I brainstormed by affinity mapping and came to the conclusion that the Cole Hardware website is not meant to be a proficient e-commerce site. Their site focuses on their services (repair referrals, 24-hour locksmith, tool rentals and rewards). Their “shopping for products” section is not even prominent.
I understood Cole Hardware’s customer service and friendly neighborhood culture, but wanted to bring all those elements to life on their website.
I was able to confirm that by learning that a Store Manager stated that there are only about nine transactions a week on the website and that they are losing customers to big box stores such as Home Depot and Lowes.
PERSONAS
Personas are important because I needed to know what features to design, how to simply structure the site and how a user flow would be designed to make a seamless experience.
INFORMATION ARCHITECTURE
To get a better understanding how a hardware site should be organized and simplified, I decided to use some of the competitors’ organizational features. I followed their structure to help me card sort.
Cole Hardware's "Shop/Search for products" and "Electrical & Lightning" pages:
For card sorting, I used the Optimal Sort program and had a few of my classmates take the survey. They all understood the structure I used from Home Depot.
Card sorting helped me design a site map, which made designing the user flow so much simpler.
MAJOR FINDINGS
Convenience, efficiency and organization is what matters.
Cole Hardware has hundreds of different tools and products. And they were not categorized in any particular way. That makes it very difficult for customers who know nothing about hardware.
User testings were conducted and all confirmed their shopping experiences were better on organized sites.
In general, people need organization, product descriptions and simplicity to take their time and spend their money — especially on a hardware website.
COLE HARDWARE USER JOURNEY
I created a user journey map for one of the personas (Thomas) and it revealed many negative points.
DESKTOP WIREFRAMES
First wireframe:
High fidelity wireframe:
ITERATION
I decided to keep the simple aesthetic from the original Cole Hardware site. I didn’t want to include new colors or add extra elements. It’s important to keep the same aesthetic as the original because I didn’t want to disregard the “neighborhood feel” and not emulate a big box e-commerce site like Home Depot.
Although the brick and mortar Cole Hardwares are a little “kitchy” (decided to add just a little “kitch” on the header), I still wanted to keep the site simple and more importantly, organized.
WHAT I HAVE LEARNED
After completing this project, I’ve learned what consumers expect from a business (from brick and mortar to online). Although customer service should be exceptional across the board, some businesses *could* only focus the exceptional customer service in their brick and mortars due to budget constraints and other reasons.
I learned how to organize (card sort) data, take user testing feedback and implement my learnings to redesign a hardware site — all while still keeping their brand philosophy alive.