Shein

Web redesign of an e-commerce

The project was made as part of the UX/UI Course at

Netcraft Academy, November 2020.

Shein - top

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:

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.

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.

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.

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.

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.

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.

View All