UI Renovations Part 5: Closet Core Patterns

UI Renovations is a series of case studies on UI and accessibility improvements, from real-world examples found across the web.

Closet Core Patterns is a site that sells clothing patterns and sewing supplies. Like other clothing and fabric retailers, many items the site offers come in a variety of colors. In this UI Renovation, the product page with variants will be investigated and renovated.

This product page is for a kit of metal buttons that comes in several colors. While overall the page is well-designed, it has room for a few key improvements to optimize users’ interactions when selecting a supplies kit.

Closet Core Patterns product page before renovations.

Product Variant Selection

The main improvement on this product page has to do with the exploration of variants. Some variants appear similar in the photographs, and users can’t be 100% certain of which product they’re buying without guesswork. Variant selection is ambiguous because there is no interaction to tie together the color selection elements with the image displayed, and there are no identifiers on the variant images themselves.

Interacting with the variant selector causes no change to which main product image is displayed.

This uncertainty can be eliminated via two corrective measures. Placing a label of the variant type within the variant image ties the photograph inextricably with the variant data. Labels can be added HTML elements or can be incorporated directly into photos.

Additionally, interactivity should be added to the variant selector as users click different variants. Add scrolling behavior to display the main product photo in the carousel that matches the variant when users click on a different variant button.

Combining an identifying label with dynamic main product photos (based on variant selection) gives users 100% confidence in which variant they are purchasing.

Variant Image Discovery

While all variant images are shown on the product page, the gallery of variant images is entirely below the fold and requires user to scroll up and down when viewing variants and then the expanded product image.

There are carousel controls on the main product image, but they are not easily used with a keyboard. This is because while they are focusable with a keyboard, there is no focus halo around the carousel controls or other input elements when tabbing to them, leaving users in the dark when trying to interact with them.

Content viewable in an example viewport is highlighted above, and non-visible content from the main product listing contents are shown in gray. Carousel controls are in light gray on the main photo.

Other than by adding focus outlines to the arrow scroll elements (which should never be removed in the first place), we can improve usability of the variant images by moving them above the fold. Placing the variants gallery to the left of the main product image provides visibility and improves users’ ability to interact with them.

New location for the variant images, adjacent to the main product image.

An added benefit of adjusting the placement of the variant images above the fold, and thus decreasing the width of the main image, is that a greater percentage of the main product image is visible above the fold. The increase, shown below, is about 10% on my monitor while using Chrome. Users can now see more of the product with zero interaction required.

Comparison of percent total image visible above the fold before (top) and after renovations (below). More of the product photo is visible without scrolling after the re-design.

Product Details Organization

Turning from product images to product data, examine the product details and the placement of the product price. The relationship between the price element and the other product details can be optimized.

Product data, configuration details, and add to cart button.

The existing layout of product details forms a sort of table, with the horizontal yellow stroke forming the top and the large “Add to Cart” button forming the bottom. Roughly two columns are formed by the labels for color and quantity and the variant picker and quantity picker.

Although the price element is positioned similarly to these labels, it is out of place floating around in this layout, because it isn’t a label and requires no corresponding second column.

The table-like formation created by the structure of the product pricing, variant, and quantity elements. The pricing element appears out of place as a singular element, lacking a corresponding secondary element, as indicated with a red arrow above.

The yellow line element is a good visual separator between product details and configuration options, so it should be maintained. Below this line, the color variants and quantity remain, and the product price should be moved above this yellow line. This places the read-only elements of product name, rating, and price together as one unit, while maintaining the table-like layout of the user-configurable variant and quantity elements. Keeping related information together improves understanding.

The renovated product information and configuration sections.

Finalized Renovation

Final renovation with re-located variant gallery, matching variant image and image label, and re-organized product data elements.

The completed redesign maintains the majority of the product page but with UI improvements that will lead to a better experience for customers.

Labeling product images and tying the variant image behavior to the selector gives users unambiguous confidence in which variant they are previewing and ordering. Changes to the placement and size of both variant and main product images improves visibility of these essential images. Reorganizing related product data in a visually balanced way maintains a separation of concerns echoed by the layout. Users will feel little friction or confusion from this precise redesign, but will benefit from the improved accessibility and layout restructure.

Thank you for reading this installment of UI Renovations! More work in this series can be found here. If you enjoyed reading this renovation, please consider buying me a coffee as a thank you by clicking the button below.