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.


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.


  1. Research: understand the problem
    User interviews
    Team workshop
  2. Ideation: find potential solutions
    User flows
    Low-fidelity designs
  3. Iteration: refine the solution
    User testing
  4. Execution: deliver and ship
    High-fidelity designs

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.




Product / Design

Recommended from Medium

The Most Common Mistakes in Web Design That Affect Your Business Site

Benefits of LED Lighted Mirrors

Yeah, redesign(Part 2)

How to design an experience for the global community by leveraging machine learning?

User empathy, or where to start the design thinking process

11 Ways I Visualize Product Development Work

5. Patio/Porch

Project Week — 1

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
Bryant Peng

Bryant Peng

Free UX help for Ukraine donations. Let’s talk:

More from Medium

Art of storyboarding

Sprint 1: Project Kick-off

How to prepare for a product design interview

Being a new product designer at ClearScore — meet Hafsa.