EverQuote

accessible
design system

Timeline

2-week project

Proposed December 2018

Tools

Figma

Responsibilities

Conducted existing design system audit

Conducted WCAG research

Collected inspiration from best-in-class design systems

Developed all design system concepts

Tested colors for appropriate contrast ratios

Created high-fidelity mock-ups to test implementation and effectiveness of design systems

Led design critique session

Communicated with developers and product manager to establish implementation plan and prioritization of tasks

Problems

The app was lacking a robust and flexible visual system that design solutions required

The existing visual system was not WCAG 2.0 AA compliant

Objectives

Fill the color and component gaps in the existing design system

Create an app that's inclusive and enjoyable for all individuals

Key Metrics

WCAG 2.0 AA compliance

Process

Existing design system audit

Design system research

WCAG interaction, sizing, and contrast ratio standards research

Moodboarding

Color palette explorations

Typography explorations

Button and component explorations

Iconography explorations

Illustration explorations

Contextual testing

Design critique

Final adjustments

Proposal and prioritization discussion

Results

Final design system was proposed to the product team in December 2018

Color System Iterations