Flag_of_the_United_States_Library_of_Congress_2

 
Library of Congress

UX Research & Design

 

 

Overview

In a collaboration with the Library of Congress, we introduced and designed new access points to the Library of Congress digital audio collections to improve the engagement users have with artifacts and collections.

Client: Library of Congress
Timeline: 20 Weeks
My Role: User Research, Interaction, Prototyping & Testing
Tools: Photoshop, Sketch, Figma, Pencil & Paper

Group-55
The reading room at the Library of Congress, Washington, D.C.

The Challenge

 

How can users discover, acquire, and interact with A/V materials on the Library of Congress website to find relevant and useful contents to their domain?

The Library is looking for innovative solutions to democratize digital access to their collections and to build a lifelong connection with the people who use it.


About Library of Congress



Library of Congress is the largest library in the world &
 the first one to start making their resources available online, currently holding
21,000 digitized audio records 
& 
8500 digitized videos.
 

The US Congress, schools, researchers, authors and many more rely on the Library as an archive and engage with it as a source of authentic knowledge. For many artifacts, the Library is the only source where they are digitally available.

 

In the fiscal year 2017, the Library of Congress website has received over:

110 million

Web Visits

  

503 million

Page Views

2.7 million

Downloads

1200px-Seal_of_the_United_States_Library_of_Congress.svg




Target Audience

Who are the users? 

Our primary target users include researchers and educators  who need primary sources and information in the domains on American history and government, as well as creatives who are involved in the domains of music, art, journalism, and history.

 

 

 

Process

Tracking research and design during various stages
 

 


PROCESS

process

— Discover

BACKGROUND RESEARCH

Understanding of the problem, users, and opportunities

 

Summary of Literature Review

Overviewing A/V search process

Below is the result of reviewing 21 papers in the topics of visual search, digital collections, information seeking, and information processing: 

Importance of context-based distinguishing for assets (help with searching for similar information with the different contexts)

Searches conducted with keyword strategies (analytical strategies) and partition selection (browsing strategies).

Proxy method for displaying video results helps when users need quick and fast skimming of video over high-resolution content.

 

 

Competitive Analysis

Learning about similar platforms


We learned about similar and best in class platforms to identify opportunities and threads including:

  • Hovering over thumbnails gives an idea of the video content.
  • Descriptions of the search results page tells what content to expect.
  • Related search suggestions based on initial keywords help refine searches.
  • Video sections' chapters help to jump to topics and parse content in the video.
  • Clipping the original video helps to extract content with certain length.

Image not found

 

User Scenarios

Describing users while searching for A/V contents

Below are a few user scenarios that demonstrate how some new ideas might make it easier for people to discover new A/V content and judge its relevance to their use case:

Screen Shot 2019-12-22 at 12.47.42 AM
Screen Shot 2019-12-22 at 12.42.45 AM

Personal Tags on A/V Content: Bill has a History project due next week. To find a relevant clip, he searches for his topic on the Library of Congress website and finds a video. In the video, he tags certain video segments with a relevant title so he can revisit it later.

Crowdsourced Tags on A/V Content: Sarah has to complete an article about Mozart. On the LoC website, she finds a video with tags that are comments about each section of the video previously marked by other viewers; using the tags she can easily skim through the video.

Screen Shot 2019-12-21 at 11.57.25 PM
Screen Shot 2019-12-21 at 11.50.45 PM

 Long A/V content split up into Chapters: Maya can view a video’s chapters which segment the video into smaller chunks so she can determine if the video covers any relevant topics to her interests. She finds a relevant chapter and the video marker skips to that time.

 Most Watched segments of A/V Content: Ann finds a video about “contemporary views about civil war” to write an essay. She watches the parts that video player tells are most-watched, which indicates what parts are popular or generate the most debate.

Subject Matter Experts (SME) Interviews

Exploring the functionality of current platform


Participants

7 people from LoC & Academia.
Domains: UX, Engineering, and
Cataloging.

Interview Focus

LoC's content model.
LoC technical searching systems
Data organization.
Accessibility.
Search result display methods.
Visual search interface.

Key Insights

Importance of the richness, consistency, and quality of metadata. 
Current collections are catored for curators and experienced audiences.
Familiar collections being easy to use.

 

Contextual Interview

In-depth interview and observation with users

 

Interview Focus:

  1. Understanding the current A/V searching habits
  2. How users discover media relevant to their domain
  3. Participant’s needs and frustrations while searching for A/V content

IMG_3505

Participants
Historians & Creatives
Male and Female
Ages 20s to 60s

Affinity-Sheet-5
Affinity-Sheet-1
Affinity-Sheet-5k
calendar-alt-regular

Key Insights

 
What users do

  1. Users primarily make use of small portions of longform media.
  2. Prior knowledge and experience inspire the way users search.
  3. Keyword search is a primary way of online searching.


What users see

  1. Interface features supplement users’ searching habits to capture the gist of media.
  2. Surfacing enough metadata and description helps in determining relevance and narrowing down the search result.


What users look for

  1. Creatives search with hard-to-define qualities such as emotions and tend to learn more about unexpected search results.
  2. History professors shared media with students and creatives remixed it for their multimedia projects.

 

User Journey Map


Visualization of existing A/V searching process


This user journey map visualizes the
current process that our target user goes through while searching for A/V content.

 

Frame 61


This diagram reflects the data collected during the contextual interviews and organized in the affinity diagram to illustrate what triggers the need to search/discover A/V artifacts and the following events.

— Define

BACKGROUND RESEARCH

Exloring opportunities and area to focus upon 

Target Audience Analysis

Capturing the personalities of our users


This Target Audience Analysis demonstrates how these attributes influence users' A/V searching decisions to either use or dismiss particular content and
 how the A/V search process enhances or detracts from a person’s sense of self.

 

IDENTITY – Horizontal Layout
IDENTITY – Horizontal Layout abi
IDENTITY – Horizontal Layout-1

This diagram highlights the underlying personalities, interests, and preferences elements of our target users.

Synthesis of Findings


Determining problems and opportunities from user data

All insights distilled from the research were aggregated and categorized into two groups of existing pain points and new user requirements. It contains issues, opportunities, surprising points, and design ideas that trigger to inspire new thinking in the product concept phase. 

Frame0
Frame2
IMG_4867
IMG_2828

 Ideation

Brainstorming ideas through visual storytelling

We brainstormed potential solutions based on the insights and design principles aquired from the user research, and the initial design ideas were proposed and got fine-tuned through multiple iterations. It made the data into a transformative experience for target user and allowed the team to focus more on how the design relates to the insights.

 

02. Visioning

Brainstorming ideas through visual storytelling

Visioning helped us to bridge data and design and tell coherent stories about the new world of the user and generate design ideas


Storyboarding made the data into a transformative experience for target user and allowed the team to focus more on how the design relates to the insights. Whenever a concept came to us, we kept asking the question "is the solution meet the design principle?"

— Design & Iterate

BACKGROUND RESEARCH

Incorporating initial solutions into actionable product concepts and testing them 

Stodyboards

Determining details of design concepts

The best solutions and design ideas from the ideation phase were incorporated to storyboards. It helped us to bridge data and design and tell coherent stories about the new world of the user and generate design ideas. 


Several design ideas were generated and the best visions' findings were incorporated to synthesize product concepts.

miajournalismmobilevisualsearch

 

 User Flows

Creating the structure of system

After analysing pain points and brainstorming potential solutions, we created a quick overall product structure to get a grasp into how the features would work system-wide. 

untitled@2x

 

All the essential fuctions and features were listed and integrated with LoC's previous IA/product structure, and then we created a series of user flows.

 

LoC-Wireflows@2×9-copykk

Lo-Fidelity Prototype 

Mapping out the functions and structure

4567

Usability Testing on Low-Fidelity Prototype 

Validating concepts, functions, and interactions

Overall, users were able to navigate within the system and intuitively understood the new flow and features of the product. They were also excited with the new timeline features on the Topic Page.
We were also able to detect and iterate to correct these issues: wayfinding and visual clarity challenges such as confusing interface on the visual search and the comparer, ununified icons, and overloaded items on the landing pages.

 

 

Visual Design Guidelines

 

It contains the official visual design guideline of the LoC website and a few more styles specific to our proposed features and design, to make all design elements cohesive throughout the process and with the existing LoC design.
 

SG

Hi-Fidelity Prototype 

Implementing how the product looks and matching design with function

 

Home Page

The new Media Search feature allows users to use a file as inputs and search for contents similar to that file. Users can either upload a file (photo, music, and video), take a photo, or paste a link to get results similar to it.

 


Media Search: Enriching users' search experience by allowing the to upload files in different ways and search for similar contents

 

On the Search Resutls Page, we are intoducing:

  • A new filtering system that is based on the metadata or thematic similarities of the uploaded file such as the file type, quality, size, and genre (it pulls and inteligently suggest relevant filters from the existing set of filters on the Loc website)
  • Horizontal cards that suggest the mixed media related topics and collections.
  • A new field for tags.
  • Thumbnail hover over to quickly play the audio file.
  • Compare and save the file. 

Comparison Page

On the search result page, every item has a Compare check box and once we click on it, the compare tray will pop up and we can add as many file as we want to it. Clicking on the Compare button, you will get to the new Comparison Page which lets you to compare the metadata of the selected items in a tabular format.

 


Comparision Page: Allowing users to easily compare two or more items based on features

Content Detail Page

On the Comparison Page, we can interact with the content to consume it. 

  • The interactive transcript highlights the part of the audio that's being played and the transcript is clickable which helps to click on a phrase and jump to the related part of the audio.
  • Chapters are the recognized section of the audio which make it easier for the users to skip the parts they are not interested in. The chapters are interactive and being highlighted once they are being played.
  • If the file is allowed for download by the copy right, the user can make a quick edit to the file before download.

Content Detail Page: Providing users to explore details and consume a content 

Topic Detail Page

It is a brand new page we are intoruding to Loc.com that reduces the burden of exploring tens of collections to learn about a specific topic.

It shows the summary of a topic as a whole followed by a slideshow which covers the key moments of the topic in chapters and moments. We also have access to all the items contain within that topic.

 


Topic Page: Introducing the summary of captured contents related to a topic

Usability Testing on Hi-Fidelity Prototype 

Evaluating of the final design and solutions

 

We conducted five task-based usability tests with the same participants who participated in the research phase to interaction and visual design in digital format to ensure overall acceptance. We understood that our solutions and designs followed user's mental model.  
 

UEQ


Based on the UEQ measurement,  both classical usability aspects (efficiency, perspicuity, dependability) and user experience aspects (originality, stimulation) of our design are great.

 

young-executive-woman-profile-icon-vector-9692668
Man User Icon – Person Profile Avatar Glyph Vector Illustration


Quote from a researcher:

 “I do like this chapter-ish timeline thing, it’s so useful to segment content”


Quote from a creative:

“Audio peaks and valleys would tell me the audio recordings were identical, or different”

— Delivery

BACKGROUND RESEARCH

Prototype Complete Walkthrough

Reflection

The context behind the platform and the variety of materials we had to work with are what made this project interesting. This experience demanded a very specific treatment as we had to design for a very broad context and broad target users. Crafting the experience all the way from interviews, to testing, and to a finalized solution was an awesome learning experience.

Key Takeaway

I learned in order to work on a complex product, I have to:

  • Pay special attention to the details when designing digital experiences.
  • Rigorously follow guidelines.
  • Stop it from becoming disjointed with so many moving parts around such as development and budgetary constraints, and have these flows ready to hand-off to developers.
  • Properly recruit, schedule, host and facilitate interviews and formal testing sessions.
  • Superfocus on the micro interactions and user experience when designing digital experiences.