Everlaw: Page references
A simple system for a complicated use case
Lawyers need to reference documents, but only the important parts.
Documents are key to trial preparation, in things like building arguments and deposing witnesses. Everlaw has its own version of Google Docs called Outlines for lawyers to collaborate on materials leading up to a trial.
You can embed documents directly into an Outline and view them on the spot, an upgrade from traditional citations. But people only care about the important parts. Navigating to the right page every time you opened a document was time-consuming and tedious, especially for longer documents with hundreds of pages.
I designed a comprehensive system for creating and managing page references. Users can collaboratively identify relevant pages and reference them within an Outline.
Involvement
As the sole designer, I led the entire design of the feature from ideation to release. I worked with the CEO (our de facto product manager) and a full-stack developer.
Process
- Research: understand the problem
User interviews
Team workshop - Ideation: find potential solutions
User flows
Paper
Low-fidelity designs
Prototyping - Iteration: refine the solution
User testing
Prototyping
Repeat - Execution: deliver and ship
High-fidelity designs
Implementation
As simple as browsing the web.
Page references can be complex, so I framed them as bookmarks. Bookmarked pages are clearly indicated on document reference cards, and let you open a document directly to that page. By repurposing a pattern that’s universally understood in consumer apps, I created a solution that was simple to understand and easy to use.
Bookmarks are set in the bookmark menu or the top-right corner of a page. I took a lean approach, optimizing for the single-page use case and considering page ranges later based on customer feedback.
Solving difficult information problems.
I had to solve difficult information problems. Adding bookmarks is simple, but displaying them is surprisingly difficult. For example, bookmarks are tied to individual document references and not the document itself. My design had to communicate that.
A document can be referenced in multiple places, with different bookmarks on each instance. Its bookmarks can be organized by scope:
- all bookmarks on a document reference
- all bookmarks in an Outline, across multiple document references
- all bookmarks in all Outlines
To give users a complete picture of how a document was being referenced, the bookmark menu had to display this in a digestible way.
Grouped by scope, you’d see all bookmarked pages in a particular scope; grouped by page, you’d see all referenced scopes for a particular page. User feedback pointed to the scope approach, which they found more intuitive and useful for tracking references.
But in either case, it seemed like you needed a navigation menu to zoom in or out of various scopes. With how thin the sidebar was, I struggled to find an elegant solution.
My key insight was that the scope hierarchy could be reframed as a cascading list. By splitting the different levels of scope so you could view all of them at once, my solution organized bookmarks in an intuitive way and eliminated the need for navigation menu.
It just works.
It’s the little details that come together to make this a fluid experience:
- Viewing a document reference automatically opens to the first bookmark.
- Actions show contextually. The bookmark menu highlights the current page in blue if it’s bookmarked, and displays an add button otherwise.
- The new information panel has a clearer typographic hierarchy.
- The bookmark menu handles all million edge cases, and looks damn good while doing it.
It’s not flashy, and it’s not over-designed — it just works.