Legal Design Platform
I redesigned the contract editor, the core of a legal-design platform that helps professionals, lawyers, and designers create contracts people can actually understand. This case study focuses on how I shaped a new visual language for a dense, collaborative editor without losing the legal depth users rely on.
Due to the confidential nature of this project, interface visuals are blurred and sensitive details are omitted.
The Product & Challenge
Visual Contracts helps business professionals, lawyers, and designers create understandable contracts, making the law more accessible in a human-friendly way. Users pick a template, then adjust legal content with AI suggestions on plain language, visualization, and layout, collaborating in real time.
The contract editor is the core of the platform, and my task was to redesign it.
Brand visual guidelines existed, but there were no applications for the editor itself. I had the creative freedom to define editor-specific components, layouts, and interaction patterns, all grounded in the Ant Design system.
Design priorities
Make legal content readable
Turn dense clauses into something plain, scannable, and human.
Support real-time collaboration
Let lawyers, designers, and clients shape a contract together.
Extend the brand into the editor
Define new visual language while staying consistent with the identity.
Balance depth with clarity
Keep the legal detail intact, but make it easy to move through.
Build on a solid system
Extend Ant Design with reusable components and editor-specific patterns.
The project started with several working sessions with the client. Before redesigning the editor, I needed to understand how visual contracts worked, which legal rules shaped the experience, and what the product needed to support.
Understand the legal and product context
Through working sessions, the client explained how visual contracts worked, what the editor needed to support, and which legal requirements could not be simplified away.
Redesign and refine the editor
I translated that context into a new editor interface and refined the direction with the client throughout the project.
Build and hand off the design system
Using Ant Design as a foundation, I created a new design system for the editor and prepared its components and patterns for implementation.
The Interface
A new visual language for a dense, collaborative editor: a rich clause library, plain-language content, and full control over the contract's styling, all built on Ant Design.
Customization in context. Color, gradient, and texture controls stay close to the contract preview, allowing users to shape its visual language without leaving the editing flow.
Clauses as reusable visual building blocks. Users can select a clause and choose how it is represented – as text, an icon, a 2D visual, or a 3D visual – without rebuilding the content manually.
What I delivered
I delivered a redesigned contract editor and a reusable design system based on Ant Design, translating existing brand guidelines into editor-specific components, layouts, and patterns prepared for implementation.
Contract editor redesigned
The product's core workspace redesigned around its legal content and editing tools.
Design system built on Ant Design
A reusable system created for the editor and future parts of the product.
Brand applied to product UI
Existing brand guidelines translated into editor-specific components, layouts, and patterns.
Implementation handoff
The editor and design system prepared and handed off to the client and developer.
