an interactive library archive

home

the
living archive

\

Bringing the library's rich archive to life at a monumental scale, the Special Collections media wall is a platform for direct, enhanced engagement with archival material in a way that had not been possible.

Bringing the library's rich archive to life at a monumental scale, the Special Collections media wall is a platform for direct, enhanced engagement with archival material in a way that had not been possible.

Hillman Library at the University of Pittsburgh is undergoing a massive shift. It is no longer a repository of information and precious resources but an interactive space in which knowledge and ideas are exchanged dynamically.

The first of three installations that mark the renovation, the Special Collections media wall blends into the architecture of the third floor, creating a 20-foot window to the other side of the wall — the university's Special Collections and Archives department.

my role

Experience Designer: Concept, UI, UX, IA,
Interaction design, User testing, CMS documentation.
Tools: Sketch, After Effects, Principle
With: Potion Design

interactive media wall, native app

Launch: March 2020
Client: University of Pittsburgh
Collaborators: GBBN Architects

objectives

1

showcase the university's archive as an abundant resource.

Prior to the media wall, library archivists had been curating physical exhibits to promote the use of the library's special collections. However, the exhibits were scattered throughout the library on what felt like "leftover'' space that often made them invisible. Without a distinct presence in the library, the university's rich archive was grossly underutilitzed as an academic resource. Our goal was to create a platform that displays the abundance of their resources, advertises noteworthy items, and inspires engagement with the physical archive.

how —

ambient display

Represent the plentitude of the university's archival resources with ambient animations across the media wall.

multi-user experience

Amplify impact by accommodating in-depth individual exploration for multiple users at any given time.

multi-purpose display

Extend the usage of the media wall as a massive display.

An exhibit on Erroll Garner, displayed in an exhibit case in another building. Even though this exhibit took on more presence than most others, the physical limitations called for a compromise on the amount of content and the due focus on each item in the special collection.

Archival material related to the subject of women's rights. Physical affordances were limited for special collections — the exhibits' configuration had to adapt to the space available, which often meant compromising legibility and overall presence.

2

create a flexible platform that can be used across all exhibits and curators.

Multiple curators, scattered placement and a lack of a unifying visual language made exhibits fall short on representing the Archives and Special Collections department.

how —

unified visual system

Create a design system that respects the individuality of each exhibit, while delivering a solidified visual impression across various exhibits.

exhibit templates

Identify structural patterns in existing exhibits to construct a few templates that collectively accommodate all future exhibits.

content management tool

Develop a comprehensive tool that can standardize the content entry process and organize all past and current exhibitions in one place.

3

balance narrative with object-focused exploration.

Stakeholders were divided in their opinions on where the focus of the experience should be — largely, whether to focus on showcasing curated exhibits (stories), or on individual objects. Meanwhile, underlying these stances was one shared goal — to encourage students and faculty to utilize archival material for their work.

how —

inspiration > information

Account for the fact that media wall's scale and location does not render a comfortable setting for consuming an extensive amount of information. Take a high-level, impact-focused approach to design a user flow that inspires users to crave the more in-depth exploration that awaits them at the physical archive.

object-focused exploration

Leverage the affordances that are unique to a digital platform. Tucked under the narrative arc, embed meaningful object-focused experiences for those who want more.

implementation

implement

1

showcase the university's archive as an abundant resource.

ambient display

The basic unit of the visual design is an artifact. In fact, the display of the entire media wall consists of artifacts, text, and a few icons for navigation. When the media wall is not displaying an exhibit, it displays a texture formed by countless floating artifacts from the archive. A mammoth 20-feet display at the center of the floor of the Archives and Special Collections department, the media wall effectively becomes an ultra high-resolution X-ray of the archive, revealing the magnitude of its rich resources at a majestic scale. Only, this particular X-ray is also interactive!

These artifacts do more than float about mysteriously. Each of the items belong to a current exhibit, and tapping on one will reveal a link to its respective exhibit. All artifacts take turn glowing to call for attention, while some are magnified to overtly promote their exhibit.

The basic unit of the visual design is an artifact. In fact, the display of the entire media wall consists of artifacts, text, and a few icons for navigation. When the media wall is not displaying an exhibit, it displays a texture formed by countless floating artifacts from the archive. A mammoth 20-feet display at the center of the floor of the Archives and Special Collections department, the media wall effectively becomes an ultra high-resolution X-ray of the archive, revealing the magnitude of its rich resources at a majestic scale. Only, this particular X-ray is also interactive!

These artifacts do more than float about mysteriously. Each of the items belong to a current exhibit, and tapping on one will reveal a link to its respective exhibit. All artifacts take turn glowing to call for attention, while some are magnified to overtly promote their exhibit.

The basic unit of the visual design is an artifact. In fact, the display of the entire media wall consists of artifacts, text, and a few icons for navigation. When the media wall is not displaying an exhibit, it displays a texture formed by countless floating artifacts from the archive. A mammoth 20-feet display at the center of the floor of the Archives and Special Collections department, the media wall effectively becomes an ultra high-resolution X-ray of the archive, revealing the magnitude of its rich resources at a majestic scale. Only, this particular X-ray is also interactive!

These artifacts do more than float about mysteriously. Each of the items belong to a current exhibit, and tapping on one will reveal a link to its respective exhibit. All artifacts take turn glowing to call for attention, while some are magnified to overtly promote their exhibit.

An early motion study of the media wall when it is not displaying an exhibit

Live demo of opening artifacts in Attract on our 1/3 scale prototype (video at x2 speed)

Live demo of opening an exhibit via tapping on the link provided by an artifact in Attract

multi-user experience

The media wall is comprised of eighteen screens, arranged to form a grid with six columns. While the wall appears to be seamless, each column is designed for a single user and behaves independently to provide an immersive experience. An All Exhibits menu is available on each column, through which all exhibits are accessible. Each user area also features a directional speaker, as well as a scroller that ensures comfortable reach for each user.

20190821_HillmanLibrary_Design_III_v2.003_1280w

(design mockup) Using the ADA scroller

(1/2 scale prototype recording at x2 speed) Opening an exhibit via the All Exhibits menu

multi-purpose display

The media wall also caters to special occasions. In the event of a donor visit, themed event, or class, exhibits can be turned on/off to populate the media wall with select exhibit(s). Due to the dynamic design, rarely will two instances of one exhibit translate to an identical display!

Of course, it would not make sense to leave a perfectly amazing movie screen untapped. Equipped with stereo speakers on each end, the media wall comes in handy for presentations and movie nights, or a glorified banner display.

(design mockups) Possible instances of the "The Art of Noh" exhibit — each individual-user area cycles through these layouts in random order.

2

create a flexible platform that can be used across all exhibits and curators.

unified visual system

After a series of trials and tribulations, we found that a "design-less" design was the key to achieving a visual system that works across any exhibit. The archival artifacts themselves were the design and the artwork — unleashing them onto the vast canvas created a beautiful texture in which images of artifacts undulated about. Each exhibit needed no more than its own artifacts to distinguish itself from others, as their magnified artifacts conveyed their color and mood. In turn, this also meant a flexible and stable visual system that could weave in idiosyncratic content, sometimes to its benefit.

To satiate the last bit of yearn for uniqueness, we added a place for a custom-designed title and poster image with loose guidelines to ensure legibility and visual consistency.

After a series of trials and tribulations, we found that a "design-less" design was the key to achieving a visual system that works across any exhibit. The archival artifacts themselves were the design and the artwork — unleashing them onto the vast canvas created a beautiful texture in which images of artifacts undulated about. Each exhibit needed no more than its own artifacts to distinguish itself from others, as their magnified artifacts conveyed their color and mood. In turn, this also meant a flexible and stable visual system that could weave in idiosyncratic content, sometimes to its benefit.

To satiate the last bit of yearn for uniqueness, we added a place for a custom-designed title and poster image with loose guidelines to ensure legibility and visual consistency.

After a series of trials and tribulations, we found that a "design-less" design was the key to achieving a visual system that works across any exhibit. The archival artifacts themselves were the design and the artwork — unleashing them onto the vast canvas created a beautiful texture in which images of artifacts undulated about. Each exhibit needed no more than its own artifacts to distinguish itself from others, as their magnified artifacts conveyed their color and mood. In turn, this also meant a flexible and stable visual system that could weave in idiosyncratic content, sometimes to its benefit.

To satiate the last bit of yearn for uniqueness, we added a place for a custom-designed title and poster image with loose guidelines to ensure legibility and visual consistency.

(design mockup) Possible instance of a media wall with no user interaction — each panel cycles through different ambient states

(design mockups) Four custom-designed exhibit titles for four different exhibits

Graphic elements were used judiciously to support content without any intrusion. This allowed us to effectively use a bright, pulsing glow in the few instances at which we wanted to overpower the content to call for special attention.

(early motion studies) A glow is used to call attention to particular areas/items.

exhibit templates

The first step of the project was to study the structure of existing exhibits. Our goal was to read the needs and desires of the exhibit curators and devise a few content templates that could support all prospective exhibits. We looked at a few exemplary samples and identified:

all elements

Translated into modules

common segments

Translated into a base structure of modules

distinctive segments

Called for modifications to the base structure to create a distinctive content structure

Three content structures were derived from this process:

gallery template

Items/stories in a Gallery exhibit are essentially treasures in a treasure box — a collection of independent items/stories.

spatial template

Items/stories in a Spatial exhibit are explored through their geographic locations (e.g. on a world map), or through their spatial relation to each other (e.g. food chain, diagrams).

temporal template

Items/stories in a Temporal exhibit have a chronological relationship to one another. This may be a timeline, segments of a narrative, stages in a phenomenon/activity, etc.

A collection of woodblock prints by Tsukioka Kogyo, exhibited via the Gallery Template

Stories of artifacts along the Silk Road, told via the Spatial Template

The history of a symbolic university building, plotted on the Temporal Template

Hill_Flowchart_Temporal_distinctivesegment

Flowchart for the Spatial Template — non-universal segments are highlighted in green.

(Prototype) A universal segment in the Temporal Template

(Prototype) A segment that is distinctive to the Gallery Template

content management tool

content
management tool

We built a content management system (CMS), structured to make the content entry process as easy as possible. Referencing solely the live application and our comprehensive CMS user manual, three new curators were able to create three new exhbits. The instant success of their onboarding and content population was a clue to how user-friendly our application was to exhibit creators.

The CMS also served as a repository of all past, present, and upcoming exhibits. Once scattered and seemingly irrelevant to each other, Special Collections exhibits now project one solidified identity. And while the one-for-all CMS gives curators access to precedents when they create new exhibits, the flexible content structure gives them room for interpretation in the flow and tone of voice of each exhibit.

We built a content management system (CMS), structured to make the content entry process as easy as possible. Referencing solely the live application and our comprehensive CMS user manual, three new curators were able to create three new exhbits. The instant success of their onboarding and content population was a clue to how user-friendly our application was to exhibit creators.

The CMS also served as a repository of all past, present, and upcoming exhibits. Once scattered and seemingly irrelevant to each other, Special Collections exhibits now project one solidified identity. And while the one-for-all CMS gives curators access to precedents when they create new exhibits, the flexible content structure gives them room for interpretation in the flow and tone of voice of each exhibit.

We built a content management system (CMS), structured to make the content entry process as easy as possible. Referencing solely the live application and our comprehensive CMS user manual, three new curators were able to create three new exhbits. The instant success of their onboarding and content population was a clue to how user-friendly our application was to exhibit creators.

The CMS also served as a repository of all past, present, and upcoming exhibits. Once scattered and seemingly irrelevant to each other, Special Collections exhibits now project one solidified identity. And while the one-for-all CMS gives curators access to precedents when they create new exhibits, the flexible content structure gives them room for interpretation in the flow and tone of voice of each exhibit.

Pages from the Content Creation Guidelines manual

3

balance narrative with object-focused exploration.

balance narrative with
object-focused exploration.

balance narrative with object-focused exploration.

inspiration > information

The best advertisements are ones with a great story. With the primary objective of championing the university archive as an academic resource, the exhibits are essentially a contextual story around the artifacts. The interactive unfolding of the story, combined with the magnitude of the images, create a high-impact experience that acquaints users with the incredible resources they have at their fingertips.

There were three levels of information that needed to be incorporated into the "base structure" of all exhibits — the artifacts, the story, and a menu that provides access to all artifacts. Through testing we learned that users tend to linger around up to two layers of information for a while before they "commit" to dive in to the third layer. With this in mind we constructed a main menu screen on which the exhibition introduction and all stories can be explored with a single tap. A second tap will reveal details and special features tied to each artifact in a story.

Content structure of exhibits on the media wall

Upon entering the Gallery exhibit, the user is presented with an introductory video from the curator, as well as images of artifacts.

Artifacts/artifact groups (appearing as image "piles") take turn animating to draw the attention of the user. Tapping on a pile opens the story of the artifact group.

Tapping on either the glowing pile or the "Explore Items" button triggers a zoom-in into the topmost artifact. A description of the artifact, related artifacts, information on further engagement, and metadata are available to its right. Users can tap on hotspots to discover interesting facts, enlarge the item, or swipe through the pile to explore other artifacts in the group. Once they are done, users tap the x button or tap an artifact/artifact group outside the pile to activate it.

Tapping on either the glowing pile or the "Explore Items" button triggers a zoom-in into the topmost artifact.

Tapping on either the glowing pile or the "Explore Items" button triggers a zoom-in into the topmost artifact. A description of the artifact, related artifacts, information on further engagement, and metadata are available to its right. Users can tap on hotspots to discover interesting facts, enlarge the item, or swipe through the pile to explore other artifacts in the group. Once they are done, users tap the x button or tap an artifact/artifact group outside the pile to activate it.

object-focused exploration

Once inside a story, a user can enlarge each of its artifacts to observe all its dots and grooves, as well as tap on hotspots to discover more details about the artifact. These hotspots may contain text descriptions alongside an image, video, or audio. Each artifact also comes with a description, information on how to engage with it beyond the media wall exhibit, a link to related artifacts, and metadata.

Once inside a story, a user can enlarge each of its artifacts to observe all its dots and grooves, as well as tap on hotspots to discover more details about the artifact. These hotspots may contain text descriptions alongside an image, video, or audio. Each artifact also comes with a description, information on how to engage with it beyond the media wall exhibit, a link to related artifacts, and metadata.
Special Features — The media wall supports artifacts that have multiple pages, such as a book, manuscript, or flyer. While each page can have its own hotspots and be enlarged independently, the artifact is presented as a single, paginated item that can be grouped with other artifacts.

Other supported media types for artifacts aside from images are videos and 3D objects.

Once inside a story, a user can enlarge each of its artifacts to observe all its dots and grooves, as well as tap on hotspots to discover more details about the artifact. These hotspots may contain text descriptions alongside an image, video, or audio. Each artifact also comes with a description, information on how to engage with it beyond the media wall exhibit, a link to related artifacts, and metadata.

The media wall supports artifacts that have multiple pages, such as a book, manuscript, or flyer. While each page can have its own hotspots and be enlarged independently, the artifact is presented as a single, paginated item that can be grouped with other artifacts.

Once inside a story, a user can enlarge each of its artifacts to observe all its dots and grooves, as well as tap on hotspots to discover more details about the artifact. These hotspots may contain text descriptions alongside an image, video, or audio. Each artifact also comes with a description, information on how to engage with it beyond the media wall exhibit, a link to related artifacts, and metadata.
Special Features — The media wall supports artifacts that have multiple pages, such as a book, manuscript, or flyer. While each page can have its own hotspots and be enlarged independently, the artifact is presented as a single, paginated item that can be grouped with other artifacts.

Other supported media types for artifacts aside from images are videos and 3D objects.

The media wall supports artifacts that have multiple pages, such as a book, manuscript, or flyer. While each page can have its own hotspots and be enlarged independently, the artifact is presented as a single, paginated item that can be grouped with other artifacts.

Other supported media types for artifacts aside from images are videos and 3D objects.

Once inside a story, a user can enlarge each of its artifacts to observe all its dots and grooves, as well as tap on hotspots to discover more details about the artifact. These hotspots may contain text descriptions alongside an image, video, or audio. Each artifact also comes with a description, information on how to engage with it beyond the media wall exhibit, a link to related artifacts, and metadata.
Special Features — The media wall supports artifacts that have multiple pages, such as a book, manuscript, or flyer. While each page can have its own hotspots and be enlarged independently, the artifact is presented as a single, paginated item that can be grouped with other artifacts.

Other supported media types for artifacts aside from images are videos and 3D objects.

All artifacts can be enlarged and contain hotspots that call out interesting details.

In addition to text, a hotspot may contain an image, audio, or video.

A newspaper — each page can be zoomed and contain its own hotspots.

3D objects can be freely explored via the 3D viewer.

Full-sized projection displaying artifact with a Related Item link (glowing image thumbnail)

Artifacts can be linked to one or more Related Items that may not be included in the same artifact group or exhibit to the primary artifact.

home