Everlaw: Page references

A simple system for a complicated use case

Lawyers want to reference documents, but only the relevant 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.

There was no way to mark important pages. You had to remember the page number or scroll every time.

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.

  • User flows
  • Wireframing
  • Prototyping
  • Responsive web app design

Process

  1. Research: understand the problem
    Interviews
  2. Synthesis: define the problem
    Research insights
    User flows
    Team workshop
  3. Ideation: find potential solutions
    Paper
    Wireframes
    Low-fidelity designs
    Prototypes
  4. 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 allow you to 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 a difficult information problem.

This feature was an information problem. Displaying bookmarks isn’t hard; doing it in a way to surface relevant information is. For example, bookmarks are tied to document references, not documents themselves. My design had to communicate that.

I incorporated my new bookmark system into the document reference cards. The bookmark indicators allow you to jump to a particular page, and make it clear that each reference is distinct.

A document can be referenced in multiple places, with different bookmarks on each instance. All of a document’s bookmarks can be organized by scope:

  • a bookmark on a document reference
  • all bookmarks on a document reference
  • all bookmarks in an Outline (across multiple document references)
  • all bookmarks in all Outlines (across multiple Outlines)
Sounds complicated, but it’s just nesting. Like folders on your computer.

To give users a complete picture of how a document was being used, the bookmark menu had to display all this information in a manageable way.

If we organized bookmarks by scope, scope would be the parent element containing multiple pages. If we organized them by page, it’d be the other way around. In both, a navigation menu was required to switch between various scopes, i.e. zoom in or out.

Feedback showed that the scope approach was more intuitive and useful for tracking references. However, it was a struggle to design a navigation menu that was both usable and fit within the space constraints.

The key insight was realizing the scope hierarchy could be reframed as a list. It was a much simpler way to represent the information, and avoided the need for nested elements. 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 avoided 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.