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
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.
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
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.
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.
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.
We designed a usability study using our functional prototype, and tested it with five different users.