Project Background

Lex Binder is an app for sharing legal documents online. Lawyers and their clients can safely share confidential files and organize them into cases. Lex Binder OCR (Optical Character Recognition) technology finds relevant content and helps lawyers summarize their cases. Using templates, lawyers can add case steps to track progress and keep their workload organized.

My Role

I am responsible for delivering high-fidelity mockups and workflow diagrams. I also provide options for branding and color schemes to choose from. My legal background helps me use proper legal terms and simplify legal processes.

Process

Empathize

Define

Ideate

Design

Prototype

Test

Final UI Design

Step 1: Empathize

Methodologies:

• Competitive Analysis
• User Survey

In order to understand Lex Binder’s position in the market, I needed to compare it to other file-sharing apps. I started with the primary research – a competitive analysis of 6 popular file-sharing apps. I divided the competitive analysis into two groups:

1. Direct competitors (MyCase, Dropbox, Box)
2. Indirect competitors (iCloud Drive, Google Drive, OneDrive)

Competitive Analysis

---

Next, I conducted primary research via a survey. I prepared two types of surveys: one for lawyers to determine the necessary features and another one for clients to better understand their needs.

Based on the brief and the research, it turned out that Lex Binder would be primarily designed for lawyers, who are also the main paying users of the app. Clients (regular people looking for legal advice) are secondary users and they would use the app for free.

My main objective was to determine how lawyers share confidential files with clients, what tools they use to upload files, what problems they encounter while sharing files, and how they organize their cases.

I conducted the survey with 15 participants: various lawyers who had shared files with clients before. I recruited them via an online forum and conducted survey using Google Docs via a sharable link.

Key Takeaways From Surveys:

• Most lawyers receive documents from their clients not only in physical binders (7 participants), but also via file-sharing services (6 participants). The rest of the group use private servers or e-mails (2 participants).

• Most lawyers share legal files via file-sharing services or using private servers (10 participants), whereas the rest share legal documents directly (5 participants).

• Participants use Dropbox, Box, Google Drive, and MyCase services to share legal files with their clients.

• Participants prefer these particular file-sharing services because:
  • all co-workers can use the same tool (5 participants)
  • it’s easy to use (4 participants)
  • it has options to manage sharing permissions (2 participants)

• Most participants search legal files manually by actually reading the text (11 participants), whereas the rest use automated tools such as OCR in Dropbox to search for files (4 participants).

• According to the responders, the most important features in legal apps are:
  • uploading files (6 participants)
  • legal templates (6 participants)
  • to-do lists (3 participants)

• Most participants didn’t encounter problems sharing digital legal files. One participant experienced occasional technical difficulties such as losing files.

• Problems encountered while sharing digital legal files:
  • "I need to click on the file to make sure it was shared with others" (2 participants)
  • "I lost files because of technical problems" (1 participant)
  • "It's difficult to organize files in a comfortable way" (1 participant)
  • "When two people work on the same file and save changes, editing problems occur – there is no version control" (1 participant)
  • "Firstly, it's not possible to share files at once. Secondly, I see which files I share only when I click on them. When I see the list of files, I'm not sure which ones are shared with others." (1 participant)
  • "I need to share files one by one, which is time consuming" (1 participant)
  • "When I use OCR, it doesn't highlight the searched terms" (1 participant)
  • "It's difficult to track changes" (1 participant)

• Problems encountered while sharing legal files directly:
  • "Some lawyers changed the order of legal documents" (1 participant)
  • "It's not possible for many lawyers to work on the same document at the same time (live document)" (1 participant)

• What do lawyers do with files when they finish the case?
  • "I name them, print them, and then archive in physical binders" (10 participants)
  • "I only store them physically in my office” (1 participant)
  • "I store them physically in a binder and on the server managed by the legal office" (1 participant)
  • "I take the binders to the archive room and archive them in Dropbox as well" (1 participant)
  • "I store them in a digital form and return the physical ones to the client" (1 participant)

The third step was developing two user personas and empathy maps based on my research. I also prepared a detailed "Research Summary" - you can read it here.

User Persona 1

User Persona 2

Empathy Map 1

Empathy Map 2

Step 2: Define

Based on the provided brief, competitive analysis, and survey, I prepared circular graphs to illustrate business, user, and technical goals of the project.

Project Goals

Then, I compared survey results and requirements included in the brief to prepare a feature roadmap.

I divided the feature roadmap into three importance categories:

• P1: Must have
• P2: Nice to have
• P3: Surprising and delightful

Feature Roadmap

Step 3: Ideate

Taking into consideration technical requirements (provided by software developers) and the feature roadmap, I designed two separate interfaces: one for the lawyers, and another for their clients.

I created two sitemaps to determine how many tabs were needed for each of the interfaces.

Sitemap for clients

Client interface is simpler than the one for lawyers.

It includes only two tabs:

1. Cases
2. Lawyers

Cases tab lists all cases created by the current client. Each case includes uploaded files and lawyer's name responsible for the case - or a lawyer's name chosen by the client.

Lawyers tab lists all lawyers chosen by the client.

Sitemap for lawyers

Lawyer's interface consists of five tabs:

1. Leads
2. Files
3. Cases
4. Templates
5. Clients

Leads tab is the starting screen where lawyers choose cases they want to represent. Cases are listed in reverse chronological order, from the latest to the oldest.

Files tab lists all files uploaded to the app, organized by cases. All files can be searched for, regardless which case they belong to. This helps locate files that were mistakenly attached to a wrong case.

Cases tab shows all cases conducted by the current lawyer.

Templates tab consists of legal templates which can be used to perform steps for new cases.

Clients tab lists all clients managed by law firm.

I also created the task flow diagram to show how users navigate through the app while performing specific tasks. I illustrated the user account creation process, the new case creation process and the process of taking (or declining) the case by the lawyer.

Task Flow

The next step was to build user flow to determine how many pages I needed to design to properly perform all tasks.

User Flow

Based on the brief, my research, sitemaps, task and user flows, my design would consist of following screens:

• 1. Splash screen
• 2. Signup screen
• 3. Complete signup screen
• 4. Confirmation screen
• 5. Login screen
• 6. Complete login screen
• 7. User profile page
• 8. User profile page for a lawyer
• 9. Lead listing page
• 10. Lead detail page
• 11. Lead listing page — read items
• 12. File listing page
• 13. File detail page
• 14. Case listing page
• 15. Case detail page
• 16. Case - steps page
• 17. Template listing page
• 18. Template detail page
• 19. Client listing page
• 20. Client detail page
• 21. Case listing page - for clients
• 22. Case detail page - for clients
• 23. Lawyer listing page - for clients
• 24. Lawyer detail page - for clients

Step 4: Design

Based on legal app comparative analysis and clients’ interviews, I prepared "Lex Binder Color Style Tile" including logo, fonts, and colors used in the app. I decided to go for a blue color which represents trust, loyalty, wisdom and stability. The blue color also communicates significance, importance and confidence. It is usually considered a corporate color and it is often associated with intelligence, unity and conservatism. The color blue is also used in the term "Bluebook" (literally a blue book for lawyers) - a uniform system of legal writing. Many law students, lawyers, judges and scholars frequently rely on the Bluebook.

Color Style Tile

I summarized all my findings and deliverables. Then I sketched the first version of all screens.

Sketches

After initial wireframing using Sketch, I simplified the sign-up process by moving most input field placeholders to the user account profile. Finally, I left only the e-mail and password input field placeholders. This sped up the sign-up process and minimized friction during user registration.

Wireframes

Step 5: Prototype

By combining all mid-fidelity wireframes, I created the first prototype of the app. Mid-fidelity prototypes are perfect for initial iterations before the design is locked.

Step 6: Test

The next step was to gather usability testing participants and to prepare usability test scenarios. I focused on active lawyers who use mobile apps daily. I recruited them via my personal network as well as online forums for lawyers. All participants were within the 21-65 age range. For potential clients, I was able to test usability only with a single client. I conducted the usability testing in person via Skype shared screen and Marvel app's link to the prototype. I used two scenarios for lawyers and one scenario for the single client.

Tasks for Lawyers

SCENARIO #1

Let’s assume you need an account only for working purposes. Please sign up for an account, then log in. From incoming cases, choose “Non-Disclosure Agreement”. Read the description and take the case.

Task #1:

1. Sign up for an account
2. Log in
3. Choose the case
4. Read the description
5. Take the case

SCENARIO #2

Let’s assume you’re working on Anthony Adams case. Go to Cases and choose “Anthony Adams” case from the list. Then, add steps using a template – choose “Eviction Notice” template located under All Templates/Real Estate Law.

Task #2:

1. Choose a case
2. Add steps using a template
3. Come back to cases

Task for a Client

SCENARIO

Let’s assume you need a lawyer for your divorce case. Please sign up for an account, then log in and choose an appropriate lawyer for you case by clicking one from the list.

Task:

1. Sign up for an account
2. Log in
3. Choose a lawyer

I conducted the first usability testing using the mid-fidelity prototype. I recorded usability testing to reference it in the future.

Key usability test findings:

Lawyers:

• participants completed tasks without any issues
• they liked the overall look and feel of the app
• they thought the workflow was smooth
• during the second task, one lawyer suggested clicking on the three-dot icon would be more intuitive than clicking on the "Eviction Notice" text

Client:

• didn't have any problems finding what she needed
• she described the interface as "simple and straightforward"
• she liked the minimalistic interface and the idea that there are only two tabs: “Cases” and “Lawyers”

Changes

After receiving user feedback, I refined wireframes to make them more intuitive. I decided to add another screen for templates. I used the three-dot icon for choosing templates. After clicking the three-dot icon, users will see two actions: “Use the template” or “Share the template.” By clicking on the text, such as “Eviction Notice” or “Commercial Lease Agreement”, users will be redirected to the “Template Detail Page” with the template description.

At this stage, I started incorporating changes using a high-fidelity prototype. I prepared high-fidelity wireframes using Sketch – and then combined them in InVision App. I also changed the "Leads” screen by adding the "Read" text to indicate which cases were already seen by lawyers. This way it’s easier to distinguish new incoming cases from cases already read.

Step 7: Final UI Design

I made changes based on the usability testing and incorporated them in the final UI design as well as the high-fidelity prototype. Below is a brief excerpt from my UI design:

Visual Design

The last step involved creating a UI Kit including:

• fonts
• colors
• logo
• buttons
• icons
• other mobile components for future reference

UI Kit

Summary

The main challenge designing Lex Binder app was simplifying a complex set of steps for two types of users. I decided to split the process into two types of interfaces: one for lawyers and another one - their clients. This separation of concerns keep interfaces clean and simple for both user types. Another challenge was managing a small mobile screen to include all needed features. I decided to favor simplicity and readability over functionality by hiding less frequently used features under advanced screens.

If I have more time for usability testing, I would invite more potential clients of Lex Binder app. It would be useful to hear feedback from more regular clients – not just from the lawyers.

Here's the case study.

---

Next steps:

• → implement the next priority features
• → conduct another usability testing for new features
• → conduct more research from the clients' perspectives
• → update the UI Kit
• → design screens for the desktop version of the app