UX Case Study: An E-commerce Website

Rashi Sindhu
7 min readJun 22, 2023

--

PROJECT OVERVIEW

It’s no secret that the fashion industry is one of the world’s most polluting industries. Lately, sustainable fashion has been gaining a lot of buzz and popularity, as global warming is on the rise and natural resources are on the decline. Sustainable fashion means the design, production and consumption of clothing in a manner that respects the planet and the people who make our clothes. Also, slowing down on following trends and increase the time of what we wear is what sustainable fashion
is all about.

“EcoChic” is a sustainable clothing brand that offers stylish and affordable eco-friendly clothing options. We are committed to reducing the negative impact of the fashion industry on the environment, while promoting ethical fashion practices and creating a community of like-minded individuals. Our clothing is designed to make you look and feel good, while also doing good for the planet.

PROBLEM STATEMENT

How to build an E-Commerce website that allows users to shop more ethical and sustainable products and increase their purchase confidence.

GOALS

1. To promote sustainable fashion practices and educate consumers about the negative impact of fast fashion on the environment.

2. To offer stylish and affordable sustainable clothing options that appeal to a wide range of consumers, including those who may not have considered sustainable fashion before.

3. To reduce the carbon footprint of the fashion industry by utilising eco-friendly materials, reducing waste, and minimising energy use in production.

4. To create a community of like-minded individuals who are passionate about sustainability, ethical fashion, and environmental responsibility.

5. To continuously innovate and improve the brand’s sustainable practices and supply chain to set a positive example for the fashion industry as a whole.

DESIGN PROCESS

Step 1: Discover

The discovery phase, also known as the scoping phase, is a process in which information is collected and analysed about the project. This helps clarify the project’s goals, limitations, and overall scope.

User Research

User research is a crucial step in UX. To fully understand the need and motivation of the users, I conducted a survey with people who had online shopping habits which helped me to know their problems and design something more useful for them.

Survey questions

Survey Insights

(i) 71.4% of the respondents generally buy their clothes online i.e direct from the brand.

(ii) 57.1% of the respondents have bought clothing items that can be considered ethical or sustainable.

(iii) Most of the respondents make their purchase from the brand H&M.

(iv) 66.7% respondents felt that the main reason behind not purchasing is the lack of outlets (basically they are not aware of the shops that sells such clothing items).

(v) For most of the respondents price, quality, design and the fact of clothes being sustainable are the most important factors while purchasing clothes.

(vi) 71.4% respondents felt hat there is a need to separate sustainable clothes from conventional clothes as they want the clothes to be visible and stand out clearly.

(vii) There is a need for more publicity and more outlets for such products. Also, most of the respondents felt that these type of clothes (sustainable) should not be too expensive than the conventional clothes.

(viii) 85.7% of the respondents are female.

(ix) 71.4% of the respondents are in the age group of 20–30.

Competitive Analysis

Step 2: Define

The second stage in a typical Design Thinking process is called the Define phase. It involves collating data from the observation stage (first stage called Empathise) to define the design problems and challenges.

User Personas

Here are two user personas that represent the potential target audience for a sustainable clothing brand:

User Persona (i)

Goals and needs

  1. Seeks a seamless and user-friendly online shopping experience with easy navigation, filtering options, and secure payment methods.
  2. Wants to find trendy and fashionable clothing that is also sustainable.
  3. Seeks transparency in the brand’s sustainability practices and materials used.

Behaviour and preferences

  1. Values sustainability and actively seeks out eco-friendly fashion options.
  2. Budgets for sustainable clothing and is willing to pay a premium for environmentally responsible brands.
  3. Has a busy lifestyle and looks for convenient, easy-to-navigate online shopping experiences.
  4. Enjoys shopping online and follows sustainable fashion influencers on social media.

User Persona (ii)

Goals and needs

  1. Looks for visually appealing and engaging website designs with high-quality product images and detailed descriptions.
  2. Values brands with limited edition and exclusive collections that align with her fashion-forward style.
  3. Appreciates personalised recommendations and offers based on her fashion preferences.
  4. Seeks a sustainable clothing brand that offers unique and trendy clothing options.

Behaviour and preferences

  1. Values sustainability and seeks to inspire others with her fashion choices.
  2. Actively follows global fashion trends and seeks out brands that offer sustainable fashion options.
  3. Prefers brands that offer limited edition and exclusive collections.
  4. Seeks social media-friendly designs and looks for brands with a strong social media presence.

User Journey Mapping

Step 3: Ideate

Ideation is a creative process where designers generate ideas in sessions (e.g., brainstorming, worst possible idea). It is the third stage in the Design Thinking process.

User Flow

Information Architecture

STYLE GUIDE

I used a colour scheme and typography that goes well with the brand and target audience and also that will provide the overall aesthetic.

For Typography: I used two fonts that are clean and legible with a neutral appearance and offers readability and versatility.

For Colours: I used the 60–30–10 rule of colour palette that could work well with the brand and target audience.

Wireframes

High-fidelity screens

PROTOTYPE

Here is the preview of my final prototype of EcoChic’s website:

Step 5: Test

Considered the final step of the design thinking process, thus step focuses on testing out the prototype.

Usability testing

I conducted remote usability testing using a high-fidelity desktop prototype. 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 3 participants. Each of them were asked to complete these following tasks:

  • From the homepage, show me how you would find a product from the “collections” category.
  • From the product page, are you able to find description and other information for the clothing item that you like.
  • How was your experience with the “customisation” process?
  • Purchase a product and show me how you will proceed with the “checkout”.

Key findings:

1) There is a need to include a clear CTA button at the checkout page that allows the users to checkout as a guest.

2) Participants really appreciated the customisation process on the website.

3) Participants would really appreciate if there was a dedicated section for “offers/sale” on the website .

4) Participants really appreciated the detailed information about the clothing item that they like.

Priority changes

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.

LEARNINGS

Although this entire process took quite some time but it was a learning experience that truly taught me a number of important skills that a UX designer needs. Most importantly, I learned that design is an iterative process that requires much time and effort. Despite the fact that I came up with the product solution, there might be ways in which I can improve user experience.

Let’s Connect : LinkedIn , Twitter

THANK YOU FOR READING!!!

Your feedback and suggestions are highly appreciated.

--

--

Rashi Sindhu

UX Designer - creating meaningful and enjoyable experiences for users.