top of page

Making an E-commerce website for Splendid Housewares— a UX Case Study

Homepage.jpg

Project Overview

​

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. 

​

Key deliverables

​

The required deliverables for this project were:

 

  • Sitemap

  • Scenarios

  • User flow

  • Wireframes

  • Prototypes

  • Presentation

​

Results

​

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.

PROJECT

Concept

WHAT

Website

WHEN

Aug 2019

TIME

2-Week Sprint

split.jpg

Process

​

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

process.png

Phase 1 - Discover

User Research

​

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:

 

Interviewee 1:

  • 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

 

Interviewee 2:

  • Wherever cheapest

  • 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

 

Interviewee 3:

  • 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

Contextual Inquiry

​

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.”

contextualinquery.jpg

Competitor Analysis

 

A Competitor Analysis was done to find common trends among various companies to know what to include in Splendid Housewares website.

competitors.png

After looking at 9 stores, the following trends were:

 

Landing Page

  • 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

 

Check-Out

  • Most had Inspirations/Guides

  • Few had too much information/overpopulated/ many options

Phase 2 - Define

User Persona

​

After gathering all the user research, I was given a user persona to work with:

userpersona.png

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.

jobstobedone.png

Card-Sorting

​

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:

 

User-1

- Categorised 10 groups

 

User-2 

- Categorised 11 groups

- One category had amount of pieces

 

User-3

- 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.

cardsorting.png

Information Architecture

​

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.

ia.JPG

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.

iafinal.png

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.

Site Map.jpg

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.

sitemap2.jpg

User Flow

​

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.

userflow.png

Phase 3 - Develop

Low-Fidelity Wireframes

​

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.

iteration1.png

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.

iteration2.png

Phase 4 - Deliver

Mid-Fidelity Prototype

​

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.

High-Fidelity

​

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.

e-commerce personas 1.jpg

Next Steps & Key Learnings

Next steps

​

  • 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

 

​

Key Learnings

​

  • 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.

bottom of page