Categories
Case Studies

How I designed a fashion e-commerce website- a UX case study

View the original post

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

Am I choosing the right size for this top? Would it be too small? Too big? It looks good on the model, but would it also look like that on me? These are some of the thoughts that crossed my mind as I looked for some new tops for the season. In spite of that, I chose a size that seemed about right and kept my fingers crossed. After several days went by, my package finally arrived. Excitedly, I tried on the top. To my disappointment, it was too small.

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 fashion retailers saw a dramatic increase in revenue during the pandemic. In fact, the fashion e-commerce industry accounted for approximately 29.5% of the sales in the United States in 2020.

Although online shopping makes it possible to purchase clothes 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 fashion e-commerce website called Mirror.

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 fashion 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 18 and 50. Their professions varied from student, engineer, to homemaker.

The interview guide that was prepared in advanced 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 body shapes
  • Three out of four participants expressed their frustration over the fact that the product might not fit them as well as they do on the model
  • 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 filters 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 phone or tablet to shop online

Some of the participants noted during the interviews,

“I often look at the reviews to see whether the quality is good. I also see whether sizes are accurate.”

“Sometimes, it looks good on the model, but that might not be the case for me.”

“I want more than one image of the product to get a better idea of what the product looks like.”

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 fashion e-commerce websites.

A detailed report on the competitive analysis can be found here.

Competitive Analysis

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.

User Persona

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.

Empathy Map

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.

Project Goals

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 fashion e-commerce website for those who shop online so that they can have a more efficient and error-free 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 Mirror’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.

Task Flow

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 Mirror’s website.

User Flow

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.

A detailed analysis of the findings can be found here.

Summary of findings from card sorting:

  • Three out of four participants categorized the items by clothing types
  • One out of four participants categorized them by style/occasion
Similarity Matrix for Card Sorting

Information Architecture

By incorporating the findings from the card sorting, I was able to group the different fashion items into certain categories and planned the layout of the website accordingly.

Information Architecture

Sketches and Wireframes

Once the information architecture was ready, I made some sketches of Mirror’s Homepage to get an idea of what it would look like. Because all of the participants from the user interviews mentioned that they prefer to use their computers when they shop online, I decided to focus on developing the screens for the desktop version.

Sketches

With my sketches by my side, I began to develop several mid-fidelity wireframes on Figma. These wireframes included the Homepage, Category Page, Product Details Page, and Checkout Pages.

Mid-Fidelity Wireframes

Mood Board

Because I wanted to design a website that is simple yet modern, I created a mood board that reflects those ideas.

Mood Board

UI Kit

With the inspiration that I was able to get from the mood board, I then went on to create a logo that is simple as well. Afterwards, I developed a UI Kit that aligned with the aesthetics and brand identity that I was aiming for.

UI Kit

Step 4: Prototype

The next step in the process is to make a clickable prototype so that the users can test it out. Following this step allowed me to gather feedback regarding the product and try to figure out the best possible solution for the problem.

The workable prototype can be accessed here.

Step 5: Test

Considered the final step in the Design Thinking process, this step focuses on testing out the prototype. It is also an iterative process that gives me the opportunity the evaluate whether my design solves the problem and redesign any parts of the product if needed.

Usability Testing

I conducted remote usability testing using a high-fidelity desktop prototype. It was conducted to test the flow of design, ease of navigation, and the extent to which the design accurately reflects the brand’s values. The test was also used to see whether the design solves the user’s needs and pain points that were captured during the research phase.

The test was conducted with a total of five participants between the ages of 18 and 50. Each of the participants were asked to complete the following tasks:

  • From the homepage, show me how you would find Women’s Tops in size “Small”
  • Find a product called “Neutral Tank Top” and add it to Shopping Bag
  • Purchase a product using Guest Checkout

The usability testing plan can be accessed here.

The detailed report of the findings from usability testing can be found here.

Here are the key points from the feedback received:

  • Participants thought that the website could be inclusive by offering more size options
  • There is a need to include an icon that allows the user to view more products at once on the Category Page
  • Participants wanted to see all the applied filters and have the ability to clear them on the Category Page
  • Participants expressed the need to change the input field for Quantity on the Product Details Page to ‘1’ since it is assumed that the user would purchase one product
  • On the Shopping Bag Page, participants noted that Quantity should include an icon to make it easier to edit

Priority Revisions

With the feedback provided during usability testing, I was ready to make the changes to some of my designs.

Usability Testing Feedback Changes

Final Product

After going through all the steps of Design Thinking, I now have a website for Mirror that can be used.

You can view all of the high-fidelity screens here.

High-Fidelity Screens

Revisiting the Problem Statement

How might we design a fashion e-commerce website for those who shop online so that they can have a more efficient and error-free experience?

The problem was solved by:

  • Including numerous images/videos of the product that allow the user to closely examine the quality of the product
  • Providing a size guide, specific product details, and information regarding the model to allow the user to determine the sizes more accurately
  • Implementing filters that enable the user to refine searches easily

Next Steps

With the priority changes that were made, I can conduct another usability test to see whether the revisions have solved the issues that were previously brought up by the users. If needed, I would have to do another round of iteration and testing. Once these steps are complete, I can hand off the project to the developers.

Learnings

  • By incorporating the Design Thinking approach, I was able to empathize, define, ideate, prototype, and test. Through this particular process, I was able to understand the ways in which each of the steps could be used to help develop the final product.
  • During this project, I found the user interviews to be quite helpful as they provided insight that I originally did not think of. Doing so taught me the importance of removing bias as I conduct research.
  • In addition to that, I learned the importance of empathizing with the user. Not only does it allow me to better understand the needs and pain points of the user, but it also enables me to address the problem in a human-centered manner.
  • Most importantly, I learned that design is an iterative process that requires much time and effort. Despite the fact that I came up with a product solution, there might be ways in which I can improve user experience with technological advancement over time.

Conclusion

Although this entire process took quite some time as it was my first time working on a UX project, it was a learning experience that truly taught me a number of important skills that a UX Designer needs. With my newly attained knowledge and skills, I feel more confident in my ability to tackle new projects.

Check out my other case studies on Medium:


How I designed a fashion e-commerce website- a UX case study was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.