Juan Pablo Gallegos → Work → Clara
Clara
Making illegal states unrepresentable when the interface is the legal record.
What changed before the long read
The case is about removing ambiguity from high-stakes legal flows while letting product teams keep moving.
Context
Clara is a legaltech platform for managing cap tables, share issuances, and investor data rooms. The interface is the record that companies and investors act on.
That changes the stakes of an interface. A misread screen here is not a UX nit-pick — it is legal exposure.
Problem
The decision-heavy flows — issue shares, grant options, open a data room to a counterparty — had grown into tangles of conditional rendering and boolean flags.
The UI could drift into states nobody had designed: a half-submitted issuance, an ambiguous "is this actually signed?" Meanwhile multiple teams were trying to ship into the same codebase, and every change risked stepping on another.
Constraints
Correctness was non-negotiable. An undesigned state was not a glitch; it was a defect with legal weight.
Several teams shipped into one application and could not all coordinate around a single release.
This was a mature React codebase. The work had to be a rewrite-in-place of the worst flows, not a greenfield restart.
Role
I worked on the platform core as a frontend engineer. I owned the modeling of the highest-stakes flows and the architecture that let separate teams ship without blocking each other.
System shape
The critical flows are modeled as explicit state machines. An issuance, for example, moves through named states and nothing else:
Every state is named, every transition is declared, and the UI renders as a pure function of the current state — components read the machine, they cannot invent a transition that was never designed.
The application is split into micro-frontends via Module Federation, so the cap-table, data-room, and admin surfaces build and deploy on their own cadence.
Key decisions
An issuance has named states, not a soup of isDraft / isSigned / isRecorded flags that combine into dozens of invalid screens. The machine makes illegal transitions impossible by construction.
Components render from the machine's current state and dispatch declared events. They have no way to reach a state the designer never drew.
Module Federation lets separate teams ship their surface independently, instead of queueing behind a single shared release train.
Trade-offs
Gained
- Undesigned, ambiguous screens are impossible by construction
- Flows are inspectable and testable as diagrams
- Teams deploy their surfaces independently
- Every transition has a focused, isolated test
Cost
- XState has a real learning curve for the team
- Module Federation adds build and runtime complexity
- More moving parts to operate and observe
Outcome
The heaviest flows became diagrams the team could reason about, review, and test directly. Ambiguous screens stopped reaching production, and separate teams shipped on their own clocks without colliding in a shared release.