Search Results Page
TL;DR
Redesigned the vendor search results page to address usability issues like cluttered layouts and limited filters. By improving filtering, sorting, visual hierarchy, and card design, we reduced search time and improved user satisfaction for both property managers and vendors. The redesign led to fewer support complaints and more efficient vendor discovery.
PROBLEM STATEMENT
The VendorSmart platform’s vendor search results page was underperforming in user satisfaction and efficiency. Users reported difficulty in finding relevant vendors due to a cluttered interface, inadequate filtering options, and a lack of intuitive sorting mechanisms. As a result, users were abandoning the search process or taking longer than necessary to find suitable vendors. The goal of this redesign was to improve the usability and functionality of the vendor search results page, streamline the search process, and enhance user satisfaction.
RESEARCH
To understand the key pain points and opportunities for improvement, both quantitative and qualitative research was conducted.
User Feedback: We collected feedback from existing users, focusing on their experience with the current search results page. Users highlighted several challenges:
- Overwhelming amount of information on each vendor card.
- Limited filtering and sorting options.
- Inefficient visual hierarchy making it hard to scan results.
- Inconsistent information across vendor profiles.
Competitor Analysis: We reviewed the search functionalities of competing platforms to identify best practices. This provided insights into the use of advanced filters, card layouts, and interactive elements that improved user engagement.
Usage Data: We analyzed heatmaps and user flows from HotJar to understand how users interacted with the existing page. The data revealed high bounce rates from the search results page and a low conversion rate from search to vendor selection.
DESIGN PROCESS
The redesign process followed a structured UX/UI workflow involving brainstorming, wireframing, prototyping, and user testing.
Brainstorming: The team identified essential improvements such as reorganizing the page, enhancing filtering and sorting mechanisms, and implementing a more streamlined design.
Wireframing: Low-fidelity wireframes were created by focusing on highlighting vendor plans and compliant status.
Prototyping: High-fidelity prototypes were developed in Figma, showcasing an interactive and visually appealing design that aligned with the VendorSmart brand. These prototypes were tested with a select group of users to gather feedback on usability and design choices.
User Testing: We conducted usability testing sessions to validate our design choices. Users were asked to perform tasks such as filtering, sorting, and selecting vendors. The feedback was used to iterate and refine the design.
DESIGN SOLUTIONS
Key changes introduced in the redesigned vendor search results page included:
Cleaner Vendor Cards: Vendor cards were redesigned with a cleaner layout. The vendor logo was often cut off by the circle shape so, we redesigned the logo area to work better with the logo types we usually see. We also placed top categories in a tag to improve legibility.
Advanced Filtering & Sorting: The filtering system was enhanced with more granular options, including region, rating, categories, compliance status and preferred plan status. Sorting mechanisms were also improved to allow users to prioritize results by relevance or rating.
Improved Visual Hierarchy: A consistent visual hierarchy was applied across the page, emphasizing vendor names, ratings and categories. Font sizes and weights were adjusted to guide users’ eyes toward the most important information.
Additions: A badge to display the vendor plan was adding as directed by the sales team. Additionally we made changes to the compliance badge so property managers can easily see if a vendor is not compliant.
IMPLEMENTATION
The new design was implemented over the course of a couple of months. Collaboration between the design and development teams ensured that the design intent was preserved during development.
RESULTS
Post-launch, the following metrics were observed:
- Reduction in Time Spent Searching: Users spent less time on average searching for vendors, thanks to the more intuitive filtering and sorting options.
- Improved User Satisfaction: The support team reported an decrease in user complaints in regard to the vendor search. Vendors were pleased with the addition of a badge showing their plan (as well as moving preferred vendors to the front of the search results) while property managers appreciated the more obvious ‘Not Compliant’ badge to easily weed out vendors they are unable to do business with.
REFLECTION
The redesign of the vendor search results page was a success, achieving the primary goals of improving usability and increasing user engagement. However, a few challenges were encountered during the process, particularly around ensuring that the filtering options did not overwhelm users with too many choices. Balancing simplicity with functionality remains an ongoing effort.
In future iterations, more attention could be given to personalization features, such as saving favorite vendors or providing recommendations based on past searches.
Description
VendorSmart
2023
Elevating User Experience with Clear and Concise Search Results