Going digital for a local homewares store in London
For this concept project, I created a mid-fidelity prototype of an e-commerce website for Welcome Home Homewares (I chose to rebrand them to “WH Homewares”), a local mom and pop shop that has been the neighborhood homeware store in Stratford, London, since 1973.
The purpose of this project was to help WH Homewares adapt to an evolving market and position them to meet consumer needs.
I leveraged the popular and successful Double Diamond Design Process to frame my design approach while exploring information architecture and navigation systems.
To kick off the discovery phase, I wanted to better understand the homewares industry and competitive landscape. Since e-commerce is one of the most saturated industries today, why not conduct some competitive analysis?
Starting with a feature analysis, I analyzed four distinct players in the industry and their respective e-commerce websites. Since WH Homewares is located in London (and unfortunately, I’ve only had the pleasure of visiting), I enlisted the help of a few local tour guides (3 fellow UXers living in London) for my research. They each recommended a different homewares store to explore: IKEA, John Lewis, and Indish. Through the feature analysis, I gained insight into industry-standard features for e-commerce websites.
Having grown up internationally, I wanted to widen the scope and consider a homeware player in another major consumer market. Therefore, I chose West Elm in the U.S. as they’re recognized for the quality of their products and service on their website.
I also conducted a quadrant analysis to gauge WH Homewares’ position in relation to those competitors. For the metrics, I wanted to highlight the qualifying values that drive WH Homewares’ business.
Based on my research, I felt that the company had the unique opportunity to serve as a leader in the local community while maintaining the quality of their products which will ultimately differentiate them from all other competitors.
To understand what customers look for in homewares stores, I enlisted the help of my fellow UXers again and we interviewed 5 individuals about their online shopping experiences.
Due to the project’s time constraints, the age distribution was a bit narrower than I would have liked (between 25–27 years old). Given a larger time frame, I’d conduct further user research with a wider audience to better inform design decisions for the next phase.
I synthesized insights from the user interviews into the following 3 categories:
Having conducted a robust discovery and research phase, it was time to synthesize the problem.
With the research foundation complete, I wanted to dig deeper into consumers’ mental models. With the time constraints in mind, I enlisted my team to help conduct card sorts, a research method in UX to help create an information architecture that suits users’ expectations by having them categorize items based on their natural understanding.
Interestingly, one of the users creatively grouped cleaning and storage products into an “Under the Sink” category. Personally, I found this an interesting and out-of-the-box catch-all for those products. However, due to the time constraints, I felt it was best to move forward with more standard categories. Given a longer time frame, I would definitely like to conduct some tree-testing to evaluate the efficacy of this category.
Taking my findings from the card sorts, I began mapping out the sitemap, a UX tool used to demonstrate the relationship between pages on a website.
The “Shop” page is where the various product categories I consolidated through my findings will sit.
At this stage, I felt it was important to focus on the site navigation, a collection of User Interface components that help users find information and functionality, thereby encouraging them to take desirable actions.
With the 6 Forms of Navigation in mind, I made sure to include a Global Navigation, Local or Secondary Navigation, Inline Navigation, Contextual Navigation, Faceted Navigation, and Supplemental Navigation.
I found this process to be quite enjoyable since it was one of the first steps to putting my ideas down on (virtual) paper and begin realizing my vision of a user-friendly e-commerce website.
Let me take you through my initial musings for navigation —
With my research insights in tow, I needed to create a Persona, a fictional representation of the target audience segment that captures a person’s motivations, frustrations, and the “essence” of who they are. Based on research, this nifty UX tool helps frame the target user, ensuring we design for the user and keep their needs at the forefront of design decisions while building empathy and humanizing them.
Without further ado, meet Axel!
Like many of us, Axel values a streamlined shopping experience and an efficient checkout process. Is that too much to ask?
With Axel’s needs and pain points in mind, I mapped out a User Flow of her Happy Path, which is the most streamlined path she can take to achieve her goal of purchasing new plates and glasses for her upcoming dinner party.
Starting with the Home Page, Axel would use the Global Navigation to select the specific sub-category she’s looking for, go through the process of identifying and selecting her products, and then begin and complete the checkout flow.
As I began the ideation and iteration process, I started off by sketching out rough wireframes to get my ideas down on paper (physical, this time).
As I jotted down ideas, I referred to WH Homewares “Must-Should-Could-Won’t” requirements to ensure that their needs were met.
The following “Must’s” stood out to me:
With a visual representation of what the website might look like, I created some low-fidelity wireframes using Sketch, from which I conducted my first round of usability tests.
In the first round, I conducted 3 usability tests, from which the following key insights were derived. In the interest of, well, keeping your interests in mind, I’ll just hone in on the major iterations below that led to the first iteration of my mid-fidelity prototype:
Since I intentionally used minimal text, I found this first stage to be particularly helpful because users experienced the website through their own mental models, rather than being directed by mine and adjusting their expectations to fit what they were told (through text on the website).
This was one of my favorite parts of the design process because I was able to test with users and dig deeper into their mental models, ultimately learning reliable feedback that I incorporated into my next iteration.
Once I iterated upon these insights, I conducted a second round of usability tests with three new users. Here are some of the key insights and iterations!
Before we get to what you really came for…
A small confession —
Although the scope of this project was only to create one iteration, I was too invested at this point and wanted to bring those insights to life. So, I went down the rabbit hole of Sketch, ultimately resulting in the mid-fidelity prototype below.
Quick recap of Axel’s scenario —
