CALI A2J Doc
The Center for Computer-Assisted Legal Instruction (CALI) is a nonprofit that develops, hosts, and maintains the project Access to Justice (A2J) Author®. The goal of this project is to help legal aid attorneys, court staff, and law students create web-based A2J Guided Interviews® for use by unrepresented litigants and others in need. In short, providing an interactive system for helping people ill-equipped to participate in the legal system more easily navigate it.
The history of the software is interesting as well. The A2J project started out as Flash application for web browsers which communicated with a PHP backend in 2007. In Version 5, A2J made the leap to JavaScript, completely replacing Flash with plain JavaScript and jQuery. The decision to get off Flash was definitely the right choice, but the jQuery codebase was tough to make changes to as everything was interwoven. To stay on pace with requests for new features, the project needed a consistent architecture to build from. This is where Bitovi came to the rescue with CanJs, a JavaScript framework that balances innovation and stability.
CALI hired Bitovi to build A2J into a modern, robust JavaScript application. Using CanJs, the development pace greatly improved and features were built as well isolated components that could be reused throughout the app without the spaghetti of jQuery. Observables played a huge role in keeping all facets of the app in sync while changes were being made and leveraged the existing codebase while shipping newer features in Can without refactor and rewrite costs for the entire application. It was not too long before the server-side needed assistance from NodeJs to stay in stride with the front-end’s development. The project was on the right track.
In July 2017, CALI wanted to build an ambitious new feature for their authors who build the interactive self-guided forms. The existing Document Assembly Tool (DAT) let authors design the final documents generated from the interviews with variable substitution and the rich text editor tool CKEditor. These documents would be rendered as HTML on the server and converted to PDF using the WKHTMLtoPDF tool. This solution was alright, but if you have ever tried to replicate a legal form in Microsoft Word you know how hard pixel-perfection is to achieve. Many authors turned to third party solutions to speed up this process. These third party solutions are expensive and out of reach for many people hoping to use A2J. They needed a more intuitive way to link interviews to output PDFs directly in A2J.
CALI was my first client with Bitovi, and designer Jamie McCue and myself began with a two week discovery phase. These two weeks were spent researching technologies at our disposal and gathering feature requirements and expectations to build this new tool A2J Doc. (I got to name it!) By the end of the discovery phase, we knew what technologies we were going to use, what the most challenging parts of the project were going to be, the execution plan and dependencies between individual tasks and interactions, and even a barebones prototype validating the technologies we chose. CALI signed off on our plan to build A2J Doc in ten weeks.
The project kicked off with myself and designer Ryan Wilson getting into the gritty details of what this new tool had to provide and how to build a first-class user experience that would make this tool a pleasure to use. Long story short, the ten weeks went amazingly. This article would be much longer if I delved into exactly what happened so I will only mention the highlights and things I found interesting along the way with what we were building.
A2J Doc
Our solution was quite reasonable. Instead of authors replicating a form in a text editor, they would upload that form as a PDF and we would overlay interview responses directly onto that base PDF. The result being an identical form with customized answers to questions. This much simpler workflow introduced new challenges that we met with some pretty cool tech.
For the interface I implemented a custom drawing solution which allows authors to draw, move, resize, and assign boxes (much like in Microsoft PowerPoint) to variables in interviews. These boxes were drawn directly on top of the PDF rendered in the browser using the great PDFjs library by Mozilla.
When it finally came time to merge interview answers into the PDF we used the excellent HummusJs project on our Node server to apply a series of “patches” to the PDF and spit out a filled-in PDF. Both PDFjs and Hummus are lightening fast, allowing us to build a very interactive UI without long pauses waiting for all this complex work to be done.