UI Renovations Part 1: GTFO It’s Vegan

As a side project, I design UI improvements with an emphasis on accessibility for sites I love. Here’s one (unsolicited, totally subjective) redesign I completed for GTFO It’s Vegan, an online retailer of vegan food, snacks, and beverages.

The product pages utilize summary cards with an action button at the bottom. While browsing their large inventory (the “Shop all” option currently shows over 2000 items), I was having a hard time visually parsing which items were out of stock or available. Take a look:

Can you tell in an instant what’s sold out? Me neither.

Every button, no matter what state the inventory was in, looks nearly identical. This made it really clunky to quickly scan thousands of products for what was currently buyable while scrolling. Let’s fix that!

First, we need to differentiate between products that are in stock and those that aren’t. De-emphasizing the out-of-stock product buttons will enable users to get purchasing information at a glance.

Initially I selected a medium gray from the site’s existing product text for a new background color for “Out of stock” buttons, but the color failed most WebAIM color contrast guidelines when used with white text:

This existing gray de-emphasizes out-of-stock items but fails accessibility color contrast guidelines.

Additionally, I tested the current color of the “Add to cart” buttons and it also failed, so I knew I couldn’t work with that color. Not wanting to select new colors for these UI elements, because this exercise wasn’t about creating a new brand palette, I looked elsewhere in the site’s existing color usage.

Attempts to manipulate this coral color down to a high enough contrast resulted in some truly ugly dark reds. No screenshots of that!

I noticed the hover state of the product buttons used a nice dark navy, so I tested that color out in the contrast checker- and we had passing tests across all levels of WCAG criteria!

Because this navy color and white have acceptable contrast, I ditched the existing “Add to cart” button color and used the same two colors for all product buttons, but inverted the colors for out-of-stock items:

The wins for clarity, accessibility, and visual cohesion are several. This redesign:

1. Keeps site brand colors intact
2. De-emphasizes out-of-stock purchasing actions without detracting from any product’s presence in the grid view
3. Maintains visual unity between all product cards by using the same two colors for action buttons
4. Allows product photographs to gain greater emphasis by using a more neutral color for action buttons
5. Meets the highest criteria for WCAG color contrast guidelines

I’m really pleased with the research and design that led to this renovation. Here’s the complete before-and-after one more time, side by side:

Redesigning this product page makes shopping more accessible- both for users who need a higher color contrast to read text but also reduces the mental load and visual time it takes to find products that are in stock.

With this renovation complete, I’m likely to spend a lot more time (and money…) on this site. Thanks for reading!