A UX case study: Creating an eCommerce site for “Original Housewares”
I’ve always been a homebody. When I was a child I used to dream about delivery tubes that would run from the shop directly to my home. I imagined being able to buy anything I needed, at any time — be it food, clothes or…chocolate. Let’s face it, that was my main concern at that age.
So for me today’s world of online retail is a dream come true. I’ve learnt how to assess if a skirt will fit me or not; I’ve learnt to order outfits in several sizes to try on, and to opt for the brands that offer free delivery and returns in case my trained eye fails.
But buying bigger items, like furniture, is not something that we can do online like we do with clothes. We can’t order three sofas to see which one fits best — it would be a crazy waste of time, energy and money.
This is why a good e-commerce website is so important. We need to offer customers a way for them to assess what would best suit their needs, and to buy knowing that they are buying from a customer-focused housewares store — a store like my client: Original Housewares.
This was my second design project during the 10-week UX design immersive I took at General Assembly in London. It was a concept project and I had to design an e-commerce site from scratch for a local housewares store, following the double diamond design process. Let’s make a cuppa and I’ll tell you all about it.
Go on, you know you want to!
The brief
Original Housewares has been Aldgate’s local houseware store since 1964.
Their business model is based on excellent customer service, reasonable pricing and keeping it local.
Original Housewares’ focus will always be on having face-to-face contact with their customers, i.e. in-store, and being a visible part of the local community. But there is also an increasing emphasis on being able to offer a variety of products online, to serve the needs of customers who may not be able to visit the store in person, or who might prefer to order online and pick up from the store.
The client wanted to be able to:
- Showcase their products
- Keep the ‘little big shop’ brand image
- Offer a personalised customer service
- Offer a highly-curated inventory of products
- Offer handpicked quality over quantity
At this point, I was ready to start the research phase!
The double diamond approach
You guessed it, it is called ‘double diamond’ because of the graphic representation of the four common stages of a design process.
Kicking off the research phase
Contextual enquiry
To gather some insights, and as a starting point for the discovery phase, I armed myself with pen and paper, and with a genius recording app named Otter, and bravely headed out to the street.
In groups, we conducted a contextual enquiry. By observing customers I discovered that buyers liked to browse — they liked to touch and feel the items and sometimes even smell them. Some people would be just passing by; they would look at the products, resist the urge to buy them, but then try to find them online later.
‘They might enter the shop out of curiosity and end up spending £20 or £30 worth of stuff.’ Marthe, shop supervisor
Competitor analysis: So what are others up to?
As part of the research process, I looked at the e-commerce offerings of certain high street competitors such as Wilko, Dunelm and Lakeland. I considered these shops to be selling products of similar quality and variety to those that my client was offering at that time.
But hold on there, there is more research, keep scrolling!
Indirect competitors: The ‘little big shop’ feel
When I was reading the brief other online experiences came to mind, and I decided to look at some indirect competitors, such as The Radical Tea Towel and Faith in Nature.
Even though they weren’t housewares stores, these brands manage to keep that ‘little big shop’ spirit that my client wanted to achieve. They do that by telling their story; there are pictures of the founders, their names, how they came up with their idea and so on.
Now I was turning my Agatha Christie mode on!
Personas
Along with the brief, the client provided customer personas. I chose Amber because her goals and frustrations seemed to be represented in the brief:
‘Amber wants to support local business and avoid shopping at big retailers, and she often relies on customer services support and information before deciding what to buy.’
Based on Amber’s persona I conducted a series of interviews with similar users.
Users like 28-year-old Katie, a dancer living in London who loves baking for her friends and family for special events like birthdays.
Unlike Rebecca, who is 29 years old, a playwright also living in London, but who hates cooking. Nonetheless, she wants to buy her food containers in person because they need to be the right size. She told me: ‘I can’t tell only by pictures how big or small they might be.’
What this tells me is that different users have different ‘Jobs To Be Done’, but they are still our customers.
Information architecture: Structuring the website
We were given a list of 75 products to be included on the website. In order to define the appropriate categories to start building the e-commerce platform, I conducted a series of open and closed card sorting exercises.
Don’t worry. I’ll tell you what this is in an instant!
I gave our users the product list and asked them to organise the items into categories that made sense to them. I collected that information and decided democratically which ones would be the main categories. That is an open card sorting exercise. Once I had the result I gave it to another set of users and asked them to organise the items into those categories. Et voilà!
From the open card sorting, I identified 15 main categories. Those were narrowed down to 13 during the closed testing and post-analysis.
Finally, after all that card sorting I had a lot of information with which to create a sitemap and top and footer navigation. Now is when the magic starts to happen — turning data into forming an actual product!
I included an ‘Our Story’ section on the top navigation and an ‘Aldgate Community’ and ‘Loyalty Card’ section in the footer.
Development phase: Data shape-shifting into something real
Jumping into the development phase I created a Wireflow on paper and after testing it, I added a new step where the customer could see the number of products being filtered — the previous version had caused a bit of confusion among users. So I iterated that process to make it clearer for them.
So that I could understand the solution better, I created a user flow for Katie in order to be able to visualise her journey from logging into our e-commerce platform, to selecting her products, and finally purchasing some pink muffin cases for her niece’s birthday party.
Next steps
If I could have continued working on this project, I would’ve added some more features and development including:
- A wishlist
- Functionality for ‘email me when back in stock’ notifications
- A ‘Call Us’ button
- More testing
- A high-fidelity prototype
If I had to do it all again, I’d be sure to take my time — something that I didn’t have during the Bootcamp. I’d take more time to prepare and select the right questions to ask customers during the research and testing phase. I’d give more attention to my Sketch layers and designs — this was my first ever project translated into Sketch. And I’d be more proactive in organising the documentation.
