top of page

How to improve accessibility with smart brand design

Case Study: Refine product UI to ensure WCAG compliance while compiling a consistent style guide for marketing.

1.2.png

Project Summary

Company: VERO Leasing, Nov. 2022

Role: Design Lead

The Problem​

Our web-based product snowballed, which meant many designers, engineers, and product managers worldwide touched the user interface. 

  • Quick build resulted in inconsistencies in the design

  • No UI patterns or consistency across the platform

  • Components were failing WCAG standards for accessibility

Slide 16_9 - 16.jpg

// The goal was to refine the UI, create a consistent branding, and ensure this developed version complied with ALL accessibility standards. //

The Challenge

This project touched a lot of different departments hand had a strong likelihood of altering the overall look and feel of the product.

  1. Ensure WCAG standards for accessibility standards

  2. Don’t stray too far from current branding guidelines

  3. Maintain stakeholder buy-in for design changes and updated branding

  4. Keep engineering load low so changes can be made quickly

1.1.png

Our Solution


As the design lead, I led the process by breaking down what we currently had in production and organizing our components

 

We next analyzed the proposed changes against accessibility standards and where necessary made adjustments to our design library with stakeholder approval

Changes were itemized into bite-size tickets that could be slowly rolled out with the front-end team

Steps

  • Complete a Usability Audit of the platform

  • Organize all components that required updating

  • Stakeholder meetings, C Suite, Marketing to finalize branding decisions

  • Review these changes against WCAG guidelines

  • Jira tickets were created with the engineering team to implement

  • Create a new style guide with the improved branding that is more inline with contrast ratios and accessibility standards

1.41.png

Final Results


The project did not have external pressures, but other teams had associated goals that would benefit. We completed the project in two quarters while keeping up with other rollouts.

The key was to keep the engineering load light and to overly analyze all our design decisions to avoid doing this level of project again.

Slide 16_9 - 16.jpg

Next steps:

  • Educate the company on the branding changes

  • Maintain design consistency within the set WCAG guidelines

bottom of page