top of page
Project Description
Ailaw banner.jpg

Form filling Tool for Legal Petitions
Product Design, 2020.

Form filling Tool for Legal Petitions


My role:

  •  Product Designer


Work Project

(In progress)




  • 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. 



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.


Design a product that can ease the repetitive and redundant labor work in the legal process for both attorneys and clients.

mission .png


Organize and compose a multi-dimensional product flow about a complex circumstance that involves two different parties from raw ideas.

Anchor 1

System Design

Aim user group


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








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

Anchor 3

Design information architecture with different UX flow

From the main structure, add some of the branches to form the whole application flow into wireframes.

ailaw product illustration.png

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

Frame 176.jpg

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.



01 Categorize item info into different sets, like basic info, signature, etc. The system will fill the same item category with stored info. 

Untitled_Artwork (2).jpg

Categorize info, fill the same item category with stored info

Client's view on Form Filler (Signature Pattern)

Attorney-Landing-dashboard version-1.jpg

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

Untitled_Artwork (3).jpg

Attorney's view on Form Filler

Attorney-Landing-dashboard version.jpg

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.

Anchor 2
Anchor 4

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.

tech merge.png

Wireframe of Clause Mockup System

Untitled_Artwork (1).png

Clause Mockup System

Desktop - 23.png
Desktop - 24.png
Desktop - 25.png
Desktop - 26.png
Desktop - 27.png
Desktop - 28.png

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.

Anchor 6

After Design


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. 

bottom of page