Improving legal case management
Role: Product design + user research
Team: 1x product manager, 2x developers
Tools: Figma, Replit
I was tasked with improving the legal case page, this page includes everything that is happening in a particular case. My work involved participating in user interviews and gathering data, doing competitor analysis, designing and prototyping.
The starting point was an basic scrollable page separated into sections, filled with data fields and tables.
Unstructured information lacks clarity and strucuture
Unstructured information lacks clarity and strucuture
Bad scanability, too much time spent figuring out what is happening
Bad scanability, too much time spent figuring out what is happening
Long learning curve about how to work in a case
Long learning curve about how to work in a case
Before any design work started, I wanted to understand the problem from the people actually using the product.
Behavioural data
Using PostHog, we analysed how lawyers were moving through the case, which sections they visited and in what order.
Behavioural data
Using PostHog, we analysed how lawyers were moving through the case, which sections they visited and in what order.
Lawyer interviews
We spoke with lawyers who used the platform regularly. They told us their issues and showed us their workflow and what they did in a case.
Lawyer interviews
We spoke with lawyers who used the platform regularly. They told us their issues and showed us their workflow and what they did in a case.
Competitive research
I looked at how other legal software structured case view and broadened the comparison to include project management tools, identifing patterns that had already proven effective in similar contexts.
Competitive research
I looked at how other legal software structured case view and broadened the comparison to include project management tools, identifing patterns that had already proven effective in similar contexts.
The central challenge of this project was density versus clarity, making the whole case scannable and quickly understandable. A legal case contains a lot of information and lawyers need access to all of it at different times. I focused on defining the three different layers.
Always visible
Needs to be seen through the case, doesn't matter what flow the user is working in.
Always visible
Needs to be seen through the case, doesn't matter what flow the user is working in.
Frequently needed
Information needs to be fast to reach, but doesn't need to always compete for space
Frequently needed
Information needs to be fast to reach, but doesn't need to always compete for space
Available on demand
Supporting information, useful in specific flows
Available on demand
Supporting information, useful in specific flows
The redesign made several structural changes to address the problems we'd identified.
Persistent section on top
The most essential, always needed information was given a fixed position that never scrolls away. Orienting the user immediately upon entry.
Persistent section on top
The most essential, always needed information was given a fixed position that never scrolls away. Orienting the user immediately upon entry.
Tab based structure
Main content is separated into tabs, giving instant view of what is in the case and reducing time spent search for a specific piece of information
Tab based structure
Main content is separated into tabs, giving instant view of what is in the case and reducing time spent search for a specific piece of information
Collapsible side panel
Information needed at any point in the case, during a variety of flows is shown ina side panel that can be hidden when not needed.
Collapsible side panel
Information needed at any point in the case, during a variety of flows is shown ina side panel that can be hidden when not needed.
Visual differentiation
Content is also separated by creating different visual elements for specific sections and increasing visual hierarchy of elements
Visual differentiation
Content is also separated by creating different visual elements for specific sections and increasing visual hierarchy of elements
The redesign made several structural changes to address the problems we'd identified.
Data still needs to be gathered about the redesign, however initial feedback from users was positive.