Making an E-commerce website for Splendid Housewares— a UX Case Study
Context & Brief
Splendid Housewares has been Aldgate’s neighbourhood housewares store since 1964. Located on bustling Commercial Street, they are very proud to be a part of their dynamic community. Their customers are varied ranging from local residents to small businesses. Their main focus is based on customer service, reasonable pricing, and keeping it local.
I was given an opportunity by them to create a new e-commerce website within 2-weeks, to showcase their products while maintaining their brand image. At the same time, they want to maintain their ‘small shop’ appeal and great customer service. Unlike e-commerce retailers such as Amazon, we offer a highly-curated inventory, focusing on hand-picked over quantity.
The first week of the project was doing user research in a group, and then the second week was solo work in design.
The required deliverables for this project were:
The new design of the e-commerce website now allows users to:
purchase their products efficiently and easily. This was due to clear website layout and high usability of the site.
have convenient and simple checkout experience. The checkout is designed as a tab-system which makes this possible.
The Double-Diamond process was used throughout my project. In the beginning, I did not realise that I have been using this process until the end of the project. I was still learning the UX processes and methods at the time; I came across the Double-Diamond when I looked at different workflows of UX. What I have learnt from using this type of workflow is that it allowed me to focus on what needs to be done at different phases of the Double-Diamond.
Discover - User Interviews, Contextual Inquiry, Competitor Analysis
Define - User Persona, Card-Sorting
Develop - Information Architecture, Site Map, Navigation, User Flow, Low-Fidelity Wireframes
Deliver - Mid-High Fidelity Prototypes
Phase 1 - Discover
To understand what is the shopping experience like in the houseware industry, I have interviewed 3 users about their experience. The users that I have asked gave very helpful insights which I have highlighted the following:
Online, gets delivered to your door, it's easier than carrying it and dimensions are online
Don’t have a car, so it's more convenient to buy online.
Whole experience was seamless, no pain points
Quality, is it sturdy
Ikea is a trusted brand, easy to refund
Good experience because you get what you expected
Bad experience is when table legs are short or TV is missing parts
Online, convenient no time to look
Research first, if its is fabric I look for fabric samples
If I don’t know then I go out
Feel the fabric if it is comfortable
Recently bought lamp, it came broken because it was not packaged safely was not in a box. Customer service was good, refunded
If quality is good, then price does not matter
Amazon, “Buy now” is more convenient because it's quicker than going through several steps on checkout
After listening to my users, I had an idea of the user’s experience of shopping online but this only gave me a little insight of what my users could be; so to understand more of my users I went out to a local store that sold similar products as Splendid Housewares. The store I went to was Loaf and started to observe user’s behaviours and actions within the store. The following findings were:
Testing the products by touching, grabbing, sitting
Grabbing one curtain and another to compare
Taking pictures from outside and inside
Some take pictures and leave
Woman took photo of her daughter using a DSLR camera
Woman sitting down and looking on phone
Some people took phones out to check while speaking to staff
Picked up leaflets from coffee tables
Looking on phone and standing for a while
Mother with baby pram showing something on phone to staff and socialising
People interacting with the products
After noting down my observations, I then asked one of the customers about what motivates them to come to this particular store. I also recorded the interview and highlighted what she said:
“…it’s good to have a showroom in central London could be bigger, I guess. Because obviously this is a big space for central London, but they have so much to offer and also on their website.”
“I don’t like Ikea because I think there might be almost too much on display because they just want to show everybody everything.”
“they'll have measurements always. But until you see it, you go oh, my God, this is so much different from my current profile.”
“I'm a visual person. So if I can't see it, it's very difficult to imagine. We might or I might make the wrong decision.”
A Competitor Analysis was done to find common trends among various companies to know what to include in Splendid Housewares website.
After looking at 9 stores, the following trends were:
All Navigations are at the top
Most have Primary content as New/ Key products and some had Sale items
50/50 between Promotions and Product Categories
Most Tertiary Content is at the bottom
Most have Store Locator
Product Details Page
All have individual items displayed with descriptions and most have Suggested Items or Frequently Bought Together
All have Picture Gallery
Some had Wishlist
Some had Stock Indicator
Few had Check Local Store Stock
All able to Filter Content
90% have Product Reviews
Most had Inspirations/Guides
Few had too much information/overpopulated/ many options
Phase 2 - Define
After gathering all the user research, I was given a user persona to work with:
I decided to change Olivia’s frustration points as this reflected my user research. Changing this will inform my work on later stages and sets as a reference for decision making.
Jobs to be done
I used the jobs-to-be-done framework to help with capturing the user’s needs, which helped direct the design decisions that were made during the development phase.
I was given an inventory of products provided by Splendid Housewares, and used the method of open and closed card-sorting to understand how users categorised their products. Through this process, I was able to find the common groups and included this in the website product list.
In open card-sorting, I tested with 3 users and found the following:
- Categorised 10 groups
- Categorised 11 groups
- One category had amount of pieces
- Categorised 22 groups
When finishing with the third user, I collected together what was the most common groups and proceeded with close card-sorting.
For close card-sorting, I tested with 2 users and each test I’ve iterated the groups to find the most easily recognised categories.
After finishing with the close card-sorting, this then led me to do the information architecture. This shows the overall structure of the client’s website.
I have iterated this twice to find the correct order of my navigation. I have written the groups and pages on sticky notes to validate if anything looked odd. Then I realised that my categories were not consistent, because there were two groups that had more items under them whereas the others did not.
In my final iteration, this shows how I have laid out my categories from the close card-sorting, which informed me to do Site Map.
The site map is a visual representation of the information architecture. Making this allowed me to see where the products can be found and know if the structure made sense.
This then led to drawing out the global navigation, which is located at the top of the web page. Doing this will enable users to find their products easily.
In order to understand how the users are going to find what they need from Splendid Housewares, a user flow was needed. A user flow shows a step-by-step process of what the user sees and does. I made this by referring back to jobs-to-be-done section, where Olivia needs to buy a pair of cutlery for her client which needs to be delivered quickly on-site.
Phase 3 - Develop
All the ideas that were generated from the Define phase was tested using Low-Fidelity Wireframes. The reason for doing the wireframes was to find out if the ideas make sense to the users. I’ve sketched many low-fidelity wireframes and with each iteration, I’ve also tested with different users to find their pain points. Listening to my user has helped me immensely with the process of iteration, which has given me opportunities to improve my design.
In my 2nd iteration, I have tested 4 users and then highlighted what my user’s pain points were. What I found interesting was that all my users had a lot of problems with my checkout process. After listening to my users, I have iterated my design and tested it again with 4 different users to solve the checkout issue.
Phase 4 - Deliver
In the final phase of the design, I have decided to move from Low to Mid-Fidelity. The results of the iterations has proven that there was not any major problems with the flow of the website, which has led me to digitise the design.
Scenario: Olivia needs to buy a pair of cutlery for her client which needs to be delivered quickly on-site.
Before my final presentation of the project, I was able to design the front page of the website. Although I did not finish the entire website as High-Fidelity, but it was a good starting point of how the website could potentially look like.
Next Steps & Key Learnings
More testing on the check-out system and the navigation of finding products
Iterate on how to make it look more visually pleasing for the users
Refine the design so that users like Olivia, can rely on Splendid Housewares for their products
This was the second project that I have worked on using the methods of UX to design an e-commerce website, which I am quite surprised of how much I have learnt from this.
Being able to learn the software and tools for the first time, e.g. Sketch, InVision and Miro.
Contextual Inquiry can give a lot of insights of what the users are doing, thinking and feeling.
Every single method used will inform how well the final design has solved the user’s problem.