A high-end product means nothing if the experience doesn’t match.
We reviewed the product page of Scabal, a luxury menswear brand, to spot design issues that could hurt sales. From small font sizes to missing accessibility features, we found key UX and UI problems—and fixed them.
In this article, you’ll see what we changed and how these updates can help improve user experience, boost trust, and increase conversions.
Key UX/UI issues on Scabal’s product page
We really love the grounded and sleek look of Scabal’s product page - it really embodies the brand’s quality. To improve the page even more, we identified the following areas for improvement:
Visibility and accessibility
- Price placement: Displaying the price to the right of the product name makes it less legible.
- Colour selection labels: The available colours lack descriptive labels, which is not compliant with accessibility guidelines. Criteria 3.3.2: Labels or Instructions - Source
- Font size and contrast: The font size in the size selection dropdown is too small, and its colour contrast with the background does not meet accessibility criteria. Criteria 1.4.3: Contrast (Minimum) - Source
Proximity
- It is recommended to place linked information or actions close to each other. On this page, the size guide is under the “sizing” tab, further away from the size selection dropdown. Law of Proximity - Source
Consistency
- The “concierge” action is visible in three different places on the page but is presented differently each time (as a link, a button with a label, and an icon button). Criteria 3.2.4: Consistent Identification - Source
🧐 For e-commerce websites, the average online retailer can improve conversion by about 35% solely through better checkout design (Baymard)
🧐 66% of customers are willing to pay a premium for an excellent user experience (Eficode)
Solution design: our UX/UI improvements for Scabal’s e-commerce platform
We've evaluated the product page, identifying key UX/UI and accessibility issues. Leveraging our expertise in product design, we have strategically applied our insights to enhance the overall usability of the page.
We increased the accessibility, visibility, and consistency of the page by
✅ Moving the price below the product name to make it more readable and visible
✅ Providing descriptive labels to enhance colour selection accessibility
✅ Increasing font size and ensuring sufficient colour contrast with the background to improve overall text accessibility
✅ Placing the size guide directly below the size selection to make it more visible
✅ Using a consistent layout and placing the "concierge" action below the "add to cart" button to ensure it’s clear and visible
By tweaking the above mentioned points, Scabal’s product page becomes easier to read and use for all visitors. This, in turn, improves conversion optimisation and can lead to more sales.
🔥 Want a free UX/UI audit for your product? Let’s talk!
