№ 01 / Standards & Training / 2021–2023

Virgin Pulse

UX Design Engineer · Leading Accessibility Strategy

Sector
Enterprise Wellness
Standard
Section 508 / WCAG AA
Scope
300+ engineers · org-wide SOP
We don't control how content is consumed. Users do.
Andrés Galante, Accessible Font Sizing, Explained

Virgin Pulse hired me into the product org for a specific reason: Bank of America, one of the biggest clients, had been promised Section 508 compliance, and the product and engineering orgs were struggling to communicate. At the time, I was a designer whose background sat at the intersection of front-end engineering and accessibility, which was exactly where the problem lived. I joined the product team as their first UX Design Engineer.

Together with engineering leadership, we developed a shift-left strategy before I knew the term "shift-left" existed. Instead of treating WCAG acceptance criteria as a QA gate, we moved accessibility upstream into how features were designed, built, and reviewed, with shared standards around flexbox and grid giving engineering and QA a common vocabulary.

I partnered with leadership from engineering, QA, and product to define the architecture shift, then prototyped it with a platform engineer. That flexbox/grid proof of concept became the foundation for our accessibility standards, training, and documentation. I also built annotation tools, ran two training tracks (one for design, one for engineering), and held twice-weekly open office hours, so both teams developed working fluency in Reflow (1.4.10) and Resize Text (1.4.4) and caught issues before they shipped.

Four approaches to responsive layout. Only one holds up when users zoom or resize.

This was a core element of our training. Most teams were shipping the fixed example, or at best the fluid example, and calling it responsive. The fourth is the one that meets WCAG and scales.

Fixed overflow

Pixel-set widths. Breaks at zoom. Overflows narrow viewports.

Fluid

Scales continuously. Typography breaks at extremes (lines too long, then too short).

Adaptive

Jumps at preset breakpoints. Stable between them, but content can overflow or clip at the transitions.

Fluid + Breakpoints

Fluid within bands. Reflows at thresholds. Predictably designed to meet WCAG Resize/Reflow at all zoom levels.

Diagram from the training deck Engineering Responsiveness: Concepts and Training, delivered org-wide at Virgin Pulse.

Building the approach into standards, code, and training.

  1. Co-authored Virgin Pulse's WCAG AA strategy to meet the Section 508 requirement on the Bank of America contract, defining accessible patterns and component standards adopted organization-wide.
  2. Led a proof of concept refactoring Angular micro-frontend templates and CSS to meet Reflow (1.4.10) and Resize Text (1.4.4). The approach was adopted as the engineering SOP across 300+ engineers.
  3. Designed and delivered two accessibility training curricula (one for engineers, one for designers and product leads) built on relative units, fluid grids, and container-guided layout.
400+ Engineers, designers, and PMs trained
2 Training curricula delivered (engineers + designers/PMs)
§508 Enterprise contract requirement met