Overview
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
Scope
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.
Research
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:
Personas
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
Competitive/Comparative
Analysis
Examined 3 of Cole Hardware's main competitors in depth: Aubuchon, Orchard 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.
Synthesis
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.
Solution
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
