design-tokens · risk-narrative Figma → Storybook
Design Tokens · Color Variables
Color
primary/50 #DBEAFE
primary/300 #93C5FD
primary/500 #4F46E5
primary/700 #4338CA
primary/900 #1E1B4B
Risk Narrative · Dashboard PROD
Active · 142 cases
Filter Search rules…
Action View detail report
Palette update 0:00:30
3 people · full day 1 designer · 30s

Bridging Design and Engineering

A palette update used to take three people and a full day. I got it down to one designer and 30 seconds.

At LexisNexis Risk Solutions, Figma, Storybook, and production code spoke different languages. I ran the research, built the prototypes, and helped ship the pipeline that connects them. It starts with naming: every foundation swatch maps to a semantic alias.

figma.com/file/design-tokens
Foundations
Red
Gray
Blue
Figma Variables · Semantic
#C70E15
#F2F1EE
#0077C8

Foundations become semantic aliases: the name is the contract.

Two design systems. Zero shared language.

LexisNexis runs ThreatMetrix, fraud detection for financial institutions worldwide. A palette update took one designer and two UX engineers hand-translating values into Storybook and CSS.

And the fraud analysts using the product daily had never been interviewed.

Eight interviews that rewrote the roadmap.

Custom Layouts was on the roadmap, but nobody had defined what "custom" meant. I joined client calls and tagged 8 interviews in Dovetail.

Dovetail usability study insight card with user quote from Custom Page Layouts research

Analysts monitor dozens of signals, but the dashboard forces one fixed layout. Every insight went into a three-dimension taxonomy so counts could answer roadmap questions.

dovetail.com/projects/custom-layouts
D Dana 4:40 I keep four tabs open just to compare events side by side.
R Ravi 12:18 Every team migrated their own widgets. None of them match.
T Tara 27:05 The summary view buries the one number I check every morning.
Persona 12
Analyst8
Migrated 18
Widgets11
Product area 9
Dashboard6
Insight · 8 interviews Customizable dashboard for fraud overview moved to the roadmap.

Every insight lands in a taxonomy: counts become the roadmap.

The skill that stuck: writing insights specific enough that a PM could build a ticket from them.

Three rounds in two weeks.

I built an interactive Figma prototype of drag-and-drop dashboard customization. Each round of moderated testing, I fixed what made analysts hesitate and shipped before the next session.

By the third round, analysts completed tasks without guidance. The core interaction, rebuilt:

tmxcyber.com/prototypes/gridstack
Widgets
My Layout 0 widgets
Pick a widget from the left.

Try it: pick a widget, add it to the layout.

One source of truth for two design systems.

I built a Figma token library: 180+ colors, each WCAG-tested, each named for usage, not appearance. "Surface-elevated" and "feedback-error" replaced "gray-200" and "red-3."

With a UX engineer, I defined the JSON schema so token names, nesting, and values survive the trip from Figma to code untouched.

Infrastructure that outlasts the project.

Palette updates: full day → 30 seconds. What required 3 people and a coordinated handoff now takes 1 designer.

180+ WCAG-tested tokens serving 2 design systems through a shared architecture.

8 user interviews that directly shaped the Custom Layouts product roadmap.

The token pipeline became the foundation for the 2025 design system rollout across LexisNexis Risk Solutions. Before and after:

Before < 1 day · 3 people
Figma
Notify engineer
Wait for resource
Manual updates
Code review
Storybook
After 30 seconds · 1 designer
Figma
Automated JSON export
Storybook

Six manual handoffs become one automated export.

Other Work