Web redesign of an e-commerce
The project was made as part of the UX/UI Course at
Netcraft Academy, November 2020.
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:
General feel and style
These are some of the findings that were positive to me:
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.
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.
In my redesign of "Shein," I implemented some of the positive findings that I just mentioned:
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.
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.