NLI Catalogue Search Results
UX/UI responsive web design for NLI |
Redisgning NLI's search results
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
We began by researching platforms like Google and Airbnb to understand how they handle large sets of data. Using these insights, we iterated on several design variations and refined them through user testing. 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 incorporated a grid system to neatly organize content, supported by clear typography and color hierarchy to guide users to the most important information. We successfully integrated more information and functions while keeping the user experience simple and intuitive. Icons were redesigned to be more recognizable and cohesive with the overall design system. This balance allowed us to create an accessible, user-friendly interface that made navigating and interacting with search results easy for the general public.
Here is a breakdown of the new 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.