Search Card Evolution
Role: UX Designer
Duration: August 2024 - Feb 2025
Team: Resources
Type: Mobile, Desktop
Keywords: Responsive Design, Search experience, Search Card, Information Hierarchy
Starting with a thank you!
I appreciate you taking the time to review this case study. I chose this example because I feel it demonstrates:
My ownership of the full design process from identifying pain points to delivering a design.
My leadership in facilitating cross-functional alignment with PMs and developers.
My ability to translate complex user pain points into actionable design solutions.
Brief
PRD (Public Resource Directory) is a digital platform to help individuals find local social service programs - such as food assistance, housing, and healthcare - based on their location and needs.
In 2023, I designed and launched Search Card 1.0. Following the launch, we gained valuable insights into areas for improvement, particularly in accommodating inconsistent data structures and aligning more closely with evolving user needs.
To address this, our team conducted in-depth user research to identify which content users found most valuable. Based on those insights, I designed a new version of the search card, which has been finalized and is scheduled for implementation in Q4 2025.
Goal
Redesign the search card to align with user priorities and deliver an easy-to-read interface despite inconsistent data.
In the previous episode of PRD…
When I first designed the search card, I felt confident. I had created a similar design at my previous company, and users loved it. So I used the same pattern with full confidence that it would work just as well.
Spoiler alert: it didn’t.
The free-text fields varied widely in length, from just five words to over 500, resulting in a visually inconsistent card layout. At the time, this challenge hadn’t been fully anticipated, which highlighted the need for clearer content guidelines moving forward.
Only 36.6% of users clicked the card to view more details.
And that’s where this redesign adventure began.
Identifying problems
We kicked off brainstorming sessions and planned our next steps to address the issues as follows:
UX Research 1: Conduct user testing to gather feedback on the current design.
UX Research 2: Perform card sorting exercises to determine which information users find most important.
UX Research - Understanding the Problem
We dug deeper to uncover more specific reasons. By analyzing qualitative data, we identified the following key insights.
Information Overload
As part of our user research, we showed the PRD 1.0 card design to 12 interviewees and asked for general feedback. Ten of them mentioned the same issue — there was too much text, making the card feel overwhelming.
“There’s way too much text, the page feels super messy.”
- Interviewee A
“I don’t need the full address. I won’t remember it anyway. Just tell me how far it is from home.”
- Interviewee B
Inconsistent Layouts
During user interviews, participants pointed out inconsistencies in the card layout. Some cards were noticeably larger or smaller than others. This led to frustration and caused some users to miss smaller cards entirely.
“This card’s huge. I gotta scroll forever.”
- Interviewee A
“Some (cards) are tiny, some are huge. I totally missed this one ‘cause it’s kinda small.”
- Interviewee C
Irrelevant Content
We discovered through user interviews and card sorting research that the information presented in the card did not align with users’ needs.
“Yeah, this one makes sense ‘cause it mentions Food Assistance.”
- Interviewee C
“I just need to know if I’m eligible or not, that’s all that really matters.”
- Interviewee D
During our card sorting research, we asked participants to rate the importance of 24 information items using a 5-point Likert scale. Based on the aggregated scores, we organized the content into four tiers of importance.
Design Solutions
With a clear understanding of the root causes, I facilitated a cross-functional brainstorming session with the PM and engineers to generate creative design ideas. Combining those discussions with user analysis, I developed and iterated on three focused solutions.
Design Evolution
Outcome
The redesigned search card was finalized through user insights and close cross-functional collaboration, with implementation planned for Q4 2025. Early user testing yielded positive feedback. Participants frequently highlighted program hours, distance, and eligibility requirements as key pieces of information they relied on.
“I think you can get everything you want right here that you would have enough information before going to the facility.”
- Interviewee A
"I think that(eligibility requirement)’s important. That’s actually really good. Just having that visible is really helpful"
- Interviewee A
Reflections
Don’t Assume the Final Product Matches the Design
I didn’t anticipate the extent of technical limitations and data inconsistencies that would affect the live UI. This experience taught me the importance of validating designs in real-world conditions. Going forward, I’ll stay closely involved in UX reviews and collaborate early with QA teams.
Design Separately for Mobile and Desktop
Initially, I assumed responsive design simply meant adapting the desktop layout to smaller screens. I tried to reuse the same structure by trimming down content, but that approach missed the mark. I’ve learned that mobile design requires a different strategy, clearly defining primary versus secondary information.
Show Less, Even if It’s All Important
Our user research revealed 20 pieces of information users consider important. But showing everything at once made the interface overwhelming and hard to use. Instead, mapping out the user flow helped us strategically surface the right information at the right time.
