A New Interface for Academic Reading
designed as a team member at LUST
As an exercise in front-end, responsive design I coded and created the launchpage for a fictional product.
Access the site here.
Working from a coded framework, I participated in a team of three to test and refine the usability of this site’s unique functions.
Contexual Search The contextual search provides the reader with an ability to generate an alternate compilation of a text from their own search terms. The occurrence of these terms is reflected in the n-gram; a graph that visualizes their frequency within flow of the original text.

This re-interpretation creates an new narrative structure and approach to literary reading. Endless interpretations are possible, sourcing from the reader’s own interests within the text. This opens discussion on audience-generated interpretation and linearity in media as a critical media-making tool.
Focus Mode Focus mode provides a method of engaging with literary media under time constraints. While skimming through a piece by scrolling quickly, the key passages become apparent to the reader in contrast to the remainder of the text.

This allows readers to engage with core passages without them being decontextualized, as with the traditional pull quote. These sections are integrated within the text non-hierarchically to activate only in situations where a reader is scrolling quickly. Focus mode is an experiment in forms of reading that reflect the audience’s behavior.
Annotations The creation of reader annotations is generative of a parallel narrative to the original text. The audience is invited to engage with the content by taking notes and reacting alongside the original. As their own set of annotations is compiled, the annotations take on their own form as a piece of literary media. As the original text and annotations exist laterally, they come together to produce an new and anthropologically-rich reading.
Session Sharing Each unique session of annotations produces a sharable link, where the reader can invite others to collaborate in session of annotating. This way of reading, note-taking, and reflection is a facilitator critical engagement and discussion. These sessions invite multiple narratives to exist in dialogue with text, generating multiple readings of the literature.
Visual Index The visual index is a miniaturization of the text, providing an overview of the text for navigational purposes. This is an immaterial method of way-finding within long texts—analogous to the pages in a printed book. As an index to the content, it gives context for the content readers interact with, as well as a means to reinterpretation of reading through navigation.
II. DISPLAYING THE DATA In this process, I was in charge of creating the visualization of the infographics.
I distilled large amounts of information into clean, bite-sized charts.
Their minimalism is in reaction to their relatively small column on the website, so additional interaction would not be required in order to understand them.

Initially, we proposed vertical charts that were read by the process of scrolling down. However this proved too hard on viewers for the amount of new web features.
Their aesthetic was inspired by traditional print publications, which were limited to black ink alone.
I had tested a variety of line qualities and halftone approached to come to the desired effect.