Responsive E-commerce Web Application Resigning

Overview

This is a website redesigning project where I redesigned the e-commerce website named ‘Meesho’.
I chose this website because it lacks essential features and functionalities, and it exhibits inconsistencies and imperfections, ultimately leading to a poor user experience.
I have redesigned this site from an user’s perspective.

My Goals

Add features & functionalities to improve the overall user experience by prioritizing the user's needs and expectations.
Enhance the visual aesthetics of the website to create an appealing and engaging user experience.
Incorporating responsiveness to optimize the website's compatibility across various devices and screen sizes.

My Role

Redesigning the User Interface
Making the website responsive

Tool

Figma

About Redesigning

As a user, I often wished I could differentiate between the products I truly love and the products that I simply find appealing in my Wishlist. This way, when I make a purchase decision, I wouldn't have to spend a significant amount of time revaluating the same choices I had already made weeks ago and subsequently forgotten.
Also, I used to think it would be helpful to have an option where I could quickly calculate the total price for variable products.

Here are the modifications I have implemented to improve the overall appearance of the website.

Redesigned Home Page

Original Home Page

Original Footer

Redesigned Footer

Original 'Product Details' Page

Redesigned 'Product Details' Page

Adding Responsiveness

For making the website responsive, I opted for 4 different sizes to design the layout
The breakpoints I used are 1280 (for desktops), 744 (for tablets), 430 (for smartphones), 320 (smallest size for smartphone).
As most of websites nowadays have application like layout for mobiles, I created a different layout for mobile size.

1280

744

430

Sample size : 1440 × 1024 px

Sample size : 1280 × 832 px

Sample size : 744 × 1133 px

Sample size : 360 × 780 px

Challenges

Determining the styles for different call-to-action (CTA) elements.

Future Updates

Performing the functionalities in a more visually pleasing manner. For example, when user hovers over the size selections, the measurements for that size occurs, etc.

Conclusion

As a user, I encountered numerous issues and difficulties while using this website. Therefore, I redesigned it by incorporating essential functions that address these concerns.