Case studies / Design of an innovative law practice management system
Illustration

Design of an innovative law practice management system

Legal-tech
Case management
ERP
Workflow automation
SaaS
B2B
Duration 1+ year

We helped develop a comprehensive ERP system for law firms, based on research and testing with legal professionals. This system simplifies employee workflows and decreases efforts by implementing automation of the workflows and generating document templates.

Illustration

Project Roadmap

1
UX Research
UX Research
Interview
Сompetitors Research
Informational Architecture
User Flow
2
UX Prototyping
UX Prototyping
Brainstorming
Figma prototyping
3
UI Design
UI Design
Moodboard
Figma Prototyping
Branding
4
Development
Development
Stage 1
Stage 2
Design Review

Research

Client and his team are experienced users of this kind of application. This way, we were able to easily learn about user concerns and goals.

The main questions we wanted to answer during the research stage were: 1. Is client’s request relevant for most of the law practices, 2. What are the most appropriate ways and patterns to implement requested features?

Stakeholder interview

Knowing the business from the inside allowed our client to understand what features needed to be implemented. Therefore, from the very beginning, we understood what needed to be done. The purpose of the stakeholder interview was to gain the same level of understanding of the system as the client.

Competitors research

Next, we analyzed the product competitors to get familiar with common patterns, and define which decisions can be reused and which ones should be avoided.

Since one of the aims of the product was to create a new way of managing cases, we analyzed not only competitors in the legal niche, but also various software from completely different industries, but which perform the same tasks that we needed

Competitors <span>research</span> Competitors <span>research</span>

Information architecture

To build an easy-to-use and clean system with a big amount of features and modules, we need to prioritize and structure the information. This allows us to meaninfully place pieces of information on every page and create self-exploratory layout even for system with high load of content.

Information <span>architecture</span> Information <span>architecture</span>

Project Challenges

For the legal industry
For the legal industry
Set new rules of work: reduce workload, focus on things that matter, and grow the business.
Data-overloaded system
Data-overloaded system
Find the right place for each piece of data and make it easy to find.
High level of customization
High level of customization
Adapt the system to the workflow, not the other way around.

Personas

After the business side and the information hierarchy were clarified, we started gathering information about our users and their problems are. Two main groups of users were identified:

Onboarding
Benson Varghese, Attorney

I want to be the only (or at least first) growth-oriented LPMS.

We want our firms to succeed, grow, and improve access to justice and lawyers. Lawyers learn little to nothing about the business side of building a law firm.

We want to be there every step of the way to help them grow – from first contact through the resolution of the case and beyond.

Tasks
  • Manage case
  • Create case
  • Create contact
  • Communicate with client
  • Create/assign event
  • Send invoice
  • Create/ approve document
Goals
  • Communication with clients
  • Working with leads, cases, documents
  • Tracking time and expenses
  • Planning meetings
  • Creating tasks
  • Communication with attorney
  • Receiving invoices for payment
  • Viewing and signing documents
  • Tasks
  • Goals
  • Painpoints
  • Manage case
  • Create case
  • Create contact
  • Communicate with client
  • Create/assign event
  • Send invoice
  • Create/ approve document
  • Communication with clients
  • Working with leads, cases, documents
  • Tracking time and expenses
  • Planning meetings
  • Creating tasks
  • Communication with attorney
  • Receiving invoices for payment
  • Viewing and signing documents
  • A lot of small work that needs constant repetition.
  • No way to see if client viewed the message.
  • Working with documents requires third-party programs.
  • A lot of logging in information into the system.
  • All important information is in different places.
  • Personal meetings require a lot of time and additional planning of your schedule
Painpoints
  • A lot of small work that needs constant repetition.
  • No way to see if client viewed the message.
  • Working with documents requires third-party programs.
  • A lot of logging in information into the system.
  • All important information is in different places.
  • Personal meetings require a lot of time and additional planning of your schedule

Product Map

Using previously gathered information, we could organize and visualize actions that a user should perform to complete a specific task. The main objectives of this step are to make each task as easy to use as possible, decrease the amount of cognitive load and number of clicks, and also to organize related tasks in the system.

Product Map

UX Prototyping

AAfter we made it clear what to do and how, we started building wireframes from module to module. As a result, we created a fully clickable black-and-white prototype that included all content and actions.

Product prototypes allowed us to approve business logic and confirm that we organized flows in the best possible way

Wireframes

New case creation

Creating a case is one of the important but difficult parts of the system. It starts from the first communication with the lead and filling in information about the lead and possible case. If the firm is hired, it converts to an actual case in an easy way. No need to do the double job, just add missing information and create the case. To make this process even easier, we’ve broken it down into steps related to each aspect of the case: information about the client, the case, and the team that will work on it. When organizing the order of the fields, we turned to the order of questions that are usually asked during the first communication in law firms.

Wireframes
Wireframes
Wireframes
Wireframes
Automation

The work of a lawyer involves a lot of repetitive work, creating the same type of documents and letters, and each area of ​​practice requires a different way of completing tasks. To simplify their workflow, we’ve introduced automation rules that allow users to create their own triggers and actions. e.g. User could define a trigger as changing the status of the Lead Creating a lead triggers the creation of a letter from the template and sends it along with a set of messages at specified intervals, the sent messages trigger the creation of a calendar event. Invoicing, reporting, case management, etc. could be shifted from the shoulders of the law firm to the system.

Automation
Document Assembly

One of the main requirements of the client was the creation of an Advanced Document Assembly. Our research has shown that other platforms do not provide the ability to create and edit templates from documents within the system, which significantly impairs user interaction.

We implemented a file editor right inside the system. Users can create a document from scratch or download a file and use it as a template.

More importantly, users can create conditional fields in templates that are populated when the template is converted to an actual document. No need to rewrite tons of letters to each client. Just answer the question, and the system will adapt the template content to the occasion and fill in the relevant data from the relevant customer.

Document Assembly
Simplifying the workflow

One of the challenges of a lawyer is keeping track of time for various tasks. We have implemented a time tracker that automatically starts counting down the time when a new task starts. It can also be done manually and select which task the user is working on. A lawyer can work on several tasks at the same time, then one of the tasks can be suspended and go to another.

Simplifying the workflow
Inline Editing

Lawyers’ time is expensive in every sense. In order to preserve it and create a convenient and easy interaction with the user, we decided to implement inline information editing, which will allow the user to read and edit information at the same time and does not require additional clicks or redirects that can distract from the current task. To prevent errors, access to inline editing depends on the user’s permissions, and every change is displayed in Activity logs.

Inline Editing

UI Design

When creating the UI, we relied on Fuse - Angular 8+ Material Design since this style was most suitable for the task that we faced with, namely, an understandable, unloaded style.

Full Design System Case
Illustration
Illustration

How we created the Design System

When developing a design system, we looked at the best examples for creating an optimal design system for this product. The best example for this project was the Atlassian design system.

1
Research
2
Created a dictionary, rules for naming entities in the system
3
Setup a Confluence space
4
Created a team
5
Created rules for supporting versioning of the system
6
Setup a library

Basics (B00.00)

Bases are the simplest entities. The whole system consists of them. These are the bricks in the construction of the system. Font styles, colors, icons are all examples of bases.

Fonts
Fonts Fonts
Colors
Primary
@BlueBrand
#517dda
rgb(81, 125, 218)
@Turquoice
#45c2d9
rgb(69, 194, 217)
Support colours
Shades of Gray

Elements (E00.00)

Elements are simple entities, they consist of bases. Not independent and often found in different cases and modules. They do not carry the semantic load by themselves. Are more technical entities.

Elements <span>(E00.00)</span>

Components (C00.00)

Components are intermediate entities between patterns and elements. If you divide the pattern into entities, you get a component.

If you combine elements into some entity, but it is not completely independent, as a pattern, it is a component.

Components<span> (C00.00)</span>

As a result

As a result
As a result
As a result As a result

Happy client
is our routine

Our client
We reached Angle2 for help with designing a new UI meant to replace our outdated software design. We not only got a new user interface, but a vastly re-thought and optimized user experience. Angle2 has become our "go-to" agency for our design needs and I highly recommend them.
Ricardo Pineda NeoDeck Holding
Coherent Design system
Coherent Design system
The product is 16 years old and was extremely inconsistent and not user friendly. We created a system that became an agreed source of truth.
Easy to learn and use
Easy to learn and use
A design system became a collection of shared design patterns, practices, and interactions that allow our team to build quality consistent interfaces
Continuous scaling
Continuous scaling
With description and versioning protocols product became easy to scale and thus opened new opportunities to develop new ideas.

Our perfect team

https://angle2.agency/wp-content/uploads/OB.png

Oleksandr Belkin

Project Manager

https://angle2.agency/wp-content/uploads/VL.png

Viktoria Lozova

UX Designer

https://angle2.agency/wp-content/uploads/AS.png

Antonina Shalaieva

UX Designer

https://angle2.agency/wp-content/uploads/BB.png

Bogdan Bilich

Lead UI Designer

https://angle2.agency/wp-content/uploads/MB.png

Megan Baghaturia

UI Designer

We're
all ears

Fill out the form to start the conversation — we’ll get right back to you

    Amazing!
    Thank you so much!
    See you soon
    This Website uses cookies

    We use cookies to recognise your device and save the actions you have previously made on the Website, to prevent any malicious actions against the Website and its users, to improve users’ experience as well as to ensure the proper functionality of the Website.

    For these reasons, we may share your usage data with third parties defined in our Cookies Policy. By clicking “Accept all cookies”, you consent to store on your device all the technologies described in our Cookies Policy and Privacy Policy, while by clicking “Decline unnecessary cookies”, you decline to store on your device marketing and analytical cookies. You can change your cookie settings at any time by clicking “Cookies settings”.

    Please click on “Cookies settings” to see further information.

    To find out more about the categories of personal data collected and the purposes for which such data will be used, read our Cookie Policy.

    Cookies settings
    Decline unnecessary cookies
    Accept all cookies
    Cookies settings

    We use different types of cookies to optimise your experience on our Website. Click on the categories below to learn more about their purpose. You may choose which types of cookies to allow and can change your preferences at any time. However, be aware that if you choose to refuse or remove cookies, this could affect the availability and functionality of the Website. You can learn more about how we use cookies by reading our Privacy Policy and Cookie Policy.

    We use cookies in accordance with Article 6 GDPR based on the following grounds:

    a) consent of the user;
    b) legitimate interest of the Company.

    We collect the necessary cookies based on our legitimate interest, namely to ensure the functionality of the Website.

    Categories of cookies:

    First-party cookies are those cookies that are placed on the Website by the host of the domain, in particular Angle2 Agency.

    Third-party cookies are those that are placed on the Website by the domains other than the one the user is visiting. As a variety of features that are necessary to ensure the personalised and convenient experience of the user may not be delivered by the Website itself, the third-party cookies are used. We work with different third-party service providers in order to enhance your user experience and to analyse user behaviour on our Website.

    Third-party service providers may use their cookie files on our Website and you may find the relevant information about the use of cookies by them in their respective privacy documents. The list of the above-mentioned service providers is the following:

    c) Google Analytics;

    We only use cookies for the following purposes:

    Necessary Cookies

    We use these cookies to enable the functionality of our Website. You can choose to block Necessary Cookies in your browser settings. Nevertheless, remember, if you block Necessary Cookies, it may strongly affect the functionality of the Website.

    Statistic Cookies

    We would like to use them to understand how users interact with our Website (number of visits, behaviour) by collecting information anonymously.

    Marketing cookies

    These cookies and other tracking technologies are used to deliver relevant online advertising to you on other websites. These cookies are placed by us and selected third parties and enable adverts to be presented to you on third party websites.

    Necessary
    Statistic
    Marketing
    Confirm my choices
    Decline all
    Allow all
    Cookie Control Icon