ailaw product illustration.jpg

Green Card Bulletin Widget Design/Develop

@Ailaw

*A little story of the project*

During one of our monthly meetings with our partner law firm, an attorney said she had to jump because she needed to finish the Green Card bulletin report for all the applicants, which could take her 1 or 2 days to finish. 

At that time I was learning Python. I helped her to crawl info from the USCIS website with my Python scripts... Just for practicing. But later then this little script functioned well so they asked me to keep going. I then start the real product design process on it. 

This widget automates the process of track Greencard bulletins from the USCIS.

In this project, I functioned more like a developer. Despite designing the interface, I was also the one to initiate a Python script to crawl data into excel, I then reorganized the data, and designed the data panel as a rough prototype.

Later then I got help from an engineer on the codes thus I can focus on the designs. We finally finished and launched this project in a month.

My role:

  • Product Designer   /Developer

Type:

Work Project,

finished

Time:

07.2020 (1 month)

Team:

  • Product Manager

  • Engineer

Background

title.png

AILaw is a cloud-based legal technology platform that can greatly reduce repetitive and redundant labor work in non-litigation fields such as immigration petitions.

A tedious, time consuming work

title_edited.jpg

Ease the process of Bulletin Report

For immigration lawyers, there’s a work called Bulletin Report. Attorneys will have to gather the updated information from the USCIS website for the Green Card candidates, analyze and report to them. It normally takes 1-2 days to finish this work per month. 

 

In general, it's a must-do, time-consuming chore.

The major problems of this work are listed below:

 
 

Major Problems

Group 104.png

For lawyers, only 35% of the page info is effective.

Effective Info.

01 Redundant contents

 

The USCIS website is not designed for people who frequently use it. It contains lots of interpretative information about the immigration policy. So for the lawyers, it contains too much redundant information.

 

This structure makes the information scattered so the reading experience is quite unsmooth.

And because of this structure, the effective information only takes a 35% percentage of the page.

Process of finding a special case's bulletin

Group 103.png

02 Excessive Navigation Load

There are 5 steps to locate a bulletin change for a single case. It's almost impossible to have a quick comparison between different countries, visa types, time scales, and bulletin differences. If they do so, they have to navigate back to the first step to search for the information again.

So the Lawyers always need to have notes to record the bulletin change and analyze it.

Group 100.png

Data format on the USCIS website

03 Unfriendly Data Format

If no one specific it, it's hard for viewers to cognize the date info from numbers and words in this way. And since the data don't store in a digital way, it's hard to calculate and analyze the data directly. 

Develope Prototype 1.0

01 A quick idea I realize:

At that time I was learning Python crawler, so I quickly realized that it can help automate the process. We can simply crawl the static data and transfer that into digital format to facilitate calculations.

29778.jpg

Manually gather data from the USCIS

Reconstruct.jpg

Crawl data from the USCIS with scripts

389.jpg

Analysis data from scatted info

Visualization.jpg

Display data in a friendly format

02 Initiate prototype 1.0

I wrote a simple Python script to crawl information and stored it in excel, also transformed it into digitals.

My early crawler of the prototype

image.png

03 Layer down data & Visualization design

And then I layered down the data and visualized it. There are 2 types of display for the data. One is the Gantt chart and the other is a combination of two charts.

The Gantt chart is pretty intuitive in that it can show the trend intuitively and easy to generate a single case report. But after rounds of discussion, we finally chose the second format. Because the Gantt chart cannot present multiple types of Visa in a single view. If the lawyer wants to report multiple visa cases, it will make the report too long. The combination of two charts can solve that. It can display multiple visa types at the same time and doesn't lose the trend details that much.
 

Layer-down the data gathered from USCIS

Lark20200716-160315.jpeg

Research on different types of charts of data display

2.jpg

A quick data visual demo on Tableu

c95879fe-540b-4531-bfa8-cf07ec61d93b.png
 

I showed this prototype to my boss back then, then I got help from an engineer in our company and he helped me optimize the code also followed my design, and code it out with Vue.JS.

Gather scattered information

diagram1.jpg

Reorganize the info and gather it on the same chart, so that users don't need to find information back and forth. It's convenient to compare info in different countries, different Visa types. And can quickly trace the previous year's data. Reconstructing data brings all information to the same page, it greatly reduces the navigation load.

Browse dates and view charts at the same time

diagram3.jpg

Search the date and preview the chart at the same time. Users can now view charts without jumping around different pages.

Design and Launch

Intuitive info reading

diagram4.jpg
Replace the unfriendly and confusing date formats with digits and chart format. Keep the data informative while reading easily and intuitively.

Responsive and Touch friendly

ezgif.com-video-to-gif.gif
ezgif.com-video-to-gif (2).gif

Supports touch friendly tap targets and responsive window handling. That means it’s great for big and little screens (and fingers) alike. It keeps the data display properly when using small screens.

After Design

We later on designed the function that will run the script every day to check if there's any update and if there is an update we will crawl it down into our database and send notification/email to our clients (lawyers).

This widget significantly reduces the checking process from 2 days to 10 seconds, automates the process of tracking, analyzing, reporting, sharing to both lawyers and Green Card candidates. 

It gained 126 subscriptions from applicants and lawyers in the first week launched.

I left the company after it launched, and now it's still there. It seems didn't get updated after I left. To visit this project, click the button below.

What I learnt

A close look of front-end  & back-end

This project allowed me to work closely with engineers directly on codes. I have learnt a lot of Python structures during this project, and am happy to see an actual project with my codes--not only with front-end but also back-ends.

A broader insight of a whole project

Also through this project, I got a chance to deeply dive into the structure of web application development and implementation of a web product. I expanded my view angle in this project and gained a broader insight into a whole product development level. 

Insights into the problem-solving method

And also the most important thing is, it does help. I think for many people that need help, sometimes they don’t even realize that some work they were doing could be solved in this way. I think in the future, I really want to bring this problem-solving approach to help more people by listening to them.