Cluttered profile screen

The profile screen is excessively cluttered, featuring unnecessary options such as “Friends” and “Play Game”. Additionally, there is wasted negative space on the right, and the option to edit the profile is missing.

Solution :

Fixed all those issues. Added new flows like My measurements & Mirraw wallet. Moreover, the new design ensures scalability, accommodating any future profile elements seamlessly. Even if business add any profile element in future, design will be scalable.

Product description screen

This is one of the most important screens in eCommerce platforms. Spacings and alignments are not proper. It has 4 images left to hero image. If user wants to see another image, they have to click on that image ~5 unwanted clicks. Users were unable to zoom images, In a luxury ecommerce store like Mirraw it’s very important. Because users have to check pattern and design work. 

Solution :

• In the new design, I’ve put all the images upfront. When users hover over an image, they can see a bigger version.
• In the old version, details were hidden behind tabs, leading to extra clicks. In the new design, I’ve positioned all text prominently. There was a lot of text in this screen. So, I’ve added icons for easier understanding.
• I’ve created a sense of urgency for users by using a thunder icon on fast-selling items and showing the number of items left.
• I’ve displayed discounts, applied offers, and additional deals for users. This makes them feel like they’re getting a good deal and encourages them to add items to their cart. After all, good UX design is about understanding how people think and behave.

Catalog screen & Issue with white background

• Catalog page is the key screen in any ecommerce site to attract users buying the product. In Desktop version, filter section plays a pivotal for filtering the products which matches users needs. The issue in this screen is Users are not noticing the filter section (based on data obtained from analytics).
• As it is a luxury site, users already have a defined set of taste. Users directly search for top designers and they purchase items.
• Insight that I got from usability testing of old website is, users want to add items to cart from the catalog page itself.
• Some of the brands provide images with white BG, If we place 6 of those images in a single screen, it’s resulting in increasing of the white space and looking bit odd.

Solution :

• I’ve defined the background color as #F0F2F9. This solves the issue of the white background behind the images. Additionally, it helps distinguish the filter panel from the rest of the products in the catalog section. I’ve designed the filter section to be easily noticeable.
• As discussed earlier, issue with the filters panel is also fixed with this background color.
• Regarding the images, I’ve emphasized them more so that users can see every detail clearly. Therefore, I’ve changed the layout from a 4-column to a 3-column format. Additionally, I’ve provided a “Quick View” option, allowing users to add items to their cart without visiting the description page. This feature benefits users who prefer adding multiple items to their cart at once.
• If users wish to view all the details of an item, they can click on “VIEW ALL DETAILS,” which will redirect them to the Product Details Page (PDP).

Empty screens and popups

I’ve created mood boards for illustrations and showed it to users. For illustrations, I’ve picked a set of 3D, Flat and water colored illustrations. Almost all users opted for water colored illustrations, as that is more pleasing. I’ve specifically picked out elephant illustrations, Because Mirraw logo consists of elephant.