NLI Catalogue Search Results
Restructuring complex search results to make information and controls easier to find
The challenge
The existing search results interface made it difficult for both the general public and professional researchers to find key functions like 'Expand' and 'Get Item,' and the accessibility status of items was unclear. The overwhelming amount of information made the process challenging for all users, but it caused additional strain for researchers who rely on the platform for in-depth searches. The challenge was to improve the results interface, making it easier and more efficient for everyone to access accurate and relevant information.
Previous design. Old search result.
Previous design. NLI's old search configuration and results.
New design. NLI's new search configuration and results.
New design. Current search result.
The objective
To redesign the search results interface to better serve a diverse range of user personas, from the general public to professional researchers, by making it more intuitive and accessible. Key improvements included simplifying essential functions, clarifying item accessibility levels, reducing information overload, and incorporating the new design system as part of a broader cross-site rebranding initiative.
The process
I worked closely with the senior designer on the research, design variations and iterations, while meeting with the product manager to understand the usage data and his product vision. We reviewed click data from the existing search results to identify which functions users were overlooking. We also examined platforms like Google and Airbnb to understand how they organize large sets of information. These findings informed our design explorations and changes to the search result structure. One key change was dividing search results into logical sections, making content easier to digest. We applied distinct visual cues to highlight important metadata and key actions. The main clickable area was designed to direct users to the item, while additional functions were placed on the periphery for easy access. We ensured all icons aligned with the new design system to maintain consistency.
A screenshot from our mutual canvas dedicated to the research.
The result
The final interface uses a grid system to organize content, supported by clear typography and visual hierarchy to highlight key information. By organizing the information into logical sections, we made key actions and item availability easier to identify while accommodating more content and functionality. We also redesigned the icons to improve recognizability and maintain consistency with the new design system.
Here is a breakdown of the new search result anatomy:
Metadata and clickable actions
Thumbnail number of files
Access degree
Expand
Get item
Save
New search result. Default state.
New search result. Expanded state.
Search result in case of an archive item expanded state presents the item's I.D.
Hover state
New search result. Expanded state.