Abyss Mobile Component Library

A flexible, scalable React Native component library adopted across UnitedHealth Group and its subsidiaries. Features a three-tier design token system, 80+ components, and white labeling capabilities.

January 2023 - Present
Optum Health / UnitedHealth Group
in progress

Overview

Abyss is the React Native component library that UnitedHealth Group and its subsidiaries build their mobile apps on. One library has to serve very different products: some ship under a single master brand, others under brands of their own, so every component must be themeable without being forked. It covers more than 80 components and follows WCAG 2.2.

My role

As a Senior React Native Developer at Optum Health, I lead development of the library. I architected its three-tier design token system (core, semantic and component tokens) in both code and Figma, and tokenized more than 80 components in a month. I connected the components to Figma Code Connect so designers and developers work from the same source, and designed the CI/CD and automated testing pipelines that build and publish the library to internal artifact repositories.

Outcome

The library saves an estimated $2M+ and more than 50,000 development hours a year, because product teams build on shared, accessible components instead of rebuilding them. White labeling across three base brands lets a new product adopt it without a custom fork.

Technologies Used

React NativeTypeScriptFigmaFigma Token StudioFigma Code ConnectEmotion NativeCI/CD PipelinesJestFirebaseSauce LabsMonorepo

Key Features

  • 80+ accessible components
  • Three-tier token system (core, semantic, component)
  • White labeling support
  • Figma Code Connect integration
  • WCAG 2.2 compliant
  • Automated testing pipeline
  • Multi-brand theming
  • Comprehensive documentation

Challenges & Solutions

  • Supporting both house of brands and branded house architectures
  • Implementing white labeling capability across 3 base brands
  • Ensuring WCAG 2.2 compliance for all components
  • Token hierarchy allowing overwrites at any level
  • WCAG A11y development & automated E2E testing
  • CI/CD Pipelines automated builds with internal artifactories

Project Metrics

Savings$2M+ annually
Dev hours saved50,000+
Components80+

Interested in working together?

Let's discuss your project and see how I can help bring your ideas to life.