Jared Pendergraft

Hypothesis

Pattern library for the popular web-annotation tool that lets you annotate the web, with anyone, anywhere.

Visit Site
Hypothesis featured image

Hypothesis is a primarily experienced through a Google Chrome extension which allows users to select text on the web, and highlight or annotate that selection. Through one of these actions the selected text is saved automatically to a user’s account and they can easily share them through social media.

Users can also interact with other users’s annotations and form a conversation about important text excerpts. Hypothesis is used throughout educational institutions and research groups—you can even use it for your favorite quotes from articles that you don’t want to forget about.

Realign Not Redesign


I was hired to help Hypothesis organize and clarify the design of their application. The application had been relying on a lot of open-source icons and had upwards of 12 shades of gray used throughout the interface UI. There were also many user flows that needed some tightening up.

I’m a big fan of figuring out what’s working well with a design and amplifying those elements. There were a few examples in the icons that emphasized the personality of the application so I took that approach to creating the new set.

In addition, I helped slim down the quantity of grays used throughout the application and found a cool-gray tint that worked well for light and dark themes and helped the core brand red stand out.

Hypothicons icon set
Color palette and main UI

Custom icon set, color palette and main UI for the tool

Annotations


In addition to seeing annotations in the browser extension, annotations are also available through a web application that groups them by article—so you can see all annotations that users throughout the system have made on a particular article.

Search within the application allows users to sort by multiple parameters, including user and popular tags—making sure users can find exactly the annotation they are looking for.

A new feature I helped design was group management. Users can be part of multiple groups—essentially buckets they put annotations into. It was important to allow for users to manage their groups through the extension and provide easy access to seeing all annotations in a particular group.

Annotations on the web
Additional UI including search and group management

Examples of how annotations appear on the web, searching using search parameters, and managing groups within the tool

Further Refinements


There were a lot of other areas in the UI that needed clarity, including the share dialog and how users get help when they’re having trouble with the tool.

Additional annotation states were improved including making it clearer when users were editing their annotation comments. Nested replies within annotations were also more clearly emphasized—enveloping them within the core frame of the primary annotation.

Share and help dialog boxes
Additional annotation states

Additional UI element including additional annotation states—editing and nested replies