AI Doc Editor for Lawyers

Designing and Frontend Engineering of an AI-Powered Contract Editor for Lawyers

SaaS Design

UX Strategy

Draft.js

Frontend Development

React.js

Partnering Up With An Enterprise To Design The Conversational AI Powered Product For Lawyers

Overview

AI is and will disrupt almost every industry. One of the industry will be Legal. Often lawyer face a lot of problems in writing legal documents and Papers remembering alot of clauses at the right time

The idea is to design an intuitive AI Powered Editor for Lawyers with builtin Predictive Analytics Model and clause library. The goal is to make it familiar with existing Doc Editors + Embedding it with an AI power so that users don’t feel like using something different, hence making it part of their life.

Role

Product Designing, Frontend Engineering, Interaction, Visual Design, Prototyping & Testing.

Machine learning allows us to build software solutions that exceed human understanding and shows us how AI can innervate every industry.

— Steve Jurvetson

(Board Member of SpaceX and Tesla)

Problem Statement

Lawyers has to go through an extensive process of writing, editing and managing legal contracts. They have to manually manage a huge clause library and have to memorize them. There are situations when they forgot some critical points which in legal terms, can results in a huge potential loss.

Goal

The goal of the project was to make easy contract management, determine to uncover insights about the contract health, analyse and minimise the risk associated with the contract, and fully automate the contract process flow.

The Process – Mind-Mapping

We, the bunch of Product folks at Denovers, love the idea of converting and translating just thoughts in our client’s mind into a reality. After some discovery workshops with clients, we came to the following Mindmap.

Ideation

At Denovers, we are always very excited & Pumped up when we start converting ideas in our Client’s head into a reality.

Taking the mind-map, we started drawing some sketches with pen and paper. As per the mind-map, we gave four tabs to the navigation bar with Mission Control at the top.

Wireframing

Once we had bunch of few iterations on board and paper, we decided to jump into XD to design.

Product Design

Designing Experience of an Editor following obvious UX Principles.

Next, The Challenge was to embed AI Experience into the Application.

Starting with Highlighting the clauses point out by AI Engine. We gave different color shades as per the urgency.

Transforming AI Engine Suggestions Intuitively to User

Now, Designing the Conversational AI Experience

Intelligence Assistant Panel

There was a challenge, considering we already had a lot of information on the screen, we ned to come up with a way to incorporate AI Intelligence as well as keeping the screen overall intuitive and declutter.

Frontend Engineering in React.JS (Mastering Draft.js)

The next challenge was to pull it off in terms of Frontend Engineering. We collaborated with Developers another firm that was responsible for building an AI Engine and writing backend APIs on top of it.

This App was Editor heavy App which means we have to choose a library carefully. After thorough research, we decided to go with React.js for the overall Application and Draft.js for the Editor.

Product UI/UX Design & Frontend Engineering is our Passion and we are just getting started