The e-commerce site of Cole Hardware, a family-owned company, is antiquated and doesn't reflect modern web best practices.
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
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
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.
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
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
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
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.
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.
Wrote out what each user would do step-by-step, which helped me to create the user flows.
The user flow diagram gave me an idea of the amount of wireframes I needed to create.
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