Form filling Tool for Legal Petitions
Product Design, 2020.
Form filling Tool for Legal Petitions
@ Ailaw.ai
My role:
-
Product Designer
Type:
Work Project
(In progress)
Time:
05.2020-10.2020
Team:
-
Product Manager (3)
-
Designers (3)
-
Engineer Team (5)
-
Legal Team (*)
-
Market team (3)
To comply with my NDA (non-disclosure agreement) with Ailaw, I have omitted and obfuscated confidential information in this case study.
Background
AILaw is a cloud-based legal technology platform that can greatly reduce the repetitive paperwork of both attorneys and applicants in non-litigation fields, such as immigration petitions, corporation applications.
I helped my team break down the legal process by listening to both attorneys and applicants. I conveyed the research results into designs, and map the functional system, and designed several detailed functions.
Mission
Design a product that can ease the repetitive and redundant labor work in the legal process for both attorneys and clients.
Challenge
Organize and compose a multi-dimensional product flow about a complex circumstance that involves two different parties from raw ideas.
System Design
Aim user group
92% USERS ARE ATTORNEYS & LAW FIRMS
Due to the market team research, 92% of our users are attorneys or law firms. They are helping applicants (their clients) to finish Corporation applications.
Attorneys serve their clients by building cases to serve them. The rest 8% of users are individual applicants, they are familiar with the legal process and can proceed the process by themselves.
Comprehend & Frame the Legal Process
To picture the whole map of this complex and rigorous process, I worked with professional attorneys and applicants to comprehend the whole works flow, timeline, and tasks given to both parties during the intercourses between them. There are surely lots of elements involved in between, so I classify the elements in different magnitudes.
Layer down design factors
Taxonomy of the Management
PRODUCT USER (ATTONEYS)
SERVICE TARGET (CLIENTS)
SERVICE OBJECT (CASES)
CASE CONTENT (SERVICE)
SERVICE DETAIL (TASKS)
TASK DETAILS
(SUBTASKS)
Map the whole story
To transfer this research into a product concept, I then break down and visualize how attorneys & applicants are involved, illustrate a 3D map of the whole context. It helps my team to have something visible to brainstorm where we can insert our helps:
Design function groups and hierarchy
To organize data and functions into a top-level container, I sort factors into 3 systems:
The user management system deals with the attorney & client profiles, relationships, authorities, communications, and notifications, to help attorneys investigate applicants' backgrounds and find the best way to help them.
The case management system handles the cases built by two parties, involving case type, case services, and payments and contracts between two parties.
The task management system is the core functional part of the process, it manages the detailed flow like form-filling operations, and documentation, and legal document library, signatures, submission, etc.
The whole system map
Design information architecture with different UX flow
From the main structure, add some of the branches to form the whole application flow into wireframes.
Design the primary screen to deal with 3 systems
The primary screen of the application sorts elements into groups.
The most frequent usage panel (Task manage system) needs a large amount of screen space; the info panel helps attorneys quickly refer to make decisions; frequently used functions should be easily accesable.
Task Manage Layout
Always shows the basic info of the case in different manage system
When there is an action operating/checking a document, attorneys need the know the info directly shown on the screen. It is also a panel that could connect to the case management system to quickly switch to different cases.
The operating area will occupy the major screen space.
The core functional part, takes a primary view space. I also keep this area in a smaller frame in the center to lower down its visual hierarchy.
Frequently used functions will display on the top of the task manage page
Though the task management system panel varies from task to task, there are still some frequent functions that would be used on every page.
Detailed Design
Where we should integrate our help?
To figure out the most desirable functions we would integrate, I worked with attorneys & their clients to go through the whole process, find out what borders the process.
7 law firms, 40+ attorneys, assistant attorneys, and clients participated in our research to find out what the most features they want to have.
Service flow, spending time of two parties, and user wishlists
The 'Collect Info', 'Prepare', 'Sign' stages are the most time-consuming section, also the sections receive the most complains from. Thus we will look into these stages first.
NOTE: Due to the reading length also some sensitive info I only put two major problems solved by design below.
01 is a high-level solution related to algorithm that I discussed with the developer & engineer teams.
02 is UX/UI design merging our technology to use.
01 Form Filling Issue
The most significant problems that clients & attorneys care about:
01 Repeat Filling
Applicants complained that they had to fill in the basic info every time (e.g. name, contact info, date, etc.)
02 Vague Cognition
Sometimes legal terms are quite abstract. Applicants need specific instructions for the form items. Or they will ask too many questions to lawyers.
03 Missed Filling
Sometimes applicants might skip, or miss some items they have to fill. It takes a lot of effort from both parties to check missing items.
Solutions:
01 Categorize item info into different sets, like basic info, signature, etc. The system will fill the same item category with stored info.
.jpg)
Categorize info, fill the same item category with stored info
Client's view on Form Filler (Signature Pattern)
Stored Patterns
Users can store signature/date and use whenever they need.
02, Designed the filling system in steps, with detailed instructions for each step.
03, Designed a panel to guide users to fill each info by steps, with a progress bar and indicators to tell applicants the situation of their forms-filling works.
Fill each info in steps with detailed instruction
.jpg)
Attorney's view on Form Filler
Progress Bar
Give an idea of the form filling progress.
Detailed Instruction
Each form item will have the detailed instruction, helps clients understand the legal terms, and reduces attorney response efforts.
Unfinish indicator
Users have the freedom to go through each section and fill the information, and track back the unfinished part easily.
02 Merge Legal Statement Library to Statement Mockup Section
Ease the editing of:
Add Clause from library
Add search library, apply and edit to the statement editing.
Wireframe of Clause Mockup System
.png)
Clause Mockup System
Hover '+' to add a clause
When hovering to an empty lane, a '+' will appear.
Otherwise, edit with a normal mode.
Clause index
For each level of clause category, give a backable explorer.
Clause added Indicator
A quick flash sign then disappear reminds clause has been added.
After Design
Launch
After my involvement in the project, the team continued to evolve and polish the product, as well as finesse the finer functional details as the app was being built. Although I was not part of this process, it was great to see most of my work brought to life—an impressive achievement by the team, considering that it was a complete design and build from scratch.
What I learnt
Engagement is the most effective way to comprehend a complex process.
To really solve the problems with smart technologies, it is quite crucial that comprehend the actual workflow and the system of the legal process, document types, and the engagements & tasks between two parties.
I played the roles of two parties and went through the process, to experience the differences, struggles, and needs during the process. It took a lot of effort to study the process and communicate with our attorney partners. Yet only in this way, we could dive into depth to solve the deeper demands and make sure that we won't make mistakes in this serious, complex, and rigorous process.
Structuralize the whole map in a multi-dimensional way.
When facing different flows, items, roles, engagements in a complex system, it's quite important to have a 3D picture to structuralize the whole map to connect all fragments together. When I do that, the exhaustive details were just suddenly formed into an easily understandable structure.