Accessibility & Design

Accessibility Pioneers

I championed the idea of designing with accessibility at the forefront of importance within our organization. This resulted in the formation of a grassroots team driven to make all products WCAG 2.1 complaint. Bethany Sonefeld and I co-lead / orchestrated bi-weekly meetings and strategy to gain more allies within the company from each major department. Major wins of the group included hosting a company-wide presentation on what accessibility-minded design was, creation of a wiki page with brand guidelines related to ADA compliance for developers, program managers, and designers to reference, as well as creating an updated color palette for our brand that not only passed compliance guidelines, but showed a higher click through rate in an A/B test of our signature blue color on our website.

A/B Test

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

Original RetailMeNot Store Page

What We Tested (Against Original Control Blue)

Results
After one week of running the test, sitewide impact was generally positive. On Desktop, Slice A saw a lower Bounce rate and higher percentage of 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.

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

Outcome: Implement Slice A

Implementation

Coordinating Efforts Across RetailMeNot
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:
Step 1: Roux base-styles is updated to version 3.1.0, Roux common-ingredients is updated to version 12.28.0
Step 2: Squads inheriting changes from Roux update to the latest version
Step 3: Color variables using Roux should be updated automatically with the new dependency
Step 4: Inconsistencies indicate hard-coded colors that need to be swapped to match Roux variables