Designing a Decision Engine for Enterprise Policy
Replaced spreadsheet-driven policy workflows with a modular, compliance-ready decision engine, so non-technical stakeholders can own complex rule logic without engineering support.
Policy analysts at Capital One built complex decision logic in spreadsheets: rules copy-pasted between tabs, compliance constraints cross-referenced by hand. I led the design systems strategy that replaced that workflow with a modular, compliance-ready rules interface.
The actual thing, before the write-up: a public-safe, runnable prototype. Drag a rule to reorder, flip an outcome, edit any cell, or open the full onboarding flow.
The Problem
A patchwork of spreadsheets and inconsistent UI patterns made complex logic risky to author: high cognitive load during rule creation, error-prone steps in critical workflows, inconsistent accessibility, and slow onboarding with little pattern reuse. The core issue wasn't missing features. It was structural ambiguity.
Four constraints bounded the fix: a compliance-sensitive domain with low tolerance for error, legacy interaction patterns embedded in daily workflows, a codebase on open-source Ant Design rather than Capital One's Gravity system, and incremental migration instead of a rebuild.
Strategy
Instead of redesigning screens, I focused on establishing a clear system hierarchy that could scale across use cases and teams: tokens into core components into reusable patterns, complexity encapsulated rather than exposed, and adoption treated as a design problem rather than an enforcement one.
That produced one shared component library in Figma and Storybook as the source of truth, repeatable patterns for common analyst tasks, and a migration roadmap aligned to system maturity.
The rule cell
One interaction pattern encapsulated the whole model. Each row maps a data attribute to an operator, a value, and an outcome, surfacing upstream dependencies and validation state inline. Inline editing by badge tap, dropdown and direct input replaced the modal-heavy workflow, cutting the path to a saved rule from eight clicks to three. In discovery testing analysts completed 12 of 13 tasks, with markedly lower error rates than the spreadsheet baseline.
Reads as: If Income is greater than $50,000 → Approve
Every part is live: swap the attribute, pick an operator, edit the value, flip the outcome. Hover the row or tick the checkbox for its hover and selected states.
Inside the prototype
The prototype above is an open-source extraction of the rule-row pattern (React, TypeScript, Vite) with the proprietary domain logic stripped and the interaction model intact. Instead of an empty editor it opens on a guided three-step setup: pick an outcome, name the model, choose the data it may evaluate. One decision per step, all on one scrollable page.
Two details carry most of the speed. Each row's outcome is a two-state segmented control, green Approve and red Deny with the unselected side a muted ghost: faster than a dropdown, readable at a glance. And the primary CTA is a split button, + Add rule on the main face with a chevron for Add existing rule, so the default stays one click away without burying the alternative.
What it returned
Accessibility was built in at the system level rather than retrofitted, worth roughly a 30% compliance improvement alongside clearer focus states and more predictable keyboard behaviour across components. The patterns unified a critical enterprise workflow, analysts finished tasks faster in usability testing, and shared tokens cut design and QA overhead. In complex enterprise systems, clarity is a performance feature.