In this case study, I am going to discuss 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.
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
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:
