How I designed the very first e-commerce website for a fictional local hardware store in London as part of the UX Design Immersive Course by General Assembly.
My Role: UX Researcher & Designer
The Team: fully remote team of 4 UX Designers based in the UK and Qatar.
Duration: 2-week sprint
Tools: Sketch, Craft plugin, InVision, Miro, Trello, Keynote, Slack, Zoom.
Problem
Nuts & Bolts Hardware Store had been serving Wandsworth’s neighbourhood since 1981, but they still didn’t have an e-commerce website.
So they wanted to start showcasing their products through a brand new website, while maintaining their brand image, ‘small shop’ appeal and great customer service.
Challenge
Time constraints
Zero budget for user research
People management during research
Deliverables
Website should:
Have clear ways of locating products
Support a single page for each product
Have an efficient way of purchasing one or more products
Steer customers toward popular products
Establish the brand and its points of difference
Allow customers to contact the business
Allow customers to browse products related to their current selection
Allow customers to read and write reviews of a product
Provide information about the store's heritage
Reward loyalty for repeated customers
Outcomes
✓ Competitive Analysis Findings
✓ User Research Findings
✓ Clear Persona
✓ 10 conducted Card-Sorts
✓ Sitemap
✓ User Flow
✓ Paper sketch
✓ Low-Fidelity wireframes
✓ 13 usability tests
✓ Mid-Fidelity wireframes delivered
✓ Final Prototype
A glimpse of the design process….
What were N&B main competitors doing in the online market?
Everything starts with a good Research. So our group kicked off this project by doing a competitive analysis. We looked at big retail stores as well as local ones.
It was very clear that “Reward Loyalty for repeated customers” was something we should be adding to the platform, as none of the competitors were offering it.
Let’s listen to N&B users
It was crucial for us to put ourselves in Nuts & Bolts user’s shoes to understand the experience from their standpoint and not ours. So we interviewed 5 people, in which all were males, 60% of them were in the 65+ age bracket and 40% were under 30 years old.
Please meet Henry!
Backed by user research and interviews, Henry was born. He represented users that needed to find sufficient product information and reviews when buying online. For them, finding a good quality product and buying it correctly for the first time were two very important things.
Have you ever heard of Card-Sorting?
To better serve Henry, it was important that information would be clear and products would be easy to find on the website.
So we made use of a design tool called Card-Sorting, in which we asked a number of people to organize a list of product items by creating categories for them - in whichever way they think would make the most sense.
The goal here was to find the common mental map and therefore the most intuitive categorization for the majority of users.
Information Architecture of the website
As a result of the overall card-sort and after doing a “card-sort proof-test”by myself, I built this Sitemap.
It presented the hierarchical structure of the website and the relationship between its pages in a way that users would find more intuitive.
Here’s the path Henry will take
So the design you will see soon aimed to help Henry in this Scenario:
“Henry is planning to paint new bookcases first thing Saturday and he wants to make sure all of the supplies are ready to go.”
He would be visiting N&B’s website and would follow this user flow. In this, he would select one product and then he would see in the "Customers also bought" section another product that he also needed.
He came to the website wanting to buy just one product and ended up taking two.
Time to grab pen and paper to sketch this experience
Sketches of the Homepage, Subcategory page and Product page.
Final Mid-Fidelity Wireframes
Let’s fast forward lots of iterations from usability tests as well as my Low-Fidelity wireframes. These are the final Mid-Fidelity Wireframes that successfully satisfy the user and business’ needs.
Mid-Fidelity Subcategories Page
Mid-Fidelity Product Page
Mid-Fidelity Basket Page
Mid-Fidelity "Confirmation of Collection" Email
Final Prototype
