Above: Searching for something? How much information do you need to know up front? What information is essential to narrow your options?
I used this visual as a metaphor to convey concepts on a better search experience to address user needs.
•••
Removing non-essential elements to enhance clarity and improve the performance of search results displays.
Company
Mineral, Inc (Now part of Mitratech)
Role
Product Design Lead
Skillsets
Turning user feedback into improvement.
Leading design initiatives.
Communication with stakeholders
Introduction
Project Overview
The Mineral Platform is a web-based product designed to simplify HR and employee benefits compliance, allowing users to focus on what they do best–running their business. While the platform offered thousands of valuable documents and content across several domains, users had trouble surfacing the right content when performing a search of the platform.
This insight came from user feedback collected through our NPS (Net Promoter Score) survey (see above). Comments from customers and partners consistently highlighted one key issue: the search feature was frustrating and provided irrelevant information with too much to filter.
Why might searching for content be so challenging?
👉 Inconsistent content display across different pages of search results.
👉 Irrelevant information was displayed within each search result.
👉 Search results pages were long and often hard to scan.
This case study explores a strategy to improve and standardize search snippets by identifying essential elements and removing unnecessary extras. My work on this project culminated in designing a new, simplified search template. However, a key part of the process involved effectively communicating this strategy and securing approval from multiple project managers and back-end engineers.
The screenshots below provide an overview of the display issues, which I will break down in more detail.
Making the Case
Addressing UI Inconsistencies
Users could perform a global search from the top navigation, or a search within a specific section of the product. However, the search results for these various types of content displayed inconsistently across the platform.
Examples:
🤔 Some search results included a description, while others did not.
😟 Certain results displayed a breadcrumb indicating where the content appeared in the platform, while others omitted this detail.
😣 Some results featured a "View more" call-to-action (CTA), while others did not.
🧐 The visual styles varied as well: some results used a zebra pattern, others were enclosed in a box, and some were expandable.
These inconsistencies created a disjointed user experience, making it challenging for users to interpret and engage with the search results effectively. (See below)
Remove Non-Essentials
After auditing each type of search result with in the platform, I identified elements that could be considered extras. These items might not be helpful in identifying one thing from another.
Non-Essential Items (Applies to All):
Non-Essential Items (Applies to All):
✖️ Multi-Colored Labels
✖️ "View Content” CTAs
✖️ Image Preview
✖️ Borders
✖️ Zebra Patterns
✖️ Iconography
✖️ Expand/Collapse Features
✖️ Color Coding
✖️ Breadcrumbs
Examples...
Non-Essential Items on a Federal Law Search Result Snippet
✖️ Multi-Colored Labels: The color-coded bullets for each content category don't convey a relationship on their own.
Non-Essential Items on a Law Alert Result Snippet
✖️ "View Content” CTAs: View Content isn't consistent with other snippets (or best practices).
✖️ Borders: The box is unnecessary.
✖️ Zebra Patterns: These create unnecessary contrast issues and visual distraction.
Identify Essentials
Lead with the most important items.
The key question was: what is most relevant in the "search mindset"? The goal was to identify the common and most important elements to ensure that search snippets could function effectively on both a global scale and within more filtered contexts.
By collaborating with each Product Manager, I was able to identify the essential elements and eliminate those that were less important. I worked closely with them to communicate the necessary changes for their specific instances, ensuring alignment with the broader global design approach.
Above: The essential search result. I identified four key elements to help users quickly surface the information they need.
The Design
After analyzing the hierarchy and comparing multiple instances, I developed a unified snippet layout that streamlined and standardized search results across the platform.
This design prioritized essential elements, making it easier for users to parse and locate their results. While the changes primarily optimized the front-end display, I collaborated with engineers to ensure the updates were feasible and straightforward to implement.
While this design process was relatively straightforward and focused on updating a traditional aspect of web/platform search, it delivered a quick win with high impact. These changes played a key role in improving the UI globally by simplifying font usage and reducing visual noise.
Above: A metaphorical graphic to show that by reducing noise we can scan more easily for what we're looking for.
•••
Takeaways
This project was the second phase of addressing user feedback on the platform. Users often said, "Things are hard to find!" I approached this challenge by stepping back and organizing the feedback on a FigJam board. Through this process, I identified two distinct but related problems: one centered on content hierarchy, and the other on how search results were displayed in a way that was both easy to scan and relevant to their query.
In working with each product manager, I wanted to respect their expertise. It was essential to understand their priorities and insights about their users. As with many projects at Mineral, I wanted to build a compelling case for why the proposed design changes made sense. By preparing a strong presentation and taking the time to meet with each product manager individually, I was able to secure their buy-in and drive meaningful change.
Project Summary of Responsibilities
Discovery
Understanding user feedback.
Grouping and identifying a strategy.
Planning
Share presentation and promote design strategy with stakeholders.
Design
Loose, High fidelity designs of large concepts.