hypothes.is UI prototyping

Hypothes.is UI Prototyping

For our graduate User Interface Design course, my group of six designd a user interface to facilitate group-oriented collaboration and annotation with web resources. We did this by extending the functionality of an existing service, hypothes.is, a web annotation platform.

Contextual Inquiry, Prototyping, Balsamiq, Usability Testing

Research

affinity diagramming

Our design process began with contextual inquiry to understand how our potential users annotate documents and shared those annotations with collaborators, both in online and offline contexts. We aggregated and organized our observations into an affinity diagram, and created various models of our users’ work. This made it easy for us to identify breakdowns in their workflows and take these as a starting point for our design.

storyboards

Based on our observations and models, we created seven personas, that we later narrowed down to two key personas: a student and a working professional, each with their respective priorities and needs. For each persona, we described key tasks that the personas would be interested in, and then drew storyboards depicting the scenarios for each key task.

Design

paper prototypes

We first made several low-fidelity paper prototypes that implemented our key tasks and scenarios. Using these paper prototypes, we did think-aloud sessions with several of our potential users and gathered their feedback, and then further iterated with another paper prototype.

balsamiq prototypes

Using the feedback from our paper prototypes, we developed interactive prototypes using Balsamiq and tested them with some of our users. We also had another student group conduct a heuristic evaluation.

functioning prototypes

We integrated the feedback we received into a functional prototype, forking the existing hypothes.is codebase and implementing our UI in HTML, CSS, and JavaScript. By building directly on top of hypothes.is, we were able to see how the groups feature fit in with the system as a whole.

usability testing

We designed a usability study using our functional prototype, and tested it with five different users.