Project 2 UXDI General Assembly London: Designing a hardware e-commerce store for DIY enthusiasts
A 2-week sprint that I independently researched, designed, tested, iterated and present a clickable e-commerce site prototype. I was working on ‘Loading Hardware’ and a 75-item inventory to organise and design around. I identified a differentiating selling point and created a website with an inspiration-finding factor.
UX Techniques
User research, user journeys, information architecture, design studio, user flows, wireframes, prototyping and usability testing.Tools
Sharpies, Omnigraffle and Invision.
Client Objectives
Supports the local community by allowing people to order products online and have them shipped to their home, on site.
A little about the brand
Loading Hardware has a small shop appeal and focused on hand-picked quality over quantity.
Competitive Analysis: Market Research
Loading Hardware’s been in business since 1985 and their mottos included service-first with expertise to help their customers out, they focused on choosing everything by hand and they are the biggest little hardware store. It has a highly curated inventory of items that are from hand tools, power tools to utilities. They see an opportunity to serve the local community besides face-to-face customer service, and I identified competitors such as large-scale retailers, e-commerce giants and fellow local stores.
Competitive Analysis: Heuristic Evaluation
I have done heuristic evaluation of competitors including Robert Dyas, Toolbank, TyzackTools, Ace Mica, Orbital Fasteners, B&Q and Screwfix.
Competitive Analysis: Competitive Mapping
The key findings included me defining a whitespace within the landscape that Loading Hardware can leverage on between Inspiring & Refreshing and Local / Curated Selection.
User Research: User Personas
For the phase of the project, I focused on Yoshi — my primary persona which we were given to work on. Yoshi prefers going to local stores and avoids going to the big retailers, which I would want to drill down to the reasons behind that habit.
I did user interviews with a technical service officer and a product industrial designer and gathered a few more findings with their experience with an online hardware store.
Some key findings that I gathered:
1. Transportation fees come in the picture (even when click-and-collect is free)
2. Analog conversations especially when in-store expertise could provide real experience tips
3. Inaccurate and incomplete product information which does not allow users to search products easily.
When asking about why the preference for local stores, my user, Armin mentioned that:
“It is the same — chefs going to their secret local markets getting the freshest ingredients, because they know they can’t get the same at a supermarket.”
User Research: User Journey
I was looking at a specific user journey for Yoshi while I was working on this project:
As a local resident, Yoshi is looking for inspiration for a gift for a close friend who loves to collect every type of DIY tool imaginable.
With the material I’ve gathered, I created an experience map with Yoshi’s current experience with existing sites.
With these insights in mind, I framed 2 opportunities to work on for this project.
- An effortless experience — Streamlined checkout process, easy & inspiring product discovery & adding a human touch
- Championing the local feel — attacking the white space opportunity
Information Architecture: Card Sorting
After writing 75 products onto post-its, I did an open card sorting and closed card sorting to give me insight on what should be categorised together.
While working on card sorting, there are some insight that I gathered from as follows:
- Users prefer taxonomies leaning towards to descriptive & technical but tends to group objects similar by a task together
- Clear distinctions between certain categories such as Hand Tools vs Power Tools (Fun fact: I’ve learnt power tools are more destructive)
After gathering from competitive research and card sorting, I realised labels such as ‘Electronics’ that came up from open card sorting are better known as ‘Electrical’, that are closer related to the nature of the hardware industry.
Inspired by meal and beauty subscription boxes, I came up with the idea of ‘DIY Kits’ — an assembly of hardware tools and supplies that creates a two way conversation between the consumer and the business.
They are curated by the store to create billions of possibilities (wood work, table making, fixing a wall, you name it)
For DIY lovers like Yoshi and her close friend, hardware stores like Loading Hardware can be a starting point to serve as their inspiration and a handy toolbox to just, make things.
Sketching: User Flows
I worked on some low fidelity sketches, focused on directing the user from the homepage to the DIY kit.
From user feedback, the blog post ‘Ideas & Advice’ can be really confusing and blurring the lines between a store and a blog. Therefore, I cleaned the flow up, where users would click to pick a kit first, then get inspired from the ideas within the product detail page and get cracking when the product is shipped!
Prototyping: Wireframing
I started to work on the wireframes for the important steps of the user journey. Through these wireframes, I began to gather user feedback on key touchpoints:
Key issue areas:
- Are product details necessary?
- How would variation/different options of sizes be displayed?
- Why are there 3 baskets within 1?
- There are so many checkout buttons that are confusing.
Prototyping: Invision
After iterating my wireframes again and again, I imported wireframes onto Invision to make a clickable prototype to test. These are some key wireframes annotated:
Click here to see Invision prototype!
I managed to observe certain patterns that follow through with my prototype:
- After testing with a good number of users, all users managed to fulfil the task to find where to get inspiration on the landing page. Most reacted to the word ‘Discover’ and got linked to the DIY Kits page.
- In the checkout process, it was difficult to understand between ‘Delivery’ and ‘Click & Collect’ baskets
- Users appreciate the fact that they can see what’s included in the kit
The DIY kits seem to be giving boring hardware tools a new lease of life. Like windows of opportunity.
Hope you enjoy this project as much as I do :)
