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 each artifact and collection.

Client: Library of Congress
Timeline: 20 Weeks
My Role: UX Researcher & Designer
Tools: Photoshop, Sketch, Figma, Pencil & Paper

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

The

Problem

 

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

Project's Intended user group

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

MacBook-Pro-10

— Discover

BACKGROUND RESEARCH

Understanding of the problem, users, and opportunities

 

 

Summary of Literature Review

Overviewing A/V search process




21 papers in the topics of visual search, digital collections, information seeking, and information processing were reviewed and summarized:
Supporting context-based distinguishing for assets might be useful in user search because different users might search for similar information but with the different contexts of use.
Half of the searches conducted to begin with keyword strategies (analytical strategies) and the remainder begins with partition selection (browsing strategies).
Useful to have the proxy method for displaying video results when users need quick and fast skimming of video over high-resolution content.

 


Competitive Analysis

Learning about similar platforms




The competitive analysis helped us to learn about similar and best in class platforms and 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.
C
lipping the original video helps to extract content with certain length.

Image not found

 

User Scenarios

Describing user searching 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 searches and finds a video for “contemporary views about civil war” to write an essay about it. 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


We interviewed 7 SMEs from LoC and academia who knew the platform best and offered insights into their fields of UX, Engineering, and Cataloging. We collected data about data organization and accessibility, LoC's content model and technical searching systems, and the search result display methods and visual search interface examples.

Insights:

Experts care about richness of metadata while searching.
Experts care about collections that are extremely familiar with.
Current digital libraries mostly cater to “experienced” audiences.
Organizations of collections mostly make sense to only curators.
Metadata consistency and quality are the main concerns while digitizing artifacts.

 

Contextual Interview

In-depth interview and observation to collect data


Interview Focus

Understand the current experience for searching A/V content within the participant’s domain.
Understand how users discover media relevant to them and their domain.
Learn about the participant’s needs and frustrations while searching for A/V content.

IMG_3505


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

Affinity Map & Key Insights

To understand and evaluate the scope of the problem, all raw data and insights (400+ yellow notes) gathered during the interview were organized/grouped in separate themes.


Affinity Mapping key Insights: 

Overarching themes (green notes) were identified that reflect the user story at the highest level and can be used to navigate the rest of the diagram:

●   People use prior knowledge and experience to search for A/V contents for different purposes, from education to personal needs.
●    
Content quality, metadata, popularity, relevance, and authenticity are the common A/V discovery issues.

Affinity-Sheet-1
Affinity-Sheet-5
Affinity-Sheet-5k

Key Insights

It’s important to offer ways for a user to quickly capture the gist of media
Users primarily make use of small portions of longform media
History professors shared media with students and creatives remixed it for their multimedia projects
Creatives tend to search based on hard-to-define qualities such as emotion
Keyword search is a primary way of online searching
Surfacing enough metadata and description helps in determining relevance and narrowing down the search result
Prior knowledge and experience inspire the way users search
The interface features supplement users’ searching habits
Creatives tend to learn more about unexpected media they come across while searching


Affinity Mapping key Insights: 

Overarching themes (green notes) were identified that reflect the user story at the highest level and can be used to navigate the rest of the diagram:

●   People use prior knowledge and experience to search for A/V contents for different purposes, from education to personal needs.
●    
Content quality, metadata, popularity, relevance, and authenticity are the common A/V discovery issues.

 

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.

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.

— Define

BACKGROUND RESEARCH

Exploring opportunities and area to focus upon

 

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. 

PP-1
UR
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. During the Ideation phase, 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 test 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

 

 

IA / Product Structure

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

 

 Then, we listed all the essential fuctions and features for meeting the product documents. Then we created user flows and task flows for each storyboard. The fuctions and features were integrated with LoC's previous IA/product structure. Finally, we adajusted the details of the structure and created the wireflows.

 

LoC-Wireflows@2×9-copykk

Lo-Fidelity Prototype 

xxx

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

4567

Usability Testing on Low-Fidelity Prototype 

Validating concepts, functions, and interactions

After finishing the lofi prototype, our group had the opportunity to meet some of our target users and test the proposed solutions in a series of wireframes. These testing sessions allowed us to receive a lot of initial feedback and learn more about how the product would better suit user needs. Overall, users were able to navigate within the new features and created space fairly easily and intuitively understood the new flow and information architecture of the product. They were also excited with the new timeline features on the Topic Page had to offer. We found that there were some wayfinding and visual clarity issues, such as confusing interface on the visual search and the comparer, ununified icons, and overloaded items on the landing pages. Through this testing, we were able to detect these issues early and iterate to correct the usability issues. Quotes captured during the testing:

"I’m confused with the file search, does it mean that I post a file on LoC?”
“Within This Item is really helpful, however, I would move it closer to the slideshow, Maybe before Collection section”
"It’s not clear to me what kind of content would be in the ‘Collection’ - Is it music, information, or different topics?”

 


Visual Design Guidelines


 Once we finished lo-fi prototypes, we used the official visual design guideline of the LoC website and intoduced a few more styles specific to our proposed features and design. We wanted to make sure that all our design elements were cohesive throughout the process and with the existing LoC design.
 

SG

Hi-Fidelity Prototype 

Implementing how the product looks and matching design with function


The final design for the Loc.gov media discovery project covers a number of new features that are related to audio acquisition and exploration of content within the Search Result page, Compare page, Content Detail page, and the Topic page.

 

On the Home Page's search bar, there is a new Media Search feature that 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), or take a photo, or paste a link to get results similar to it.
On the Search Resutls Page, we are intoducing a number of new features. The first one being a new filtering system that is based on the metadata similarities or thematic similarities of the uploaded file such as the file type, quality, size, and genre. It pulls relevant filters from the existing set of filters on the Loc website and inteligently suggest them on the filter section so the user doesn't have to dig into the list of filters.
Then, we intorduce horizontal cards that suggest the mixed media related topics and collections into the Loc existing pages. We have also added a new field for tags. If we hover over the thumbnail, there is a preview that plays the audio file in a quick way. There are also new options to compare and save the file. 

 


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

On the search result page, every item has a Compare check box. Once we click on it, the compare tray will pop up where you can see that the item has been added to compare. You can add as many file as you want to. From there, you can get to the new Comparison Page which lets you to compare selected items in a tabular format. Top to bottom, we can see all information and common metadata of the items and the waveform side by side. From this page, you can click into items to explore and learn more abot them.


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

On the Content Detail Page, we can interact with the content to consume it and see more details and all the things that this item is related to. It contains the the title followed by the waveformm, file segments/chapters, audio timeline, quick actions (downaload, share, and bookmark), statistics to show the popularity of the content (number of plays and downloads), tags, list of primary users, metadata section, similar content suggestion, and the sources this particular content belongs to.

We have added the interactive transcript which highlights the part of the audio that's being played. 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 by changing the audio setting and drag the slider to trim the audio before download.

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

The Topic Page is a brand new page we are intoruding to Loc.com to reduce the burden of exploring tens of collections and resources and instead just going through the topic page to learn about a specific topic.

It shows the summary of a topic as a whole followed by a slideshow which is the main feature in this page. The slideshow covers the key moments of the topic in chapters which form parts of the slideshow. You can interact with the slideshow by playing it, clicking on the chapters, or clicking on the moments to switch to the whole different part of the slideshow. To the right, there is a description of the item and scrolling down, there is a section for 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 interaction and visual design in digital format to ensure overall acceptance

 

We conducted fine task-based usability test with the same participants who participated in the research phase. Our goal was to understand if our solutions and designs followed user's mental model.We created a scenario with five main tasks for them to accoumplish:
You are creating an artistic piece using different types of music. You go to Loc to look for jazz pieces from the 1920’s.
Task 1: Search the LoC for Jazz music from the 1920’s. Task 2: Compare 2 items. Task 3: Learn more about Jazz Mentality and download the audio file. Task 4: Go to the related topic page(Jazz culture), and interact with the slideshow.
We got high UEQ scores and reviews and it became obvious that our design performs pretty well since it got all positive values and not fluctuation in the answers between different users.


UEQ
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

Hey there, this is the default text for a new paragraph. Feel free to edit this paragraph by clicking on the yellow edit icon. After you are done just click on the yellow checkmark button on the top right. Have Fun!

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.
A big thing I learned in this project was to pay special attention to the details when designing digital experiences.I quickly learned in order to work on a complex product, guidelines must be followed rigorously. A product can quickly become disjointed with so many moving parts around such as development, budgetary constraints etc. that it's crucial that these flows are ready for hand-off to developers.
Another important thing I learned through this project was how to properly recruit, schedule, host and facilitate interviews and formal testing sessions. I gained a ton of insight into contexual interviews and in depth testing from the project that will be valuable going forward.

Key Takeaway

Micro interactions matter when designing digital experiences. Take the effort to superfocus on the user experience. Your client and users will thank you.