Design System Visual Coverage in web and app (React Native) applications

Abstract

The need to show how much the Design System empowers our customers’ interactions makes us color and count pixels straight in the browser instead of following a more typical static analysis approach.

The desire to be independent of product teams and their always-packed OKRs leads us to count pixels in production when customers interact with the product.

The requirement to not impact our customers’ UX even if they use feature phones drives us to idle callbacks and web workers and consult a former Google Chrome engineer to lower the memory footprint as much as possible.

Doing the same for React Native required more shenanigans (it’s harder to inspect the rendered tree in a Mobile environment), and a safer approach, but it’s also working!

We will present our experience to show engineers and company leaders the measurable value of the Design System in our products. This approach works well for Preply (a B2C language learning portal) and WorkWave (B2B field service software), and other companies are approaching the topic the same way.