Process Builder lets legal teams automate what happens when a transaction or matter changes, using if/else blocks instead of code. In a couple of weeks at the start of development I designed its visual language and front end, and built the design system in Figma and React that the product shipped on.

Onit Process Builder

Document logic lawyers can build themselves

  • I joined for a couple of weeks as development started, to close the gap between design and engineering.

Blocks, not code

  • Each rule is a stack of events, conditions, and actions. An if/else branch reads top to bottom, the way the people writing it would say it.
  • Optimized the editor for the paths people used most, and mapped every state the blocks could be in.
Annotated workflow through the editor
Annotated workflow through the editor

One system, in Figma and in code

  • Built, scaled, and documented the design system both in Figma and in React and TypeScript.
  • Took on front-end work so my teammates could focus on the back end and the logic.
Buttons, inputs, and type in the Figma library
Buttons, inputs, and type in the Figma library
The same components in code
The same components in code

Tested before it shipped

  • Prototyped each new feature against different use cases before it went to development, like editing a block in place and reviewing changes before publishing them.
Editing an action block
Editing an action block
Reviewing changes before publishing
Reviewing changes before publishing