UX Case Study | Nuts & Bolts E-commerce Website
How I designed the very first e-commerce website for a local hardware store in London in a 2-week Design Sprint.
Overview
This e-commerce website design was developed in a 2-week design sprint as part of the User Experience Immersive course by General Assembly.
The main goal of this assignment was to explore the design process of creating the very first e-commerce website for Nuts & Bolts, a fiction hardware store located in Wandsworth Common, London.
The following case study will take you through each step of my design process following the double diamond method: Discover, Define, Develop and Deliver.
1. Discover
The Brief
Nuts & Bolts wanted to showcase their products through a brand new e-commerce website, while maintaining their brand image. At the same time, they wanted to maintain their ‘small shop’ appeal and great customer service.
The feature prioritisation were clearly set out using the Moscow method as shown below:
Competitive Analysis
First things first, conducting a good competitive analysis would give us an overview of the main players in the local market. Also, it would provide us with insights on Nuts & Bolts’s (N&B) competitive advantage.
This phase was conducted by myself and three other UX designer colleagues. We kicked off by revisiting the brief and the most important features that we should be observing in competitors’ websites.
The second step was deciding which competitors we should be looking at. We chose these competitors (you see on the image below) because they are a combination of big retail stores and local ones with large inventories, so that we could draw insights from both.
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.
In addition to that, I thought it was important to have a look at the Wandsworth Common neighborhood on Google Maps to analyse the local competitors’ online presence.
The result was that none of these neighborhood competitors were present in the online market, which were great news for N&B.
User Research
It was crucial for us to put ourselves in N&B user’s shoes to understand the experience from their standpoint and not ours. To start with, my colleagues and I created an Interview Script containing three blocks of open-ended questions:
- Demographics: to help us build our persona;
- General Online Shopping: to understand general online behavior;
- Hardware Stores Online Shopping: to grasp their previous experiences in this segment online.
User’s Demographics
Below you can find some stats on our users demographics:
User Research Insights
Our group was aware that 5 users would not be very representative for a user research. Also, the fact that they were all male presented a limitation for our research. However, for the sake of time and deadline we decided to move forward with what we had.
After compiling all the answers, we found that 80% of users are comfortable with buying online and have purchased hardware items online before. The latter was something completely unexpected for me, especially given the age of the group.
Also, in general what their expectations on what they would like to see on a website when buying online were:
- product images and videos;
- good product description;
- reviews;
- promotions.
And their pain-points were related to:
- poor quality images;
- preference to see the physical product in store;
- difficulty to determine product’s quality online.
2. Define
From here onwards our group split up and we moved on to the next steps individually.
Persona
Based on the user research findings I created Henry, a fictional representation of N&B’s audience for their website.
The purpose of creating a persona was to capture user’s motivations, frustrations and the essence of who they are. It helped with clarity on who who we would be designing for.
Card Sorting
To better serve Henry, it was important that information would be clear and products would be easy to find on the website. To provide that our group conducted a research with 10 people, 6 male and 4 female. Using Trello, we asked them to organise a list of product items into categories:
By doing so we understood their mental map and what each person would find more intuitive in terms of categorizing products on the website. As a result we found out that:
▸ The task becomes a lot easier and quicker when users understand the name of product;
“I don’t even know what that is.”
▸ Not understanding the name of the product caused frustrations, confusion and anxiety.
“This is gonna be so hard cause I know nothing about Hardware.”
Overall, users created a minimum of 6 and maximum of 8 categories to organize the product items they had been given, as you can see below.
Sitemap
As a result of the overall card sort, the following Sitemap presents the hierarchical structure of the website and the relationship between its pages.
But then I thought to myself.. “is it complete enough to accommodate all of those product items from the card sort exercise?
And the answer was.. no! After conducting a “card sorting proof-test” I discovered that there were some items left with no clear sub-category to be fitted in. Therefore, I added them:
3. Develop
Scenario & User Flow
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:
I’m not going to talk you through it because you will see each page and its interaction on the digital prototype.
Sketched Wireframes
These were some of the first screens sketched out on paper. It was important to do this so that I would visualise what the experience would look like before starting to digitise.
Low-Fidelity Wireframes
Subsequently I used the software Sketch for the first time to create digital low fidelity wireframes and started making improvements from there, based on user testing.
Usability Test Script & Method
Talking about user testing, the first key step was to create a test script by writing an introduction, scenarios and tasks for the participants that would be joining the test.
This ensured that the communication would be standard and aligned across every test.
Below you can find some demographic stats on the test participants:
4. Deliver
User Test Findings
After running tests, these were some of the things that users said:
☞ Do not highlight call-to-action buttons that lead to the user flow, make them think to get there;
☞ Register / Sign in were squeezed amongst Store and Basket icons;
☞ On the products page: “I don’t know how many reviews there are.”;
☞ Not clear how many pages there would be on subcategory page;
☞ Put “Customers also Bought” section a bit higher up on page because it would require the user scrolling down to see it.
☞ UI: work on sizing of overall screens because features looked a bit too big for a website.
Mid-Fidelity Wireframes
Considering these valuable insights and feedback to improve Henry’s experience, I moved on to Mid-Fidelity wireframes iterating accordingly.
Some more user feedback on iterated screens:
☞ On the product’s page, user suggested to change a button’s title from “Add to Delivery” to “Send it to me” because it felt more like “you are serving me” than a task for the user;
☞ Adjust number of items in the basket: not by type of items, but by overall quantity because the former was confusing for the user;
☞ Polluted Checkout Page: “I wouldn’t expect to see all this on the same page.”;
☞ Suggestion to add “pay in cash” in store;
☞ Include a consent on the website’s Privacy Policy;
☞ “Return & Refund Policy” bullet points were wrongly understood as checkboxes.
Final Prototype
The moment everyone was waiting for… the final prototype!
Using InVision, I created this prototype by linking the final iterated wireframes to provide Henry with the best possible experience centered on his needs and pain points, as well as satisfying business needs:
If you prefer checking each screen at your own pace, please check them out here.
How the Brief was successfully met:
Looking through the prototype you will find features that satisfy the majority of Nuts & Bolts requirements:
Next Steps
Moving forward, it would be important to:
- Iterate to High-Fidelity wireframes;
- Conduct more Usability Tests;
- Allow for responsiveness by creating Mobile and Tablet versions.
Thanks for reading!
If you would like to check other UX design projects or get in touch, please visit my portfolio by clicking here. See you there!
