Cole Hardware came to me with some research and target user personas in hand. So I began to take a look at the common overlap between their business needs and the needs of their target users. I also started with a heuristic analysis of Cole Hardware’s current website. It was clear that there were many common goals that would not only help users but benefit the business as well.
“Cole Hardware also has a quirkyness to its business approach that is centered around helping its customers as much as possible.”
Solution & Strategy
My strategy for redeveloping lies in the overlap of needs. My first goal is to organize the content and give it meaningful taxonomy so that it’s easier to find. Related to this we’ll need to make sure the navigation is understandable and the breadth is not too large that it’s overwhelming. Since this needs to be a mobile experience we’ll need to keep the design modular so that making it responsive is easier. For our users who need help finding the products, they might like products suggested to them based on relevance and ratings.
First up we have a long product list that currently has confusing naming conventions and categories that go into way too much detail. It makes looking for products debilitating even for most committed customers. So I used card sorting to understand user's mental models. Some interesting and unexpected results came from this method and the synthesized results are shown below.
Information Architecture & Content Strategy
To start laying out the structure of the site, I began to draw a sitemap. This included the categories I had just developed from card sorting with along with the idea of relocating some their current content more appropriately and a more natural checkout process. Overall, the intention was to improve the user experience by simplifying content and creating a smoother e-commerce experience.
Understanding User Flows
To further understand user flows I drew out several diagrams, one for each persona. These are decision trees for each of their flows from entry to exit and the possible paths each might take to get there. With these focused user flows I was able to work out a few more undecided details about the flow of the site.
Starting with hand sketches, I sketched out the first set of main screens fairly loosely. I brainstormed how the navigation would work. Basing my ideas on some of the great websites I had tested in the competitive and comparative analysis. I also kept the idea of modularity and grid in mind when sketching knowing that this would need to work on mobile at some point in the future.
The Benefits of Rebranding
To really bring Cole Hardware up to date and into the changing marketplace for e-commerce, I took a look at their branding, which seemed to be holding them back. Since this process wasn’t all about rebranding and mainly focused on the website, I took a quick pass at their logo to show that with just a little effort, they could pivot to a more modern aesthetic while holding onto some of their heritage and values. I used inspiration from their current logo, which was a little busy and overly complicated for a logo and riffed off of it a bit incorporating some tool motifs.
I conducted usability testing first using the paper prototype. This uncovered some of the larger flow issues. After tweaking the design and digitizing it with Sketch I developed an InVision prototype. I sat down with 4 people, after the first two, I had a good list of changes to make. I tested one more and caught another problem with the wording of the Quick Buy button. I retitled the button to ‘Buy Now’ and tested a fourth user who also made a mistake by clicking the button thinking they would just be taken to the product details page. The problem came down to the heuristics of the button and users not reading what the button actually said.
The global navigation bar has been stripped down from the original website and product menus have been moved to the left-hand side using fewer levels of categories for easier searching. The homepage also starts with a featured content carousel followed by four main categories which appeal to each of our personas.
Search results are simple and start with Best Sellers featured at the top with product filters and a breadcrumb for easier navigation. Customer reviews preview on each of the search results as well. This was missing in their previous website and is a hugely beneficial feature for customers trying to decide on a new product.
Checkout Sign In
The checkout sequence is crucial in e-commerce. Many companies experience lost conversions from abandoned carts. To combat this I’ve simplified checkout to 3 steps. The company also wants to generate and reward return customers so we give users a chance to log in.
DIY Featured Projects
DIY is a huge market for the hardware store. Though their main profits are generated by users like our persona “Andy” the contractor, customers interested in DIY projects will be lifelong customers and will continue to come back with new ideas. I created a new DIY section with lots of projects to choose from. Each one would describe the process in how-to style and then suggest products from the store to complete the project.