Library of Congress
UX Research & Design
Client: Library of Congress
Timeline: 20 Weeks
My Role: User Research, Interaction, Prototyping & Testing
Tools: Photoshop, Sketch, Figma, Pencil & Paper
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.
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:
Tracking research and design during various stages
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.
Learning about similar platforms
We learned about similar and best in class platforms to identify opportunities and threads including:
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:
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.
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
7 people from LoC & Academia.
Domains: UX, Engineering, and
LoC's content model.
LoC technical searching systems
Search result display methods.
Visual search interface.
Importance of the richness, consistency, and quality of metadata.
Current collections are catored for curators and experienced audiences.
Familiar collections being easy to use.
In-depth interview and observation with users
What users do
What users see
What users look for
This user journey map visualizes the current process that our target user goes through while searching for A/V content.
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.
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.
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.
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.
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?"
Incorporating initial solutions into actionable product concepts and testing them
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.
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.
Mapping out the functions and structure
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.
Implementing how the product looks and matching design with function
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:
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.
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.
Based on the UEQ measurement, both classical usability aspects (efficiency, perspicuity, dependability) and user experience aspects (originality, stimulation) of our design are great.
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”
Prototype Complete Walkthrough
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.
I learned in order to work on a complex product, I have to: