Product Design and User Experience
Product Design and User Experience
The best legal research tools enable attorneys to interpret the law efficiently and avoid costly mistakes for their clients.
Casetext's mission was to make the law accessible and understandable to everyone. Serious research powers wrapped in elegant use of white space and beautiful typography created a pristine reading experience. Time-saving features complemented other tenants of the design language, which consist of focused tasks and intelligent use of scrolling. You can read more about them below.
The average user on legacy tools spends upwards of 14 minutes on a case page, an eternity in internet time. Features were developed to maximize efficiency, such as the "Heatmap" – the multi-colored blue strip on the left-hand side, which shows the areas of the case that have been cited most heavily, along with the addition of summaries and key passages just below the case title.
A context panel paired community commentary with a list of cited secondary sources, providing multiple lenses for better analysis and interpretation of opinions.
In another example of focused tasks, when a user hovers over the heatmap, a document outline is presented as an overlay in the space previously occupied by the court opinion, allowing for easier navigation within the document itself.
Selected passages could be bookmarked and copied, including the citation to revisit in a later session, or inserted into a new legal draft in LegalPad.
View LegalPad
Legal research doesn't follow a linear path. Attorneys often find themselves lost amidst many tabs and windows while they evaluate multiple source materials. We designed an interaction to alleviate this pain point. Clicking on any item in the context panel loads an article or citing document on a layer just above the case. This way, the reader can peek into multiple articles and documents while never having to navigate away from the case, thus streamlining their research and giving them a sense of place in their process.
Another one of the main tenants of the design language is intelligent use of scrolling. Scrolling is the easiest and most ubiquitous user interaction on the web. A lot of thought went into how to best leverage scrolling behavior on Casetext. The intention was to create a perception that the UI was intuitive and adapted itself to the reader's needs – signaling important passages, becoming visually quiet when it mattered most and even resetting itself once a user has scrolled away from the selected passage. Clicking on a key passage would then filter the contents of the context panel to only show items directly related to that particular passage. Here color is used to signal the relationship between the selected passage and the resulting context panel items.
Focused tasks are one of the tenants of the design language. Rather than unnecessarily obstructing the reader's view, modals are selectively placed within their appropriate contextual surroundings. In this view, a list of jurisdictions overlays the citing cases section in the context panel and fades away once a jurisdiction(s) has been applied.
Occasionally I like to dabble in motion design, especially if it effectively portrays a concept. Adding motion to a design is a powerful tool. This video shows a concept of a search layer in action. I designed and animated this demo for a presentation of what search could be on Casetext.
We wanted a compelling way to introduce the product while touching on features of the recently released case page and legal publishing tool. This video was used to demo the concept to our internal team for feedback and ultimately used as direction for implementation.