Executive Summary
A systems problem, not a UI problem
Enterprise legal teams run on logic most people never see -- conditional clauses, escalation paths, SLA timers that quietly decide whether a deal moves or stalls.
This project tackled a hard truth: when 10+ stakeholders edit the same non-linear workflow, clarity collapses. Logic drifts. Accountability blurs. Audits become archaeology.
The deeper win: we shifted how teams think about contracts. From documents to logic. From static artifacts to living systems.
Part 1: Design Principles
Three constraints that shaped every decision
I anchored the work around three pillars -- not slogans, but constraints I used to make hard trade-offs throughout the project.
1. Functional transparency
Most workflow errors are invisible. A threshold changes from 30 to 45 days. A condition flips polarity. On paper, nothing looks broken. In reality, millions are at stake.
I used visual cues like glows, ghosted nodes, and color-scoped highlights to expose logic changes instantly. Neon green signaled additive behavior. Ruby red marked removal. No guessing. No hunting.
If logic changed, the interface made it impossible to miss.
2. Contextual depth
Legal teams need detail without losing orientation. Flat lists fail here.
Glassmorphism and z-axis depth let me layer information without collapsing context. The Difference List floated above the canvas, always reachable, never dominant. Users could dive into a change and still feel where it lived inside the broader system.
Think of it like reading marginal notes without losing the page.
3. Operational trust
This one is subtle but critical.
In high-stakes environments, visual precision equals credibility. If spacing is sloppy, users subconsciously doubt the math. So the interface leaned hard into pixel-perfect execution. Expressive Inter typography. Consistent rhythm. A Work OS aesthetic that felt engineered, not decorated.
The design had to earn trust before users ever tested it.
Part 2: The Core Challenge
Visual diff for non-linear workflow logic
Comparing workflows is nothing like comparing documents. Order is irrelevant. Relationships are everything.
Side-by-side infinite canvas
I chose a side-by-side infinite canvas so users could spatially reason about change. Left was the baseline. Right was the edited state. Zoom and pan stayed synchronized to preserve orientation.
The Compare Workflow Versions interface showing a side-by-side diff between v2.4 and v2.5, with the centralized Differences panel highlighting four distinct changes.
This let teams answer questions like:
- Did this condition move or did it change?
- Is this new logic additive or substitutive?
- What downstream paths does this affect?
Those answers surfaced visually, not through explanation.
The changelog card
A single workflow edit could generate 50+ micro-changes -- nodes moved, labels updated, conditions inverted. Showing that raw would overwhelm anyone.
I designed a Changelog Card that aggregated changes into human-readable intent. Not what happened, but what it meant.
"Escalation now triggers earlier for high-value contracts."
Users could expand for detail, but the summary respected their time and cognitive load.
Part 3: Real-Time Collaboration
Co-authoring legal workflows without chaos
Most collaborative tools treat concurrency as a novelty. Legal workflows treat it as a risk.
Presence system
Live cursors. Subtle avatar pulses. Color-scoped highlights that mapped edits to people. Authorship was visible without being distracting.
Soft contested state
When two users touched the same node simultaneously, a clear signal appeared. No alarms. Just clarity that intent overlapped.
Resolution strip
A lightweight inline preview showing outcomes before commit. Merge. Override. Fork. Each option showed downstream impact before anything was finalized.
Seamless audit trail
Every action flowed directly into the audit log. Intent, timestamp, outcome. No extra steps. No broken flow.
Part 4: Leadership
Cross-functional partnership with engineering and legal
At this level, design decisions live or die on collaboration.
Engineering
The infinite canvas pushed performance limits. I worked with frontend and infra teams to define rendering boundaries, virtualization strategies, and interaction budgets -- co-designing constraints early so fidelity never became a liability.
Legal SMEs
Accuracy mattered more than elegance. I partnered with Legal Ops and senior counsel to validate representations of SLA timers, conditional precedence, and escalation logic -- pressure-testing edge cases until visuals matched real-world consequences.
Design was the translator between legal intent and system behavior.
Part 5: Impact
70% faster audits, zero workflow exports
Global standardization
Standardized contract workflows for three Fortune 500 clients across multiple regions.
Audit acceleration
Audit cycles dropped from days to hours -- a 70% reduction in time-to-audit.
In-system trust
Teams stopped exporting workflows for external review. They stayed in the system.
"When you design for systems instead of screens, clarity scales."
And legal logic, when treated with respect, can actually be beautiful.
Related
The mobile companion
Desktop CLM is about building and comparing workflow logic. Mobile CLM is about completing a step inside an existing workflow while every action returns to the record.
Read the mobile contract workflows engineering storyWant to discuss enterprise design challenges?
I love tackling complex systems problems where design thinking meets engineering rigor. Let's connect.
Read my writing on Medium