Whitepaper

Lessons Learned Designing Legal Tech

Lesson 1

Applications in Legal Tech don't have to be boring.

While the law may be difficult to understand (on purpose) – it’s our job as designers to take that and make it digestible and one way we can do that is by making it fun and engaging. Oftentimes with legal information for the public, people are used to pages and pages of instructions needed to fill out a form. There is often so much content that it is hard to follow where to start or what to do.  People are sometimes afraid to make legal information stand out. We try to do the opposite as we find that it helps engage users. By using bold fonts and bright colors and limiting the amount of text per page we can engage with users to get them to complete tasks in a manageable way. 

So, let's take a look at few examples of that:

Read the f*ing directions! It displays mail in ballot instructions by state. In this case you can see that Alabama's rules for mailing ballots were pretty f*ing difficult!
Law Help New Mexico. Here's a bold state law help site that helps users quickly triage their legal issue.

Lesson 2 

You can’t show everything. If everything is important, nothing is important.

This is one of the most common  issues we run into – especially when clients are lawyers. Sometimes we ask what the most important thing to show is and they usually say “Everything is important”.

Of course, while often true (it is important for lawyers to give their clients all of the information that might be applicable),  prioritization and hierarchy are critical tools that are part of UX design. Through the use of design hierarchy we focus on the primary action. Secondary information that might not be applicable to all users can be conditional or hidden behind tooltips.

Florida Law Help. "Just answer a few questions..."
Justicia Lab. Tooltips show additional information.

 

Lesson 3

Adding visuals can sometimes make things much clearer.

Sometimes we find that if words aren’t working a visual might be needed. Words are easily scanned and are sometimes enough on their own. But if you are trying to describe a spatial relationship, words might not be enough.

So, to visualize this – we’ll give you an example. Here’s a questionnaire for a contract automation application that tries to determine where a user always inserts specific language into a contract. 

Blackboiler (before). In this example, words don't really describe the context.
Blackboiler (after). Here you can see visual icons that help the user understand where their text will be inserted into a contract.

Lesson 4

Making something simple can be really complex.

Everyone wants something simple; they say just make it simple, we like Apple’s design etc. But making the law simple is hard (for many reasons) and this is often our goal. 

Why is it hard? Here are a few examples:

  • Every country/state/jurisdiction has different rules
  • Lawyers often need to make sure their clients are informed
  • Forms often require many levels of conditional logic depending on each client's needs

Let’s take one of our recent projects, Legal Tune Up as an example. Below, we can see a flow chart of what currently happens with suspended licenses in Wisconsin. First, we had to understand the reasons a person’s license might be suspended and for each reason what were the actions necessary to have it reinstated. We also had to learn about all of the nuances for different counties and courts.

Legal Tune Up. Existing flow for license reinstatement.

So how do we simplify it? We start with sketching or wireframes and then iterate on designs and test with users.  We test with wireframe prototypes – it doesn’t have to be perfect to get significant feedback from users.

Legal Tune Up. Original sketches for initial flow.

Legal Tune Up. The above wireframe prototype was used to test with real users for feedback.

From there we iterate, add color, typography, and details. 

Legal Tune Up. Mobile web app design

And we ended up with an app that lets the user enter just their name and date of birth. The app searches public databases to return results on multiple legal issues – one being licenses. From there they can take action and fill out documents online as needed and understand their next steps.

Though this last image may look simple, it took a lot of design iteration and research to get there.

Lesson 5

Most people looking for free legal help will use their phones as their computers.

If you’re designing for the public - Mobile first is important! Many people use their phones as their primary means of accessing information. It’s important to start designing for mobile screens from the very beginning – in wireframes. Below is an example of how we did this for our client Justicia Lab:

Justicia Lab - Here’s a public website for immigrants to come to and check if they might qualify for any type of immigration status. The user must complete a form that takes roughly 20 minutes – and many will be doing this on their phone. We designed this form with mobile users in mind. Specifically, we tried to reduce the amount clicks between each question as well as group similar questions when applicable. There is also a progress bar and save and exit button in the case that the user can’t complete it in one session. 

Lesson 6

Don’t assume that users want to have a conversation to solve their problem or know what to ask a Chatbot/AI 

A few years ago we designed our last chatbot and thought that was it! Now with Chat GPT and LLMs, it seems that everyone wants to include some type of chat interface to quickly help their users find what they are looking for. 

In some research we have found that users are often wary of using a chat interface. They often don’t know what type of prompt to enter or do not expect the response to be helpful. In order to overcome this, it is important to give the user prompts and suggestions of what can be searched. It is also helpful to show the types of outputs that can be provided to the user as well as a history of recent searches. 

Example: Here is an example of a landing page for an AI tool we designed that allows users to find information within their law firm on deal points, matters, clients, and people.

Lesson 7

AI needs to be validated by a human especially when dealing with legal and life altering events

We are seeing AI being introduced in many fields. But in legal and especially when dealing with life altering events, it is important that the results produced by AI be validated by a human.

Let's look at the example from Unbail below. The goal of the unBail project was to provide relevant case information, next steps, and resources to defendants after they have been arrested in the form of chat messages. These chat messages were structured using AI from unstructured data. But in order to make sure that the AI structured the messages correctly, we designed a simple dashboard for reviewers to make sure each message is accurate before it goes out.

Unbail. A human reviews each AI generated notification that goes out to users regarding their upcoming court date.

Lastly…

Whatever you do, make sure you consider design.

So, whatever you do, make sure you at least consider design, whether it's following these lessons learned, hiring a designer or at the very least try to avoid throwing everything on the screen with cheesy images of people in suits talking to their clients.