Reinventing Deposition Designations
This work is my reconstruction of annotation mechanics in the Case Builder deposition management platform. It started as a highlights redesign, which I developed into a broadly useful annotation system to generate millions in sales.
Product context: Case Builder
Case Builder offers litigators a central destination to manage case info, materials (ie, depositions and exhibits), and analysis artifacts for developing strategy. These features are relevant to this work:
The trial designations opportunity
Designations come into play when depositions are used at trial. Legal teams identify strategically significant details in depo testimony, then coordinate their inclusion with opposing counsel and the court. It's a nuanced, multi-party process with outsized impact on legal outcomes.
In researching the problem, I encountered tremendous diversity in how jurisdictions require firms to organize and document designations, resulting in process and tooling fragmentation. I spoke with legal teams using manual offline workflows to manage multi-party coding. This presented a huge opportunity... transcript-compatible multicolor coding would make Case Builder much stickier for lit support teams.
Business motivation
Users' motivation
More about designations:
The significance of highlights
The designation lifecycle
Time constraints and competing interests
Niche offline workflows
The existing multicolor gap
I knew that to serve designations, annotations had to be flexible enough to meet court-mandated coding guidelines anywhere in the US legal system. Our existing highlights fell short as legal teams used them in unexpectedly diverse ways.
The product applied a single yellow highlight color for all annotations, so color coding was impossible
When annotations overlapped, yellow highlights superimposed, rendering PDF exports illegible
Users were forced to manually apply highlights after PDF export… a major pain point
One professional services offering was handled using Acrobat… we were failing to patch this glaring gap
High-impact customer feedback:
Partner — Mid-size regional firm
Partners — Full-service national law firm
Partner — Large regional corporate firm
Partner — Small boutique firm
Driving creative problem-solving
Customer signal offered plenty of prescriptive ideas scoped to niche workflows:
Add an option to configure additional highlight colors at the point of export
Allow users to choose a different highlight color instead of yellow
Add new 'party' and 'designation' objects to the system, with dedicated management pages
They ideas favored addition and compounding complexity. They initially pigeonholed the team's imagination. When I joined, I challenged the team on whether it was right to take these requests at face value. I explored how color-coding could support non-designation workflows, too. By solving for transcript-compatible multicolor highlights broadly, we could offer users much more value for a similar build cost.
Initial design explorations
To experience user frustration firsthand, I had engineering spin up a sandbox that I used during research to understand the status quo. I developed three theories to resolve the gap. Each was a distinct approach to building multicolor highlights as a foundation for comprehensive designations management.
I intentionally didn't mock full platform effects, instead focusing on the highest exposure touch point: creating annotations in the transcript viewer. This kept mocks lean and timely as I used them to communicate user impact and drive stakeholder alignment.
I love shaping creative solutions with people who think differently than me. For this and all work, I create feedback loops that extend beyond the project's lifecycle, including with functions outside of the typical product org. These are the roles I collaborated with most often for this work:
Product management
Engineering
Legal domain SMEs
Other designers
Design systems team
I'd brought the team to high confidence around Path #3, but my opinions were loosely held pending external validation. I organized qualitative research sessions with subjects in six law firms, focused on roles with high designations exposure. To align the CS Disco, I outlined goals, hypotheses, logistics, and question rails. I workshopped content with engineers to get them excited about user engagement.
Research spec excerpts:
My hypotheses and objectives
Participants and method
Guiding questions for internal reference
I used these conversations to kickstart recurring research relationships with several subjects. In the years following, I'd continue talking with them even as my focus shifted to Ediscovery, where I leveraged their expertise to problem solve on a wider scale.
Key insights:
Use cases beyond designations
Emphasis on exports
Visualization preferences
Visual accessibility in legal
Established feature constraints
With a clear mandate around Path #3, I expanded upon initial mocks for in-depth feature design, incorporating the unique constraints I'd identified through research. I prepared requirements documentation and used it to facilitate alignment around planned implementation.
Examples of user requirements
Examples of product constraints
I worked with engineering to determine that our pre-existing yellow highlights actually drove the appearance of the particular export we sought to modify. This meant that in-app multicolor highlights could simply be an extension of established logic with no need to reinvent the wheel.
Making the case for in-app parity
Within the team, there was disagreement about scope. Product was incentivized to prioritize only exports… I wanted to offer in-app parity for broad utility. During high-pressure designations, app ↔ export parity would also reduce the likelihood of errors by offering users one consistent, cross-medium mental model.
Additional in-app multicolor use cases
App↔export parity would require greater investment, but the ROI would be disproportionately high for the level of work required. Beyond designations, it would unlock exciting new workflows. And DISCO would be able to market a much more powerful feature.
I made my case by detailing the clear business value of serving more use cases. I also worked with engineering to determine that our pre-existing yellow highlights actually drove the appearance of the particular export we sought to modify. This meant that in-app multicolor highlights could simply be an extension of established logic with no need to reinvent the wheel.
Establishing feature nomenclature
Common language is important when building a novel solution. I formalized these and other terms, then promulgated them across teams and stakeholders to minimize preventable miscommunication.
Through a close working relationship with dev, I designed intuitive interactions that balance circumstantial complexity while offering users consistent expectations across mediums.
Highlight draw order and logic
While conceptually simple, highlight complexity compounds. To help users maintain a sense of order via predictable interactions, I developed a series of behavioral guidelines which drive highlight rendering in any scenario. Through a close working relationship with dev, I designed intuitive interactions that balance circumstantial complexity while offering users consistent expectations across mediums.
The Draw Order
The appearance of Highlight Bands is driven by the Draw Order: when Bands overlap, they fill Slots based on Start Location, then color rank. This order of operations offered clarity for engineering and creates predictable interaction outcomes for users.
Why this Draw Order?
Re-draw Events
Highlight Bands aren't constantly redrawn. Instead, they re-render upon completion of specific user actions. The Draw Order dictates Band appearance upon page load, then again whenever the user takes one of these actions to manipulate the appearance or visibility of Bands. This trains users to understand the impact of their actions on Band appearance, while ensuring consistency with behavioral guidelines.
Events that trigger re-draw
Behavioral guidelines
Rendering rules for visual elements wasn't enough—I identified the need for specificity around behavior of UI elements themselves, relative one another. Here are some rules for Color, Band, and Slot behavior:
Detailed rules
Tradeoffs and remedies
You may wonder whether this solution truly affords any desired highlight configuration. The answer is no, but for good reason. This feature is designed to serve 95% of multicolor highlight use cases. I knew that a small minority of users would seek versatility that our constrained vertical space couldn't afford. So I designed the feature to allow users to work around these constraints:
Methods to manipulate Highlight appearance
Detailed implementation collab
I worked closely with front end engineers through dozens of scenarios to achieve an optimal implementation amid technical constraint, using detailed visualizations to drive conversations forward.
Annotation #2 (13:6-14)
Annotation #3 (13:12-20)
Summary and application touch points
I designed highlights to be flexible, easily modifiable, and fully non-destructive:
🎨
16-color palette
👩🏻💼
Zero customer rework
📑
Partial line support
✍️
Non-destructive color ranking
📝
App and export parity
🌈
Intelligent slot rendering
🥞
Inline stacking
✏️
Highly customizable
👁️
Accessible across mediums
Tags management page
Because highlights are tied to tags, colors are managed on the Tags page—offering critical options for teams managing multiple parties or dynamic court requirements. My design offers frictionless, non-destructive color management to support numerous workflows.
Transcript viewer
We'd recently shipped a highlight visibility toggle in the transcript view. I designed multicolor highlights to interplay beautifully with the toggle, avoiding any rework. My behavioral guidelines and interaction designs dovetailed with surrounding changes—the toggle fit neatly into our front-end multicolor logic.
Export modal and output
When exporting a highlighted transcript, two simple options offer users control without complexity. Highlight only tagged annotations omits all highlights from annotations that aren't tagged. Powerfully, Limit to specific tags lets user export highlights for only the tags they're focused on, in any workflow.
16
options for issue tagging, informed by usage data, and beating competitors
Intentional colors, system-elevated
The palette supports large litigation teams with wide-ranging color code guidelines. Colors were elevated to our shared design system to enable cross-product use.
Yellow
Blue
Orange
Green
Red
Gray
Magenta
Aqua
Pink
Coral
Violet
Peach
Gold
Chartreuse
Cyan
Brown
"This is exactly what I need for designating..."
Creating an accessible palette
Nothing about the palette is arbitrary. Size and variety offers more than our competitors, without imposing complexity. Colors are tuned for max visual accessibility in digital and analog mediums. In the app, colors dynamically change to a 'muted' tone in relevant interactive states. Palette and tag interaction changes were elevated to a shared system to reinforce consistent mental models across products.
Color quantity and selection
Tradeoffs with this palette
Ensuring visual contrast across mediums
18%
of company billable logos using the feature within 60 days of release
0
bug reports, and zero subsequent FRs expressing negative feature sentiment
Post release success metrics
This was deceptively complex work. The unique blend of domain and technical constraint required deep attention to detail. The released feature balances versatility with ease of use. It allows legal teams to deprecate arcane offline workflows in favor of intuitive multi-party coding and a broadly useful annotation system that supports numerous workflows.
Usage metrics I focused on
Qualitative feedback
Multicolor highlights in Case Builder reached GA in July 2024. Here's some qualitative feedback we received shortly after release:
Associate — Mid-size civil trial boutique
Paralegal — One of nation's largest plaintiff firms
CSM / Management — csDISCO