A product page is one of the most important parts of e-commerce. It informs users and can determine whether the user will buy the item or not.
But it’s not just that. It’s so much more.
Did you know, that a good UX in a product page can reduce the number of returns and therefore save A LOT of money for the company? How about the opportunity to increase the amount spent by showing the right things in the right way on a product page?
Intrigued?
As always, I’ll still remind you what any good UX designer knows - designing without research data is like designing with a blindfold on. Give me access to the related data and I’ll tell you where the business opportunities are, and how to make your users happier. Even the return forms or customer reviews after shopping can give valuable insights (for example - what could be improved from the UX standpoint in product pages. Maybe the material was not as good as expected. How can we reduce this gap between expectations and actual product which increases the returns? Maybe we lack close-up pictures or different catwalk videos that could solve this. Maybe the size was off? How can we assist customers in choosing the right one from now on? Maybe the size tables are not efficient or maybe the sizes assistant feature is needed?). All kinds of data can give all kinds of value if you have a specialist who knows how to get the most out of what is available, as well as find the best ways to get the missing information.
I’ll share some tips here as well. But to dig deeper to bring that value (which is what really differentiates a good UX designer from a great one) you need that data. And I can help you with all of that.
Let’s start with the obvious ones:
Some of the touch targets are too small. And no, the touch targets, in this case, are not bigger than visible buttons for going back (arrow at the top), adding to favorites (heart icon), or sharing. I checked.
Users shouldn’t tap the “ADD TO BAG” button just to find out whether the needed size is available. If it’s not - the user should see that instantly and don’t waste any time on an unavailable item. Let that time be well spent looking for an actual ready-to-be-bought item. Better for users and for business.
The contrast of the accent color used in the website is not accessible and does not pass WCAG requirements (3.54 : 1 contrast of the darkest pink color used). Also, the color representation of the item is off here and for some reason, only this color has some effects on it (not because it’s selected - I checked). Also, it would be better for accessibility if the selected color would be named not just in the headline of the item.
Product details: the information should be systemized in a way that is easy to scan through, and contain only what’s needed. Also, prioritized from the most important to the least important.
Size guide: nowadays there are a lot more advanced ways to assist the buyer in choosing the right size than just to adding a general sizes table. And as we know, the wrong size is a common reason for returns, so it’s worth helping users as much as possible to choose the right size. But if you still want to go with a general sizes table, the least you can do to make it better is:
The “Fabric and care” section is close to useless since it clearly lacks care instructions. And that can increase returns as well. If a user orders an item and only after receiving it finds out that it can only be dry-cleaned or can’t be ironed, it can lead to a return, disappointment, and a bad review. All that easily avoidable.
One of the goals of a good product page is to provide all the needed information to the user in the most convenient way. But that’s not all. Now to the part of increasing profit per visit:
Why there is no section “Similar products” or “Recommended for you”? There is a reason why sections like these are so popular among successful e-commerce sites.
The only item recommendations are 4 (only 4!) to complete the look. What about similar products if this one is close to what the user is looking for, but not quite that?
Related recommendations are a huge opportunity for the business. And the more accurate they are - the bigger chance that the user will buy. Show not just any recommendations, show recommendations that correspond to the applied filters in the search, that are in stock and therefore can be bought right away (seems obvious, but often that’s not the case). This kind of item can grab the attention of the user and lead to a bigger amount spent. Also, there is not much scrolling, so there is no need to hide the recently viewed items either. You have the screen space for it - use it!
The icons that had too small touch targets have been fixed by slightly adjusting their sizes and layout. Now there is enough room around them to make the touch targets big enough while not visually overcrowding the design.
The sizes and their availability are now visible instantly on a product page without the need for the user to spend time on an item and then tap the “Add to bag” button just to find out that the needed size is out of stock.
The accent color accessibility is fixed without hurting the brand (the contrast now is 4.5 : 1 and passes the WCAG standard). The color option of the item is fixed. I also made the size of the color options smaller while still keeping enough room for proper touch targets. This saves screen space and makes the visual design more pleasing. I also added the written value of the selected color next to the color selection to increase accessibility.
The information is systemized in a way that is easy to scan through and contains only what’s needed.
You can find a great example of a really nice size guide on an ASOS website. It’s hands down one of the best ones I’ve ever seen. Something similar would definitely work here as well.
A few simple changes can make the “Fabric and care” section way more informative. Also, to reduce the returns due to the material and quality, the product pictures should include close-ups, and the “Catwalk” videos can never hurt either.
I changed the layout of the “Shop the look” and “Recently viewed” sections, and also added the “Recommended” section. This layout is not just familiar to the users but also lets users see more items without additional effort. Also, this layout is suitable to show a lot of additional items for the users who are looking through them. I also polished the details in the layout to make it less chaotic - discounts now don’t affect the favorites icon placement and the text below the picture placement, everything looks more uniform, modern, and minimalistic. Increased contrast accessibility is used here as well.
The important thing in order to increase the profit per visit is to show accurate recommendations. This means that the items shown have to correspond to applied filters and previous searches, as well as be in stock (available for an instant purchase).
