Shuang Liu


A web application for legal services

ClariLegal LLC
Colin Chen
Lauren Gauldan
Alexander Georges
Janet Li
Shuang Liu
09/2016 - 02/2017
User Interview, Competitive Analysis, Card Sorting, Interaction Design

The Mission of ClariLegal

ClariLegal is a Boston-based legal technology start-up. ClariLegal is a vendor management platform and marketplace that simplifies the buying of services needed for legal work.

When general counsels outsource litigation work to law firms, they lose control of which vendor services the firms choose and the cost of vendor services. Law firms don't care as much about the cost of vendor services, because general counsels pay the bill. Law firms feel it is a burden to look for new vendors and many vendors lack the opportunities to get jobs. ClariLegal tries to revolutionize the legal service process by providing a platform where buyers (general counsels and law firms) can post jobs and vendors can bid for jobs.

The Challenge

The ClariLegal web application is a business-facing product. Currently, the legal service purchase process lacks industry standards. ClariLegal aims to provide form templates to standardize proposals. In addition, legal practitioners are infamous for being slow to adopt new technology. The ClariLegal web application needs to be easy to understand and easy to learn.

How might we create designs that make the complicated legal service application easy to use?

Design Overview

For this project, we focused on the buyer side. We designed the dashboard, new project and job creation flow on the job page.

Process Overview

Our team developed an interaction map to understand the current workflow, conducted a competitive analysis, used heuristic evaluation to examine usability issues with the current design and interviewed users to understand their needs.

Heuristic Evaluation

User Interviews

Team White boarding


Buyers' Dashboard

Legal service buyers use the dashboard to manage their projects. General counsels might manage lots of projects at the same time, and each project consists of many jobs and each job includes many tasks.

Dashboard Old Design

The old dashboard lists projects by date. Under each project, jobs are listed with tasks nested inside.
  • Poor scalability (imagine if each job has 50 tasks)
  • A progress bar does not reflect real job status
  • Too many progress bars

Buyers care about "BTW"

We started with white boarding as a team. We generated lots of ideas from the heuristic evaluations. However, when we sat down as a team and discussed the dashboard design changes, we realized that we couldn't make decisions without conducting extensive user need finding of the target users.

We conducted user interviews to delve into what users care about. Legal work is time and budget sensitive. Buyers care about whether a job is done on time and within budget. Budget, Time, Work Progress are the three things buyers care about.

sketches and wireframing

Dashboard New Design

1.1 Filter Design

Old Filter

The functionalities of the old filter failed to satisfy some of the major use cases.
Screenshot of existing filter

Filter Use Cases

  1. Search for a particular job.
  2. Look for jobs with warning signs.
  3. Look for jobs done by a particular vendor.
  4. Look for jobs with a certain status.

Use Case Analysis

  • Warning signs are relative. 100% budget usage is not bad is the progress is also 100%.
  • Job names might not have semantic meaning (pet names are often used for obfuscation).

Filter New Design

Job Page

Jobs are the key components of the ClariLegal app. Buyers create jobs and vendors bid on jobs. Each job has many tasks. Buyers come to the job page to check the progress of tasks and add new tasks.

The old design was too crowded

The old design for job management showed every piece of information on the same page.

What do buyers look for?

The voice of the buyers

"I don't need to look up vendor information unless the vendor did something bad and I need to fire them."
"Once the job started, bidding information is not important to me anymore."
"I need to look at the job description to understand the scopes."

Card Sorting

We asked a buyer to rank information by how often they need to see it. Tasks are on the default tab, because when buyers come to the job page they usually want to add new tasks and check tasks' progress. For information which buyers don't usually need to see, such as bidding history, vendor info and statements of work, we hide them under the information tab.

Cards ranked by a buyer

Job Page New Design

The new job page organizes information into three tabs, based on how often buyers need to view each section.

1. Task List

Each job has many tasks. Buyers create tasks and vendors work on tasks. Buyers request vendors to submit task status reports at a certain frequency. Buyers care about the progress, budget usage and deadline of a task.

Design Iterations

Iterations of milestone design

Task Tab New Design

This new designs aims to make it easy for buyers to check the progress on tasks. The order of tasks are determined by is_completed? (incomplete tasks are listed on top). Incompleted tasks are ordered by deadline (closer to deadline are on top) and completed tasks are ordered by latest updates.

2. Job Details

Scope information is grouped by category.

3. Inbox

Vendors ask questions about jobs or tasks.

Create a New Job

Buyers use the job create form to create new jobs.

The old form is too lengthy

The old design of the job creation form is a single long form. There are a few issues with this form.
  • A super long form is tedious for users to fill out.
  • There is lack of explanation for fields.
  • If a user exits the page during the process, the user loses all progress.

New Design

Step 1: Re-construct information hierarchy

Step 2: Break down the long form into steps

Form inputs are saved along the way.

Step 3: Better UI elements

New Job Creation Form

Create a Project

Old Design

The old design only asked users to enter a name for the new project. The project name served as a folder.

Buyer Interviews

We interviewed buyers about how they manage projects. The existing design failed to consider buyers' needs.
  • General counsels manage a team of people who are responsible different cases.
  • General counsels with many cases might not be familiar with all the projects.
  • Users tend to use pet names for projects to protect information.

New Design

The new design allows users to add descriptions for reference and assign the project to a teammate upon creation.


Throughout the process, I learned how to deal with ambiguous requests and how to define the project scope. One of the biggest challenges was the combination of a lack of domain knowledge and limited access to legal practitioners. We knew almost nothing about legal work, but unfortunately, it is nearly impossible to get pro bono interview sessions from lawyers. We have been communicating with our client to get help with getting access to potential and existing users. I also sat on sales calls with our client to observe how new users react to the product.