Navigations links
Click here to go back to my Portfolio Homepage.
Click here to go back to this Case study homepage
<aside>
Click on the links below to read case study ⬇
Product Page
Cart Page
Checkout page
Homepage
Navigation
<aside>
Listing page
</aside>
</aside>
<aside>
Cross-device Observation (05)
</aside>
Cross-device Observation (all devices)(05)
<aside>
1. Easy to miss
Area:- Sale text inside the product card
Observation:- The "Sale" text is placed at the bottom of the product listing, blending in with other details and making it easy to miss.
Screenshot:-

Why it may affect users-
- Users focus first on the product images and the top area, bottom texts can be overlooked.
- Missed visibility reduces urgency and excitement for discounted items.
My Recommendation:-
- Replace the "Sale" text into a badge and place it on the top-left or top-right corner of the product image.
- Use a bold, contrasting color (e.g., red/orange) to catch attention.
- Ensure the badge is consistent in size and placement across all products.
Expected Results:-
- It boosts visibility and click-through rates for discounted products.
- Builds urgency and attracts bargain-focused shoppers.
</aside>
<aside>
2. Highlight the best
Area:- Ratings
Observation:- Products with significantly higher reviews (e.g- 600+) don’t stand out visually when compared to products with fewer reviews (e.g- 30, 50, 100).
Screenshot:-

Why it may affect users:-
- Users compare products with those around them. 600+ reviews stand out when others have only 30–100, so not emphasizing it visually can hurt sales.
- Users don’t immediately recognize which products are most trusted or popular.
- Potential sales are lost because users can’t quickly identify the best option
My Recommendation:-
- Introduce a “Bestseller” badge for products with higher reviews.
- Place the badge at the top-left or top-right corner (opposite the sale badge, if both apply).
- Use a color and design that implies trust (e.g., gold or green) to separate it from the sale badge.
Expected Results:- Instantly signals social proof, making the product more approachable and trustworthy.
</aside>
<aside>
3. Why users do the math
Area:- Pricing
Observation:- The product in sale shows the original and discounted price, but does not display the discount amount or percentage saved.
Screenshot:-

Why it may affect users:-
- Users are not clearly shown how much they’re saving, which can weak the perceived value of the deal.
- Most users don’t take time and effort to calculate the discount and this leads to lower urgency and impulse to purchase.
My Recommendation:-
- Display the discount amount or percentage saved next to the final price.
Examples:-
- “You save ₹700”
- “47% OFF”
- To make it more actionable add a time-based urgency element like “Offer ends in 2 days” or “Limited stock at this price.”
Expected Results:- It encourage faster decision-making and purchases.
</aside>
<aside>
4. Colors are not functional
Area:- Color swatches
Observation:- The color swatches on the listing page are not functional.
Screenshot:-

Why it may affect users:-
- Clicking on color swatches takes the user to the product page instead of changing the product image directly here on the listing page.
- It forces unnecessary back-and-forth between the listing page and product page just to see different colors.
- Each page load adds time and effort, leading to frustration drop-offs.
- It can breaks the flow of product discovery as users cannot quickly explore options.
My Recommendation:-
- Make the color swatches interactive or functional so the product image updates directly on the listing page when a swatch is clicked in Mobile and hovered on Desktop.
- Ensure the product image and color swatches are visible in the same fold so users can instantly see the change without scrolling.
Expected Results:-
- It reduces user friction and keeps them in the flow of product exploration.
- It can increase click-through and conversions since users can find their preferred color faster.
</aside>
<aside>
</aside>