cover-pohto-2.png

Accessibility at RetailMeNot

One of the six RMN core values is Diverse and Inclusive. When we think about how to be diverse and inclusive across our breadth of products, nothing embodies this more than making accessibility a priority across.

Pioneered by a few designers and myself, we put together a cross-functional team to work on improving our core products to be more inclusive and accessible. This began with overhauling our color palette.


Color audit

Element Ratio (AA)
Text ≤16 4.5:1
Text ≤18 3:1
UI components 3:1

In June 2018, WCAG released their 2.1 guidelines that included new contrast ratios for UI components.
There were areas of our color palette, such as our core brand colors, that passed contrast ratios with flying colors.

Our UI colors, however, didn’t do as well. The biggest errors we found were our colors used for primary CTA’s, text links, validation, and text.

Color audit of our existing color palette, comparing contrast ratios

Color audit of our existing color palette, comparing contrast ratios

 

Color studies

Buttons + links

We looked for blues with a similar hue but tweaked the brightness and saturation to achieve a higher contrast.

Artboard.png
Artboard Copy 3.png
buttons.png
 

Iconography

icons.png
 

Offer Cards

offer-type.png

Our Offer Cards that are shown on RMN Store Pages are a unique use case, because they contain an “anchor” (20% OFF) that ranges in size, and an “Offer type label” (In-Store Coupon) that is consistently 14px. These two parts of the Offer Card component are the same color, but had different success criteria for color contrast (4.5:1 ratio vs. 3:1). While iterating on our palette, we found colors that worked for our Offer type label were too bland to be used for the anchors. We wanted to keep the vibrancy that the anchors brought to the Offer Cards.

To solve this problem, we decided to create a light and dark version of each swatch. We felt this gave our Offer Cards both a variety in type hierarchy and visual boldness, and ultimately would enable designers to scale this palette across our UI as it’s rolled out.

offer-card-colors.png
 

Typography + backgrounds

We wanted our neutral palette to be a subtle blend of grays that could be used across background colors and typographic treatments.

typography2.png

A/B testing

 
current RetailMeNot.com Store Page

current RetailMeNot.com Store Page

After arriving on a new set of colors, our first step was to implement our new CTA color - which had the most visual weight through our UI. 70% of all traffic through retailmenot.com is funneled through the Store Page. In order to make such a monumental change to our UI, we first needed to run an A/B test to see the affect this change may have on yield.

A/B Testing through Optimizely

Purpose: Quantify the impact of altering the variance of blue in offer CTA

Hypothesis: Changing variance of blue in offer CTA will not negatively impact performance.

Platform: Desktop & mobile

Traffic: 5% traffic per slice

Dates: 11/9/2018 - 11/16/2018

What we tested

slicea2.png
slicea.png
sliceb2.png
sliceb444.png
 

Results

what we measured

Bounce rate: percentage of users who navigated away from the RMN Store Page after viewing only one page.

Conversion: percentage of users who completed a desired action on the RMN Store Page, such as clicking on an Offer Card and using a promo code.

Yield: percentage of overall usage

After one week of running the test, sitewide impact was generally positive. On Desktop, Slice A saw a higher percentage of Bounce rate, Conversion, and Yield when compared to Slice B. Slice A was also consistently higher in yield by browser type, while Slice B saw diversion in direction. Detailed breakdown of the stats can be found below.

 
 
results.png
 
 
Artboard Copy 10.png
 
Outcome: Roll with Slice A

Implementation

 

Coordinating efforts across RMN

Roux is RMN’s shared library, containing colors, icons, and a few components. Many, but not all Engineering squads across RMN are inheriting changes whenever Roux is updated. The challenge was a) coordinating efforts and b) finding areas where inconsistencies lie and updating those hard-coded values to the Roux variables. This was a cross-functional effort across PM and multiple Eng squads. We needed these changes to be somewhat aligned, so we didn’t have large scale color inconsistencies across the platform.

The process was as follows:

  1. Roux base-styles is updated to version 3.1.0, Roux common-ingredients is updated to version 12.28.0

  2. Squads inheriting changes from Roux update to the latest version

  3. Color variables using Roux should be updated automatically with the new dependency

  4. Inconsistencies indicate hard-coded colors that need to be swapped to match Roux variables

squads.png


OLD vs. new color palette

 

Buttons + icons

Artboard Copy 7.png
 

Anchors, meta text, & links

Artboard.png
 

Inputs, checkboxes, & radio buttons

333333 copy.png
 

Error + success states

error + success.png
 

Going forward

Updating our color palette is just the first step in our goal towards making a more inclusive and accessible product.
The accessibility group will continue to meet and work with our cross functional partners to implement positive changes.

 

Education around a11y

A huge part of implementing change across an organization involves education around what, why, and how.
Using the RMN Wiki, I put together an “Accessibility basics” area, which outlines the very basic standards for making an experience accessible and inclusive.

Screen Shot 2019-01-21 at 11.31.10 AM.png
What better way to educate people about alt text than through the use of a cute puppy.

What better way to educate people about alt text than through the use of a cute puppy.

Accessibility charter

As we begin to roll out accessibility changes across our products, we realized there was a need for an agreed upon set of standards to share out amongst the larger organization. This goal of the charter would be to outline accessibility best practices and the guidelines we aspire to achieve through designing and building our products.

The Accessibility Charter outlines:

  1. What are RMN's agreed upon and enforced accessibility standards?

  1. How is the design team working towards (a) ensuring new designs meet standards and (b) how existing designs in the wild need to be updated?

  2. How Product and Engineering can partner to move along 1 & 2 (with relative priority)?

Our goal is to reference this document as we QA new and existing designs and development.



charter.png