Shein
Web redesign of an e-commerce
The project was made as part of the UX/UI Course at
Netcraft Academy, November 2020.

Goal
In this project, my task was to redesign an existing e-commerce site down to its product page.
​
The site that I chose was "Shein," an international fashion brand. My challenge in this project was to present a sequence of actions for purchase down to the requested product page.
To meet the challenge, I compared the "Shein" site to three other
e-commerce sites: "Club Factory," "Romwe" and "Asos."
All those sites are similar to each other in their content and I've examined them from 3 different aspects:
​
-
Personalization
-
Products displaying
-
General feel and style
​
​
Research
Preliminary
These are some of the findings that were positive to me:
Personalization
-
The Separation between women and men in terms of products displaying.
-
Using the customer's private name while hovering on the user icon (for those who registered).
-
Personal suggestions throughout the process. For example: "You may also like," "Recently viewed," etc.
-
Friendly language like "Hi Yafit," "Welcome back," "No worries - you'll find them in your saved items," etc.
-
Displays products tailored to the country you are coming from
-
Displaying four products in a row allows you to see the products clearly enough.
-
Using the "Load more" button - helps the users to explore more products.
-
Indication of how many items I saw and how many remained.
-
Indication of how many pages I saw and how many remained.
-
Using high-quality images.
-
Adding a video of the product.
Products displaying
General feel and style
-
Refined and aesthetic style.
-
Feeling of order and easy orientation on the site.
-
A sense of consistency and stability throughout the stay at the site.
-
A feeling that there was a thought about how to create a good user experience for me.
Prototype

In my redesign of "Shein," I implemented some of the positive findings that I just mentioned:
Web redesign


Decisions
There are quite a few decisions to be made in building
an e-commerce site, these are some of the decisions I've taken:
.jpg)
1
Reducing the category options in the secondary bar navigator.
I thought that 5 categories were adequate to provide users a good overview of the site and quick access to all the different types of items.

2
Using a megabar with a vertical list of the main categories on the left side and utilizing the horizontal part to display another division of the categories - by rooms, with images.
​
I wanted to make the megabar more visual and clear.


3
Using the "Load more" button.
I've learned that the "Load more" button is better than "Pagination" because it is faster to use and allows the users to explore more products.


4
Using a horizontal filtering bar.
​
I decided that the horizontal filtering bar was better than the left-sided one regarding convenience and efficiency (although the left-sidebar is the predictable location).
Also, it allows the user to keep his attention in one place and gives more space for the item images.



5
Using a drop-down for size and frame selection.
​
I've learned that a drop-down is a good choice when I have between 5-10 options. It is comfortable and keeps the visual side as clean as possible.

6
Opening a pop-up window with the option to check out after clicking the "Add to bag" button.
​
I've learned that fewer clicks to check out leads to more conversions.

Visual language
Fonts
Colors
#282828
#fe7773
#fd7998
#febccb
Buttons
Fields
&
Icons
Conclusions
I was interested in getting into the world of e-commerce and exploring it from a UX perspective.
​
I considered if limiting the secondary bar navigator to 5 categories, making it harder for visitors to discover the full range of products on the site.
​
In retrospect, I could display more items on the products page. I've learned that the users can deal with a higher number of items when the list contains more visual products (apparel, furniture, decor, etc.) as on the "Shein" site.