Bryant Peng
Published in

Bryant Peng

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.

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.

Process

  1. Research: understand the problem
    User interviews
    Team workshop
  2. Ideation: find potential solutions
    User flows
    Paper
    Low-fidelity designs
    Prototyping
  3. Iteration: refine the solution
    User testing
    Prototyping
    Repeat
  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 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.

I added bookmark indicators to the document reference cards. They show that bookmarks are unique to each reference, and let you open the document directly to a bookmarked page.

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
Sounds complicated, but it’s just nesting. Like folders on your computer.

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.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store