Adam Mogolowitz

Design EngineerProduct DesignerLabcorp, Durham, NC

I design systems that become software.

I work across Figma and code, with AI tooling at the center of my practice. At Labcorp I co-lead the enterprise design system, built its Angular and React component libraries, and ship the healthcare apps I design.

color.action
density
// generated from the Figma library
$color-action: #2446F5;
$radius-control: 6px;
$density: comfortable;
Change a token and it flows through every layer. Illustrative API.
  • ~30 designers & researchersuse the enterprise design system I co-lead, along with most internal product teams.
  • 13+ components, two frameworksAngular as the source of truth, React at parity, WCAG AA behavior.
  • Hours or days → secondsUnifyUXR, a research tool I designed and built on my own. It's still in regular use.
  • Months → daysdesign-system updates with Claude Code, Cursor and agent workflows. I teach the team the same way.
Practice

Months of system work, done in days.

I'm the go-to AI resource in a UX organization of about 30. I don't use AI to generate screens. I use it to run the tedious path between a design decision and shipped code, so designers stay in charge of the judgment calls.

Example change: color.action→ darker, to pass WCAG AA contrast

By handhow I used to carry a change like this
With skills + agentshow I run it now
01Decide the changeme
02Find every usageme
03Update the Figma libraryme
04Update SCSS tokensme
05Apply it in Angularme
06Repeat it in Reactmethe same work, a second time
07Stories + a11y checksme
08Reviewme + teamafter it's already built
09Releaseme
Decide the changeme
skills + parallel agentsour skills + .md design guidelines
Audit every layer against the guidelinesfinds gaps
Figma libraryagent
SCSS tokensagent
Angular sourceagent
React, matched to Angularagent
Stories + AA checksagent
Review one diffme + team
Releaseversioned
Monthsnine steps, all by hand, React done twice
Daysagents fix every layer at once; I decide and review

I carry a change through every layer myself, from Figma to SCSS to Angular to React. That used to mean making the same change by hand, one layer at a time. Now our team's skills and Markdown design guidelines spell out the rules, and I run several agents at once. Each one finds and fixes the discrepancies in its own layer, against the same guidelines. The decision and the review stay with me.

Learning Labs · biweekly

The goal isn't that I'm fast. It's that the team is.

I run biweekly Learning Labs where designers and product managers pick up AI-assisted workflows they can repeat on their own. We package what works into skills and agents so it doesn't depend on whoever figured it out first.

  • Reusable skills and agents instead of one-off prompts
  • Designing for AI output, and for the review that has to follow
  • AI-assisted design-to-code with Claude Code, Cursor, Replit and Figma Make
skills/component-parity/SKILL.mdillustrative
---
name: component-parity
description: Carry an approved Angular component
  change into React and keep behavior identical.
---
## Inputs
- The Angular component (source of truth)
- The design-token diff from the Figma library

## Steps
1. Diff the Angular API, states and keyboard map
2. Update the React twin to the same contract
3. Regenerate Storybook stories for both
4. Run the WCAG AA checks and list the gaps
5. Stop. Hand the diff to a human reviewer
Interlude · one component, five states

From a sketch to something teams ship.

  1. 01Sketch

    A problem and a rough shape. Nothing is precious yet.

  2. 02Spec

    Tokens, spacing, states and the keyboard map, written down before anything is built.

  3. 03Component

    Built once in Angular, matched in React, and accessible by default.

  4. 04Library

    One of 13+ components, versioned and documented so teams don't rebuild it.

  5. 05Product

    Assembled into the internal apps teams use every day.

Selected work · Labcorp

Proof, from the source outward.

Internal healthcare software can't be screenshotted, so every visual here is a reconstruction drawn for this site. The problems, decisions, and outcomes are real.

One Angular source. React at parity. Every team starts from the same place.

Product teams kept rebuilding the same components, and the UI drifted from team to team. I initiated and co-led a standard Angular and React component library, and personally designed and built 13+ of its components. Angular is the source of truth, React matches it, and behavior follows WCAG AA.

release pathreconstructed diagram
Figma + SCSSshared patterns, tokens, docs · ~30 designers & researchers
Angular librarysource of truth · 13+ components · WCAG AA behavior
React libraryfunctional parity
Storybookdocumentation
Figma Code Connectdesign ↔ code
Versioned NPMrelease + adoption guide
The hard part
Two frameworks can't drift apart. One has to lead, and the other has to match its behavior, not just its looks: keyboard support, states, and ARIA.
The decision
Make Angular the source of truth and hold React to functional parity. Then handle release and governance jointly, through a shared roadmap.
Where it stands
Frontend developers pointed to the libraries as a way to cut repeated implementation work. They're heading for their first official release.
Read the full story

I noticed an Excel bottleneck, so I built the tool that removed it.

Our researchers merged UserZoom exports by hand, again and again, and it took hours or days. I turned the normalization and weighting rules into one upload-and-results workflow, built it in Angular, and deployed it. It's still in regular use.

sample data
study_A_export.csvweight 47%n=42
taskTask Namesuccess %Task Success (%)
T1 Find a testFind a test78.078
T2 Order suppliesOrder supplies64.064
T3 View resultsView results88.088
study_B_export.csvweight 20%n=18
tasktask_idsuccess %success_rate
T1 Find a testT1_find_test61.00.61
T2 Order suppliesT2_order50.00.50
T3 View resultsT3_results83.00.83
study_C_results.xlsxweight 33%n=30
taskTasksuccess %Completed
T1 Find a testTask 170.021/30
T2 Order suppliesTask 260.018/30
T3 View resultsTask 390.027/30

Three exports, three dialects.

Each study came out of UserZoom with its own column names, its own scale, and its own names for the same tasks. Before UnifyUXR, a researcher reconciled them by hand in Excel, every time:

  • Paste each export into a master workbook
  • Rename columns so they match
  • Convert 0–1 decimals and x/n counts into percentages
  • Work out that “Task 1” and “Find a test” are the same task
  • Weight each study by its participant count
  • Re-check every formula before sharing
By handhours or daysUnifyUXRseconds
The hard part
Every export used its own column names and scales. The weighting rules lived in people's heads and their spreadsheets.
The decision
Don't build a dashboard. Build a standard upload-and-results flow: one clear input and one result you can trust.
Where it stands
It's deployed through Docker, Kubernetes and Jenkins, and researchers still use it regularly.
Read the full story

Making an AI suggestion easy to check against its source.

I watched the matching team struggle with a rushed three-column layout. Source records, Labcorp destinations and AI suggestions all looked the same. I restructured it so reviewers can tell each column apart at a glance and judge every proposal against the record behind it.

reconstruction · fictional records

The job: match each incoming client test to the right Labcorp test. An AI proposes a match; a reviewer accepts or rejects it.

Hover or tap any record to find where it landed in the other columns.
1Source sorted A→Z
23Suggested sorted by score
Labcorp sorted by code
LIPID PANEL, FASTINGSRC-0418Serum, Enzymatic
Lipid Panelscore 0.96Serum, Enzymatic
Lipid PanelDST-1102Serum, Enzymatic
HGB A1CSRC-0533Whole blood, HPLC
Hemoglobin A1cscore 0.93Whole blood, HPLC
Hemoglobin A1cDST-2240Whole blood, HPLC
VIT D 25-OHSRC-0761Serum, LC-MS/MS
Vitamin D, 25-Hydroxyscore 0.58Serum, Immunoassay
Vitamin D, 25-HydroxyDST-3318Serum, Immunoassay
TSH W/ REFLEX FT4SRC-0802Serum, Immunoassay, reflex Free T4
TSHscore 0.71Serum, Immunoassay, reflex none
TSHDST-4410Serum, Immunoassay, reflex none
CMPSRC-0120Serum, Panel of 14
Comprehensive Metabolic Panelscore 0.91Serum, Panel of 14
Comprehensive Metabolic PanelDST-1150Serum, Panel of 14
  1. 1Each column sorted itself (by name, by score, by code), so row 1 was a different test in every column.
  2. 2AI proposals looked exactly like confirmed Labcorp records.
  3. 3Confidence was a bare number with no evidence behind it.
The hard part
Three kinds of information looked identical. The AI's output had to be checked, not trusted, and the layout gave reviewers nothing to check it against.
The decision
Give each column its own visual role, keep every proposal on the same line as its source record, and show the evidence behind each match.
Where it stands
The improved experience was approved to move forward.
Platform · in progress

A starter for anyone building internal apps

I integrated the shared SCSS and both component libraries into a Replit starter template, planned for distribution to internal builders. New apps start on the system from day one instead of from scratch.

SCSS frameworkAngular / React libsapp shellyour app
Product ownership

End-to-end UX for 2–3 internal healthcare apps

I turn requirements and stakeholder feedback into flows, information architecture, layouts, interactions and high-fidelity prototypes, then stay with product and engineering through the build.

Path

Two tracks, one job.

I came to design through engineering. As a Systems Reliability Engineer at Nutanix, I diagnosed complex failures across enterprise infrastructure, where the job is finding the root cause, not treating the symptom. A degree in human-centered design taught me to bring that same rigor to people and workflows. I now apply both to every interface and system I build.

Engineering

Networking and security coursework at Durham Tech, then root-cause analysis across Nutanix AOS/AHV, VMware, Cisco and Lenovo, under SLA.

Human-centered design

B.S. in Human-Centered Design and Development from Penn State, with a minor in Security and Risk Analysis.

Design engineering

At Labcorp, where the two meet: design systems, component libraries, internal tools and AI workflows.

AI & agents

Claude Code · Cursor · Replit · Figma Make · agent workflows · reusable skills · design-to-code

Frontend

Angular · React · TypeScript · HTML/SCSS · Nx monorepo · Storybook · library architecture

Design systems

Figma · tokens · Code Connect · Bootstrap/SCSS · versioned NPM · governance · WCAG AA

Product design

Enterprise UX · workflows · IA · interaction · prototyping · stakeholder collaboration

Why a system

Every team builds the button a little differently.

Different blues, different corners, nothing quite lined up. Move through the field to apply one set of tokens. That's the job in miniature, and once it's aligned it stays aligned.

on-system 0%
Open to Design Engineer and product design roles

Let's build the system and the product.