Just a moment...

Modernizing a search page to increase efficiency by 60%

Project role

Team lead for client project

Key skills

UX/UI design
Design systems

Timeframe

Jan-May 2020
Revisited 2023

Process overview

1. The context
2. V1 redesign
3. New features
4. V2 redesign

Lawrence Zheng

1. The context
2. V1 redesign
3. New features
4. V2 redesign

At a glance

Design evolution

Before and after comparison of the front page UI at different stages of the redesign process:
V1 redesign
Improving discovery features & wayfinding

END

V2 redesign
Improving color, professionalism & credibility

The client:

The world's largest collection of social science data

The Inter-University Consortium for Political and Social Research (ICPSR) houses a data archive of 250,000+ research files in the social and behavioral sciences.
‍
Our team was assigned to help the ICPSR redesign their search page to accommodate for their growing user base. To find user pain points and generate a primary user persona, we conducted primary research and a competitive analysis.
‍
Interview notes

How might we

help people that don't know the exact search term they should be using?

From interviews with current and potential users, a recurring pain point surfaced. Users struggled to find precise search terms on ICPSR and similar academic research websites, leading to undesirable results. They desired semantic search capabilities, where the search engine would deduce user intent rather than relying solely on exact matches.
“I often have to advise people to use different search terms in order to direct them to the information they need.

For example, I know that “foreign-born” would return more results than “immigration status”, but people have no way of knowing that if they’re just getting into this field of research.”
Interview quote from university librarian
.

To help address this, we tested a 'suggest synonym' feature to display synonyms for ambiguous search terms, such as 'race.' This feature garnered very positive feedback and performed well in controlled usability tests, benefiting researchers.

However, we quickly deemed such a feature to be out of scope for an MVP redesign, since it would unfortunately require an unrealistic amount of technical resources to build out the necessary database. We decided that this feature would be nice to have, but we wouldn't make it our main priority. Instead, we decided to suggest other UI improvements that would also benefit our target user in addition to being more realistic for our client to implement.

How might we

recommend UX changes that are feasible to develop & helpful to users?

With semantic search being deemed unrealistic for implementation on the technical side, we switched gears to look at immediate pain points that would be more feasible for us to address through visual design changes.
‍
It's hard for me to know what kind of terms I should be searching for.
User pain point from interviews
It takes longer to browse ICPSR compared to using other sites.
Derived from timed usability tests w/ competitor sites

Redesign goal #1

Improve UX on front page to provide better discovery features and visibility into data

Redesign goal #2

Provide a more intuitive modern-looking UI with better wayfinding

Reimagining the UI

Redesign v1

We conducted usability testing and researched best practices to conduct a comprehensive UI rehaul.
Comparing our design with the original design, we were able lower the average time it took to complete search tasks by 52.6% in the usability tests that we conducted with current and potential ICPSR users.

UI changes

Modernizing the search interface

We redesigned the search interface to be more modern and user-friendly, with several major UI changes in mind:

cHANGE #1

Splitting content into sections
The original ICPSR content was stacked in a 3x2 grid. A/B testing showed users preferred to read content in horizontal sections for a more natural reading order, so we rearranged the content while surfacing important content to the top.

CHANGE #2

Use of color to highlight elements
We utilized bright colors to draw attention to important elements on the page. Blue/purple were used for a consistent color palette and to match with ICPSR's previous branding.

CHANGE #3

Moving unused elements
Elements like the word cloud for popular search terms or the list of top country visited weren't sought out commonly, so we reworked it and/or made the elements less prominent in the UI.

New features

Adding needed functionality

To improve usability and discovery features, we added the following functionality to ICPSR's search interface:

NEW FEATURE #1

Recommendations
By having a list of recommendations for datasets and search terms readily available, those that feel lost will have a starting point.

ICPSR's old design had a "word cloud" feature, but this was not iable to be interacted with - we decided to transform this into a "Popular on ICPSR" widget to improve discovery and provided an alternate starting point for browsing data.

NEW FEATURE #2

Breadcrumbs
As a UX best practice, we implemented breadcrumbs in our design so that users would be less likely to feel lost when using the ICPSR interface.

When clicking into a search result and drilling into a particular dataset, the user can easily return to where they originally came from.

Reimagining the UI

Redesign v2

I took the screens from the first redesign and improved on the layout to boost credibility and professionalism.

Visual changes

Polishing the UI

I redid the UI elements from the last redesign to start a scalable design system, with reusable components that can be applied to future page designs.
Typography
I decided to use a serif font for the page headings to add an air of authority, due to the fact that the page would be mostly used within academia.
Color
I changed the color palette to generally use less bright and saturated colors, while still retaining ICPSR's blue/purple branding. I used increased color contrast when necessary for legibility.
UI components
I created reusable components for buttons, dropdowns and search boxes while using a more modern UI aesthetic.

Streamlining information architecture

Simplifying navigation

Consolidating navbars
The former design used two navigation bars for different types of links. However, it was not intuitive what each bar represented. Combining into a single navbar makes navigation less overwhelming.
Some final thoughts...
This project was a valuable lesson into the value of discussing technical feasibility early and understanding organizational context. If we had not talked with development stakeholders early into the process, we would have gone down the route of designing a semantic search feature, which ultimately would not have been very realistic to implement.

Thanks for reading this case study!

If you'd like, feel free to check out one of the other links here :)

© Lawrence Zheng 2024

Contact

Linkedin

Email

Projects

3M M*Modal

Play For People Skills

ICPSR

Pixel art

Download

Resume