top of page
Case Study - Retail Store Website (VESTIR)
Shopping your clothes online is a very convenient experience. But sometimes this process can become cumbersome. Will this size fit me? Is the color fine? It sure looks good on the model, but will it look good on me? These are the most common questions that come to our mind while we shop for clothes online.
In this case study, I'll go over the steps involved in creating a responsive fashion e-commerce website that makes online shopping more easy, efficient and error-free.
Duration: 7 weeks
Tools: Adobe Xd, Figma, Miro, Paper, Canva, Mural, Microsoft Whiteboard
​
My Role: User Research, Wireframing, Prototyping, Visual design, Interaction design
Introduction
After launch of many e-commerce websites, online shopping has become very popular. But after the outbreak of Covid-19 pandemic, it became more popular. Retailers saw a huge increase in the percentage of their sales.
While online shopping allows you to buy clothes with a single click, it does come with a number of drawbacks. Not only is it difficult to select the appropriate size, but there is also the risk of having to go through the return process if the item does not fit properly. No one wants to do this, especially during the times of Covid. Taking all of this into account, we require features that will assist us in finding the ideal product. With that in mind, I created Vestir, a responsive fashion e-commerce website.
With the process of design thinking, I created this website with following steps of Empathizing with user, understanding the problem, going through ideation and creating solutions, prototyping and testing the product.
Empathize
Empathize is the first phase in the Design Thinking process because it highlights the importance of human-centered design. This effectively allow us to obtain some insight into the users' feelings, behaviors, pains and needs.
-
User Interviews:
I created an interview script and conducted user interviews with participants to better understand the pain points and needs of consumers who shop for clothing online. Through this interviews, I was able to identify some of these shoppers' needs and motivations with research, which was greatly useful.
The interview script is attached here.
​
-
Number of participants: 5 (3 women, 2 men)
-
Age: 19 to 57
-
Duration: 25 to 40 mins
​
​
​
​
​
​
​
​
​
​
​
​
​
Key Findings
-
​Users need more reliable and accurate size chart because of different body types and sizes.
-
Users need easy to navigate websites.
-
Users need the products should be propely categorized.
-
Users need specific filtering and smart search features.
-
Users feel that the customer reviews and photos are helpful. They also need that the reviews should include size and quality of product.
-
Users feel that knowing the quality of cloth, type of fabric is important.
-
Many users need images of models of different body types and sizes.
-
Most of the users find online shopping more convenient than market/store shopping. They also like that there are more number of choices.
-
Most of the users prefer websites over app for shopping.
-
Competitive Audit:
After I gained a better understanding of the users' thoughts and feelings, I conducted research on some of the direct and indirect competitors. During my study, I listed down some of each website's major strengths and weaknesses. This makes it easier to identify the most often requested features for fashion e-commerce websites.
For better readability, the audit can be accessed here.
Define
I was able to acquire a lot of relevant data after all of the research in the "Empathize" phase. Our next step is to define the process. I was able to figure out what will be made, for whom, and how using the data from the user interviews and competitive analysis. We will move on to with User Persona, Empathy Map and Project goals.
-
User Persona:
I decided to concentrate on constructing a user persona after receiving all of the qualitative data from the research process to help me identify with the users on a personal level. This persona reflects pain points and needs of users. It represents the composite of research findings.
-
Empathy Map:
I made an empathy map to learn more about the persona's behaviours, attitudes, and ideas. This allowed me to bring the persona to life and investigate the challenges from the user's point of view.
As a result, I was able to empathise with the user and discover patterns and critical insights about their daily experiences in relation to their purchasing decisions.
-
Project goals:
After all the research, I was able to collect a lot of useful information. I wanted to seek insight into what the user needs were as well as what maybe the needs of stakeholders. I then moved on into understanding different perspectives. I mapped the overlaps of business goals, user goals, and technical considerations. Finally, created this venn diagram for better overview of our goals.
-
Problem Statement:
After we defined our problem and it's goal, now we are able to frame our problem statement to proceed further with the design process.
"Creating a fashion e-commerce website for online shoppers to make their experience more convenient and hassle-free"
Ideate
This step of the Design Thinking process is all about being creative and coming up with new ideas. I was able to ideate using the findings from the previous steps. I created a set of deliverables to assist in the identification and visualisation of a solution.
-
Sitemap:
We have created a hierarchical representation of our website to show the basic structure of the components. The sitemap helped us in showing that how pages are prioritized, linked, and labeled. It organizes our design and thoughts.
For better readability, the sitemap can be accessed here.
-
User Flow:
Before starting the design phase, I ideated the the flow of user. This essentially depicts the numerous ways in which a user can execute a task. Creating this flow helped me to think from the perspective of the user and explore the various alternative paths available to them while using the website.
For better readability, the User flow diagram can be accessed here.
-
Crazy 8's:
Crazy 8's activity challenges us to sketch some eight ideas in limited time. So in this fun activity, I designed 8 creative idea that i would like to add in my website.
The eight ideas which I designed are:
-
Different pictures with different angles should be available
-
Various colors for a product
-
Filters with various categories
-
Ratings and reviews of customers
-
Option of adding to wishilist and saving later
-
Easily understandable size chart
-
Row of customized recommendations
-
Product to be found under different categories
-
Sketching:
Once the sitemap, user flow and crazy 8's were completed, I proceeded with sketching some pages of the website. From our research, we noted that most of the users like to use websites for better view and details, so I have focused on website desigining. Here, I have added sketches of Homepage, category page and product details page.
-
Wireframes:
After sketching a few pages, I took the next step and created a few wireframes based on product requirements. The goal was to focus on the buying process, from where the user arrives to the homepage to find a product they would like to purchase all the way to the checkout. I did wireframing of some main pages and also a responsive design of home screen which means i have created a mobile version wireframe of the home screen.
For better readability, the wireframes can be accessed here.
-
Logo Design:
I wanted to create a simple and clean logo for my website. Vestir is a spanish word which simply means to wear, to dress up. So just like the meaning, i tried to keep simple logo design. I looked at a lot of options, but ultimately decided that going the simple way of choosing a modern and contemporary typeface would better reflect our audience.
-
Style guide
Before starting the prototype, I chose some of the important components for my website. Some elements i kept adding as the design proceeds. I decided to go with a brand color that uses black and white theme, with shades of images colors. There will be one secondary colors that could be used around the site for accents purposes but not as the main color. Most of the transition will be between black and white.
Prototype
After low fidelity prototype, I proceeded with High -fidelity prototype. Hi-fi prototypes are very close representation of what our original product will look like.This is a clickable prototype so that the users can test it out.
For better readability, the below image of high fidelity prototype frames can be accessed here.
The workable prototype for users can be accessed here.
Usability Testing
I conducted remote usability testing using the 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 19 and 57. Each of the participants were asked to complete the following tasks:
Tasks
-
Task-1 : From the homepage, show me how you would find Women’s Tops.
-
Task-2 : Find a blue linen blouse, check out the details, select size and add it to Shopping Bag.
-
Task-3 : Buy a product using sign in checkout option (not guest checkout).
-
Task-4 : Reach to the end page. The order should be confirmed.
_gif.gif)
Key points from the feedback received by the users
-
5/5 the participants successfully navigated through the website from start to end.
-
5/5 participants completed all the four tasks.
-
4/5 participants choose the megamenu for navigation to explore.
-
5/5 participants liked the subtle black and white theme of the website. Also they liked the hover effect on the buttons.
​
-
2/5 participants got confused in "Add to bag" and "Go to bag" buttons because of no visible transition. Changes are made in the revision design.
-
2/5 participants felt that the website was more inclined to women clothing.
-
Previously "XXL" size was not added into the size menu. Participants pointed out this. Later changes are made for the same.
-
1/5 particpant felt the lack of colors in the later pages of the website.
-
Priority revisions:
After completing the usability testing, I went back and made revisions to the feedbacks which participants shared.
In the previous design, the "Go to Bag" button was at the same place at "Add to Bag". Some participants got stucked as they did not realise the button changed because of no proper transition. So in revised design, I changed the "Go to Bag" option in the form of a pop up from shopping bag. The transition is clearly visible now.
Before
After
Also added XXL size in the size option.
Before
After
Added the filter boxes above the clothing catalogue.
Learnings and Next steps
I’ve learned the importance of the UX design process from beginning to end. From completing user research, wireframing, prototyping, visual design, user interface design, and iteration to implementation. I was able to define, ideate, prototype, and test by applying the Design Thinking methodology. I was able to comprehend how each phase may be used to aid in the development of the final product.
In addition, I discovered how crucial it is to understand the user. It not only helps me understand the user's requirements and problems better, but it also enables me to approach the problem from the a human-centered perspective.
Also, more importantly, I discovered that design is an iterative process which requires much effort. Even though our product is completed, we can continue improving it with new ideas and insights.
The one thing which I could have done much better is the usability testing part. There should have been a small testing session after low-fi prototype. Also, in the final testing round, the number of participants should have been more. It would have been helped me more if there were more number of feedbacks and insights.
Next steps
I can conduct another usability test once the priority changes have been made to determine whether the fixes have addressed the problems that the users had previously raised. I'd like to refine my iterations and create additional pages till I have a complete web design.
Conclusion
Even though it was my first time working on Adobe Xd creating a website, and the entire process took quite a while, it was a learning experience that really taught me a number of crucial skills that a UX Designer needs. I feel more confident and capable of taking on new assignments after acquiring new knowledge and skills.
bottom of page