Onit Process Builder · 2019–2020
Process Builder lets legal teams automate what happens when a transaction or matter changes, using if/else blocks instead of code. I designed its visual language and front end from the start of development, and built the design system in Figma and React that the product shipped on.
- Role
- I owned the visual design, the design system in Figma and in code, and front-end work in React and TypeScript.
- Outcome
- Design and development worked from one documented system, which made building the product faster and simpler.
- Product
- Onit, legal workflow automation
- Industry
- Legal Tech
- Year
- 2019–2020
Document logic lawyers can build themselves
- Process Builder lets legal teams decide what happens when a transaction or matter changes, without writing code.
- I joined 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.
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.
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.