Gomez Homes

An eCommerce website for a hardware shop

Gomez Homes is a fictional neighbourhood hardware store, headed by Bob Gomez. Bob is having a hard time adapting to the new way of shopping during COVID-19. He has had a drop in the revenue stream and sales. To move on from the traditional method of sales, Bob wants to enter the eCommerce field by introducing his own website for the store
12 Days
My Role:
Solo | UX Researcher and Designer

Tools Explored and Used:
Pencil & Paper
Optimal Workshop
Tablemates' brains
Competitive & Comparative Analysis
Feature Inventory and Prioritisation
Open and Hybrid Card Sorting
Information Architecture Research
Paper Sketches and Wireframing
Axure Prototyping
Usability Testing & Iterative Designing

A common sight in a hardware store. Photo from VOA

About the Client
Gomez Homes’ customers range from local residents to small businesses. Their staff is friendly and has technical expertise in various speciality tools that they offer.
Their highest priority has always been given to the personal contact that they have with their customers. Bob likes the fact that people feel free to come into the store simply just to “talk shop”. To him, customers are not only a source of revenue, but more like a part of the community that is there for each other.
Personifying Gomez Homes' Customers
Meet Jaime.
Jaime recently moved into a house in the heartlands of Singapore. She is handy, and likes DIY projects and gardening. She likes to meet people in the same community and bounce ideas for new DIY projects.

Photo by andiezoe

Since moving in, she wants to do some minor tweaks to the new house, and she wishes to do these tweaks herself together with her family. 
They have had loved ones affected by COVID-19, so she is precautious about heading to physical hardware stores to do her purchasing.
Looking at a project, she would also like to plan ahead, and minimise the number of orders she needs to make to get all the material and tools she needs
How might I be able to get her not only do some purchasing online from Gomez Homes, but also let her have some ideas and inspiration for her projects? 

How might I be able to get Gomez Homes to provide some expert opinions that Jaime would have gotten if she were able to go to the physical store and talk to the staff?
How do we stand out?
Competitive Analysis​ | Feature Prioritisation​​​​​​
Bob wanted some features incorporated into the website. However, to plan the development of the website, I did a little analysis of our direct and indirect competitors’ websites. I was able to see what sort of features work on the websites, and how they are shaped and presented.
While Gomez Homes’ website needs to stand out amongst the direct competitors; it also needs to have a sense of similarity 
This is for potential customers who will be able to easily navigate through the website since they are familiar to the competitors’ ones
Looking at websites of the indirect competitors like IKEA and LEGO, I observed some of the features that appeal to people who use their services. 
Customers like Jaime have a similar interest in DIY, and thus I can incorporate some of their features to make the website stand apart from the direct competitors
I charted the features observed using a Cartesian map based on how much value they will bring, and how much effort is required to develop the same. 
Based on the chart, I prioritised the features using the MoSCoW method - Must Have; Should Have; Could Have; Won't Have

Who says design and organization don't go hand-in-hand? Photo from Pinterest 

How is the website organised?
Information Architecture | Sitemap
Creating the information architecture of the website was important to ensure information found was fast, and it was easy for Bob to maintain the database of products online. To Bob, this would be similar to planning the layout of his own warehouse.
Open Card Sort - Similarity Matrix
56 unique categories wholly created by the respondents based on the interpretation of the products
High-Level Categories, Sub Categories or Categories of potential application
Hybrid Card Sort - Similarity Matrix
Categories filtered and refined through competitive analysis and put to test for their intuitiveness. 
Similarity matrix shows denser and distinct clusters compared to open card sort.

An optimised Sitemap for the Gomez Homes website - after going through card sorting and competitive analysis

I was able to evaluate the findability of products in my website using the Tree Testing method.
Respondents were tasked to find certain products and services within a given list of categories. 
54% of the respondents had never been to an online hardware store before. 
46% of them have been to an online hardware store at least once. 

How does the website look like?
Picking up the pencil first, I practised rapid sketching on how the website should look like. During this, I incorporated the features from the prioritisation exercise, and how they fit into the layout structure. 
First paper sketches of the Gomez Homes' website. What are straight lines and legible handwriting?
Keeping a sense of familiarity
I made it a point to incorporate features that Bob initially wanted, and are expected of an eCommerce website. This will allow users like Jaime to shop online with Gomez Homes easily
Gomez Homes Home Page with Search, and Popular Items
Gomez Homes Product Display Page with Multiple Images, Product Description and details, and other recommendations
Shopping Cart Page with Subtotal price, ability to change quantity, and additional products that the users can add to their cart
Select Address and the Delivery type
Order Confirmation
Chat Live! with Gomez Homes staff, so that they are able to provide their expert opinions in real time.
Standing apart from direct competitors
I introduced some new features that I observed on the indirect (analogous) competitors' website. Having these features will appeal to a larger customer base with Gomez Homes website's increased functionality
Navigate by "Themes"
Users are able to navigate to a item not only by the type of product, but also based on how they can be used or their application. These lists are created by the expert staff of Gomez Homes.  
Create Project "Part Lists"
Gomez Homes website now allows users like Jaime to create and plan part lists for their own projects. These lists can be saved under their account, and they can place order for any of the parts at any point of time. They are also able to monitor the budget of the said project. 
Users like Jaime can now get some ideas for project, have discussions about certain topics, and consult experts. Bringing a community spirit to the Gomez Homes' website
Testing and Iterating
System Usability Scale (SUS) score showed an increase from prototype version 1 to version 2. 
The SUS measures the usability based on the user feedback through a standardised set questions. 
I set out to find out where I can further improve on the prototype. 
Paper sketches for layout improvement after first round of Testing. 
Navigate by "Themes"
Users found it hard to relate the feature to the erstwhile label "Browse By". 
I changed the label to "Themes" and there was 50% increase in users intuitively able to navigate to list of "Themes"
Create Project "Part Lists"
When users reached the Product page, they were unable to add the item to their project part list. I realised this was happening due to the icon that I had used to perform the function "add". 
I replaced the icon with one that signifies the function better. To my surprise, the success rate jumped to near 100%!
Adaptive Mockups
Final Thoughts
Moving forward, with client consultations, I'd want to work in other features such as the "Community Forum" to work on the "small shop" appeal that Bob wants. More Usability testing and iterative designing so that Bob has the most optimal website design. 
I'd also like to work with the web developers to build the metadata of Gomes Homes' line of products. This will optimise the search engine, and will enable filtering the products by brands and themes.

You may also like

Back to Top