The Design of Livingstone Online

Stained-glass window (1932), David Livingstone Centre museum, 2015. Copyright Angela Aliff. May not be reproduced without the consent of the Scottish National Memorial to David Livingstone Trust.

Cite page (MLA): Aliff, Angela, et al. "The Design of Livingstone Online." Livingstone Online. Adrian S. Wisnicki and Megan Ward, dirs. University of Maryland Libraries, 2016. Web. http://livingstoneonline.org/uuid/node/cc3ab471-98ad-431e-a7b7-8e0be4959241.


This essay provides an overview of the Livingstone Online site design. The essay outlines the key components of the site, the site’s aesthetic objectives, and the collaborative process that led to the development of the site.

Introduction    Top

The present design of the Livingstone Online website pays tribute to the project’s scholarly heritage and offers a multifaceted means of encountering Livingstone’s extensive manuscripts, along with materials related to his imperial Victorian contexts. The design is the result of LEAP, a four-year project development initiative funded by the National Endowment for the Humanities that has enabled us to rethink our project interface. Our goal has been to facilitate content navigation while engaging diverse audiences and offering new perspectives on Livingstone’s iconographic legacy. This essay outlines the key components of the redesigned site, the site’s aesthetic objectives, and the collaborative process that led to the redesign.

Zebras near the Timbavati River, Kruger National Park, Mpumalanga Province, South Africa, 2013. Copyright Angela Aliff. Creative Commons Attribution-NonCommercial 3.0 Unported (https://creativecommons.org/licenses/by-nc/3.0/).
Zebras near the Timbavati River, Kruger National Park, Mpumalanga Province, South Africa, 2013. Copyright Angela Aliff. Creative Commons Attribution-NonCommercial 3.0 Unported

 

Key Site Components    Top

Livingstone Online consists of five levels: 1) the home page, 2) the six section pages, 3) the content pages of each section, 4) our manuscript viewer, and 5) four digital collection browse and search pages. Users can drill down to metadata linked to our digital collection as well as specific secondary and primary content, such as critical essays or digital editions of original Livingstone manuscripts; or they can navigate laterally within similar types of content by, for instance, moving among essays within a particular section or by exploring different browse options. Additionally, uniform color coding among sections and the use of a carousel on content and browse pages helps orient users within the site.

Level 1 sample page from Livingstone Online. Copyright Livingstone Online. Creative Commons Attribution-NonCommercial 3.0 Unported (https://creativecommons.org/licenses/by-nc/3.0/)
Level 2 sample page from Livingstone Online. Copyright Livingstone Online. Creative Commons Attribution-NonCommercial 3.0 Unported (https://creativecommons.org/licenses/by-nc/3.0/)
Level 1 and 2 sample pages from Livingstone Online. Copyright Livingstone Online. Creative Commons Attribution-NonCommercial 3.0 Unported

Level 1 (homepage) features a slideshow of full-screen images that reflect the diversity of the site’s content. Rather than present the figure of Livingstone in isolation, these images highlight the many dimensions of his legacy by depicting both the disciplines in which he worked, such as geography, entomology, and zoology, and his relationships with non-western populations. Indeed, of the seven home page images, only two show Livingstone; in each case, he appears among an array of individuals linked to his travels.

Level 2 (section pages) divides the visual field into a series of tiles illustrated with images from Livingstone’s life and Livingstone Online project development activities. In the interactive desktop version of the site, users hover over the featured images to uncover titles and taglines describing linked content pages. In designing the tiles, we have juxtaposed heterogeneous sets of images, attempting to both represent and disrupt Livingstone’s iconic past. In addition, we hope the layout promotes individual meaning making as users assemble their own archive of information about Livingstone’s life and work.

Level 3 sample page from Livingstone Online. Copyright Livingstone Online. Creative Commons Attribution-NonCommercial 3.0 Unported (https://creativecommons.org/licenses/by-nc/3.0/)
Level 4 sample page from Livingstone Online. Copyright Livingstone Online. Creative Commons Attribution-NonCommercial 3.0 Unported (https://creativecommons.org/licenses/by-nc/3.0/)
Level 3 and 4 sample pages from Livingstone Online. Copyright Livingstone Online. Creative Commons Attribution-NonCommercial 3.0 Unported

Level 3 (content pages) presents a variety of critical essays about Livingstone’s life and times, documentary materials related to the Livingstone Online site and its development, and various other pieces linked to project team practices, collaborative relationships, and our outreach program. Users can explore pages individually or navigate the site content horizontally (via color-coded carousels and arrows at the sides of the screen) in order to identify relationships among pieces within a given section.

Level 4 (manuscript viewer) enables direct encounter with Livingstone’s written legacy through the provision of both high-resolution images and rigorously edited transcriptions of manuscripts with relevant metadata. All supporting icons and functions are contained in a single strip at the top of the screen, allowing maximum screen space for interacting with the manuscripts themselves and thereby mimicking the real-life encounter with Livingstone’s manuscript in a museum or archive. Users can “handle” the manuscript via zooming, rotation, and page selection or share individual manuscript pages via email or through a selection of social media formats such as Twitter, Facebook, and Pinterest.

Level 5 sample page from Livingstone Online. Copyright Livingstone Online. Creative Commons Attribution-NonCommercial 3.0 Unported (https://creativecommons.org/licenses/by-nc/3.0/)
Level 5 sample page from Livingstone Online. Copyright Livingstone Online. Creative Commons Attribution-NonCommercial 3.0 Unported (https://creativecommons.org/licenses/by-nc/3.0/)
Level 5 sample pages from Livingstone Online. Copyright Livingstone Online. Creative Commons Attribution-NonCommercial 3.0 Unported

Finally, Level 5 (browse and search pages, “In His Own Words” section only) presents a variety of ways to find specific items in our digital collection. Users can search collection items by addressee, repository, or timeline, or browse our extensive digital catalogue of nearly 3,000 Livingstone and Livingstone-related item records. Our goal in providing these options is to cater to diverse audience needs and expectations, while also offering multiple paths into our collection and highlighting the many connections that exist among different Livingstone manuscripts.

 

Our Aesthetic Vision and the Design Process    Top

Livingstone Online cuts against stereotypical representations of the Victorians as stiff or prudish by mixing a dynamic array of images – modern and historical – to provide a fresh look at the Victorian era and one of its most iconic explorers, David Livingstone.

The site achieves this objective by drawing on thousands of illustrative and manuscript images from over 40 archives around the world. In combination, the images dispel the idea of a monolithic Livingstone, destined for a heroic legacy of exploration and discovery. Instead, the images complement the complexity and richness of Livingstone’s world and his words. The images also foreground the many individuals, processes, and technologies involved in the preservation of Livingstone’s legacy over time, particularly in the present digital age.

Megan Ward, Kate Simpson, and Adrian Wisnicki view the 'COURAGE' sculpture (1929) in dark gallery at David Livingstone Centre museum, 2015. Copyright Angela Aliff. May not be reproduced without the express written consent of the National Trust for Scotland, on behalf of the Scottish National Memorial to David Livingstone Trust (David Livingstone Centre).
Megan Ward, Kate Simpson, and Adrian Wisnicki view the "COURAGE" sculpture (1929) in dark gallery at David Livingstone Centre museum, 2015. Copyright Angela Aliff. May not be reproduced without the express written consent of the National Trust for Scotland, on behalf of the Scottish National Memorial to David Livingstone Trust (David Livingstone Centre).

Led by Livingstone Online user interface designer Angela Aliff, our design team included director Adrian S. Wisnicki, associate director Megan Ward, and research assistants Ashanka Kumari and Erin Cheatham. Though we came to Livingstone Online as literary scholars, we quickly immersed ourselves in the world of web design, working in three phases.

The initial design phase began with a review of academic archives that shared our vision for featuring manuscripts alongside their transcriptions, such as the Emily Dickinson and Shelley-Godwin archives. These sites provided ideas for coupling visible, intuitive image manipulation tools with maximum screen space for manuscript images. Additionally, sites such as the Wilson Center Digital Archive and the Los Angeles Aqueduct Digital Platform offered models for representing data along the vectors of space and time.

In the next design phase, we sought to find example sites that would enable us to feature and highlight the hundreds of illustrations found in the Livingstone Online digital collection. We realized that our access to such images distinguished our project among comparable academic sites. For inspiration, we turned to sites featuring commercial photography, whose goal is to drive traffic specifically by featuring images. We found ourselves, rather unexpectedly, drawn to wedding photography sites such as Jasmine Star and Cast83, whose simple yet appealing image presentation encouraged interactivity. Ultimately, the appeal of such sites led directly to the development of our Level 2 image site pages.

View of the seacliffs towards Simon's Town from Cape Point, South Africa, 2013. Copyright Angela Aliff. Creative Commons Attribution-NonCommercial 3.0 Unported (https://creativecommons.org/licenses/by-nc/3.0/).
View of the seacliffs towards Simon's Town from Cape Point, South Africa, 2013. Copyright Angela Aliff. Creative Commons Attribution-NonCommercial 3.0 Unported

In the final phase, we realized that while most photographers feature images rather than text, we would need to find ways to display text clearly and efficiently due to our plans to publish a variety of critical articles. As a result, we turned to content-heavy sites such as ESPN and The New York Times, which offer users a plethora of navigation options and allow for specialized paths through an ever-changing array of content. We realized the relatively static nature of an academic site eliminated a number of complexities in information display, leading us to a deeper appreciation for the appealing minimalism of sites like Apple.

Throughout, we strove to enact the values underlying our new site design: simplicity, intuitiveness, and elegance. These qualities, we believe, make for a site that enriches at the visual level, encourages users to take part in information discovery, and ultimately fosters an ongoing encounter with and reflection on core data and critical content in the Livingstone Online digital library and museum.

Bonus: Download a set of screenshots of the entire Livingstone Online site (704 MB)

Return to top