How I designed a home appliances e-commerce website- a UX case s

Mouad Ziroudi

UX Researcher
UX Designer
Product Designer

In this case study, I am going to discuss the process of designing a responsive home appliances e-commerce website that allows online shoppers to have a more efficient and smooth experience.

Introduction

With the outbreak of COVID-19 that forced all of us to stay inside, many turned to online shopping as a way to spend time. Because of this, online retailers saw a dramatic increase in revenue during the pandemic. In fact, the home appliances e-commerce industry accounted for approximately 21% of the sales in Morocco in 2020.
Although online shopping makes it possible to purchase products with just a click of a button, it does entail numerous problems. Not only is it difficult to choose the product in the correct size, but there is also the possibility of going through the return process if the product does not fit properly. No one really enjoys this, especially during a time in which it is recommended that we take extra precautions about going outside. Taking all of these into consideration, we are in need of features that will help us find the perfect fit. With that being said, I designed a responsive home appliances e-commerce website called Home System Solutions.
In order to develop this particular product, I chose to use the Design Thinking approach to guide me through the process. By following the steps, I was able to research thoroughly about the home appliances e-commerce industry before I proceeded to analyze the problem and ultimately come up with a product solution.

Step 1: Empathize

Because Design Thinking emphasizes the importance of human-centered design, the first step of the process is to empathize. This essentially gave me the opportunity to gain some insight into the thoughts, feelings, and needs of the users.

User Interviews

I conducted interviews with users who are familiar with online shopping to identify their needs and pain points. Because a wide range of demographics enjoys online shopping, I interviewed a total of four participants between the ages of 24 and 50+. Their professions varied from homemaker to engineer.
The interview guide that was prepared in advance can be accessed Here
The detailed report of the interviews can be accessed Here
Summary of findings from the user interviews:
Two out of four participants discussed the need for more reliable size guides due to different houses
Three out of four participants expressed their frustration over the fact that the product might not fit them as well as they do in thier kitchen
Three out of four participants noted that customer reviews of the products are helpful
Three out of four participants stated the importance of knowing the quality of the product
All of the participants discussed the need for some kind of filter when shopping online
Two out of four participants were motivated to find and buy clothes in a timely manner
Three out of four participants were motivated to shop online because of its convenience and wide range of selection
All of the participants preferred to use a laptop over a phone or tablet to shop online

Competitive Analysis

Once I was able to get a better understanding of the thoughts and feelings of the users, I proceeded to conduct research on some of the direct and indirect competitors. During the research, I wrote down some of the major strengths and weaknesses of each of the websites. Doing so made it easier to figure out the commonly sought-after features for home appliances e-commerce websites.

Step 2: Define

The next step in the process is to define. With the research conducted thus far and the findings from the user interviews, I was able to figure out what will be created, for whom, and how.

User Persona, Empathy Map, and Project Goals

Based on the insight provided the participants during the user interviews, I created a persona that reflects various needs and pain points.
In order to delve further into behaviors, attitudes, and thoughts of the persona, I created an empathy map. This helped me bring the persona to life and examine the problems more carefully from the user’s perspective.
Once I had my user persona and empathy map ready, I took a step back to get a clear overview of both the business goals and the user goals. In addition to those goals, I wrote down the technical considerations as well.

Problem Statement

After the goals have been identified, I came up with a problem statement that I could refer back to as I proceed with the design process.
How might we design a home appliances e-commerce website for those who shop online so that they can have a more efficient and fluid experience?

Step 3: Ideate

This stage of the Design Thinking process focuses on taking a creative approach and generating ideas. With the findings that I synthesized from the previous steps and the problem statement that I made earlier, I was able to think outside the box. I created a number of deliverables that could help me identify and visualize a solution.

Task Flow

With the problem statement in mind, I developed a task flow to show the ideal flow that the user would take to complete a task on HSS’s website. In this particular case, it focused on finding and purchasing a product from the website. Working on this helped me identify the key screens for my design.

User Flow

Once I completed the task flow, I then proceeded to create a detailed user flow. This essentially illustrates the various paths that the user can take to complete a task. Creating this flow allowed me to think from the user’s perspective and consider the different options that the user has while using HSS’s website.

Card Sorting

In order to see how users like to organize content and determine the information architecture of the website, I used open card sorting with the same four participants from the user interviews. I prepared a total of 20 cards and asked them to sort them as they see fit.
Step 4: Prototype
Prototyping is a crucial phase in the design process, allowing designers to create low-fidelity representations of the product to explore ideas and test solutions.
Wireframes
I started by sketching wireframes to visualize the basic structure and layout of the website. This helped in identifying the placement of elements and the overall flow of the user interface.
Interactive Prototypes
Next, I created interactive prototypes using Figma. This allowed stakeholders and users to interact with the design, providing a more realistic experience of how the final product would function.
Step 5: Test
Testing is where the design meets the users. It's a critical step to validate the design decisions and uncover any usability issues.
Usability Testing
I conducted usability tests with real users, observing them as they interacted with the prototype. This helped in identifying areas where users struggled or were confused, leading to valuable insights and improvements.
Feedback and Iteration
Based on the feedback from usability testing, I iterated on the design, making necessary adjustments to enhance the user experience. This iterative process ensured that the design was aligned with user needs and expectations.
Conclusion
Designing Home System Solutions, a responsive home appliances e-commerce website, was a journey filled with learning and discovery. By employing the Design Thinking approach, I was able to deeply understand the users' needs, pain points, and preferences.
The process allowed me to create a user-centric design that not only solves the problems identified but also provides a smooth and efficient shopping experience. From conducting user interviews to prototyping and testing, each step contributed to a well-rounded and thoughtful design solution.
The success of this project lies in the collaboration between research, design, and continuous feedback from users. It's a testament to the power of empathy, creativity, and iterative design in creating products that resonate with users and fulfill their needs.
By reflecting on this process, I recognize the importance of a methodical and empathetic approach to design. It's not just about creating visually appealing interfaces; it's about solving real problems and making a positive impact on users' lives.
Partner With Mouad
View Services

More Projects by Mouad