Quility Design System

Quility is an insurance company that offers affordable, customized insurance solutions and financial planning to support clients throughout their lives and connects them with licensed insurance agents.

Quility University LMS is a product that provides insurance agents with the coursework and product training needed to successfully sell advanced market products. As a senior designer, I drive design system strategy by overseeing the Figma library and component governance.

Problem: When I audited our existing component library, I found that we had a fundamental usability crisis with parts that didn't meet modern web standards or basic accessibility requirements, creating a disjointing and inconsistent experience. I focused the rebuild on solving four core issues:

• Inaccessibility: Most of the design system was behind on WCAG standards. Most of the core UI, like buttons, labels, and alerts, failed basic color contrast checks. We were also using font sizes that dipped below 12px, making some text inaccessible for reading.

• Interaction "mis-clicks": The components weren't built for real-world touch or precision. Many of our interactive elements, like buttons and icons and chevron links, didn’t meet minimum tap surface requirements, risking user frustration and mis-click.

• Lack of interaction states: Almost all existing components lacked visual feedback like hover and pressed states, making users unsure if an element was clickable or if the system had registered their input.

• Inconsistent component appearance and usage: Because we lacked a single source of truth, the same component appeared differently across the platform due to developers having to write custom code for each instance, creating a technical debt and a disjointed user experience.

Solution: I rebuilt our design system from scratch to build one that has an accessible-first foundation, to ensure that every component was inclusive, consistent, and easily scaled. I baked accessibility and interactivity into the components as a priority, not as an afterthought.

• Redefined color tokens and type scales to meet WCAG 2.1 AAA standards across the board, applying them to all components.

• Updated all interactive elements to a minimum 48×48px tap target to reduce user error.

• Built out a full suite of component states (Default, Hover, Active, Focus, Disabled) to provide clear, real-time feedback to the user.

• Consolidated several versions of a single component into one master component with flexible variants.

Interactive component showcase below: Explore the flexible variants and property logic used throughout the library.