SaaS UX Design Happeo Oy · 2023

Search & Filters Revamp

Happeo's outdated search had poor results, unclear filters, and hidden integrations like JIRA and Slack in horizontal scroll, frustrating users. A full revamp reduced search time from 45s to 7s and improved successful searches from 60% to 85%.

View full case study

Interactive prototype — click to explore

Solution

The revamped search introduced a modern UI, streamlined filters, and context-rich results. Enhanced with predictive search, personalization, and React migration.

Outcome

45s → 7s reduced search time. 60% → 85% successful searches. 25% → 10% reduction on drop off.

My Role & Team

Roles

Identified usability issues through design evaluation and user feedback analysis.
Created and iterated wireframes and high-fidelity designs.
Conducted competitor analysis and customer interviews.
Collaborated with PMs and engineers.
Defined success metrics and partner with devs to implement Pendo tracker.

Team

Junaed Numan

Product Designer

Victor Manrique

Product Manager

Azamat Guseynov

Frontend Developer

Loic, Maks, Tim

Other stakeholders

Research

Key findings from survey and design audit

UI/UX Inconsistency

Feedback emphasized the need for better navigation, a cohesive design, and intuitive layouts.

AI & personalized search

Personalized search, saved searches, and expanded AI-driven recommendations were highly anticipated.

Visual improvement

Thumbnails and previews were requested to improve interaction and clarity.

Integration challenges

Tools like JIRA, Slack and others were buried in tabs and horizontal scroll, reducing accessibility.

Filter clarity

Active filters lacked visibility, complicating navigation.

Search result cards

Insufficient details in search results led to user frustration.

Design Audit

Audit: Old designs

1. Unclear integrations tab

Integrations like JIRA, Slack, and all other results are hidden in horizontal view makes less used.

2. Lack of context

Users aren't provided context for comments they are viewing.

3. Search Limitations

Search area is restricted, especially on channels/pages with long names.

4. Unclear filters overview

No easy way to view an overview of all active filters, complicating user navigation.

Success Metrics

Success metrics definition

In collaboration with the Product manager, I established success criteria to evaluate the effectiveness of our product design solutions, focusing on search functionalities.

Key metrics:

Successful vs. Failed Searches: This ratio ensures users can efficiently locate the information they need.
Time to Result: Minimizing the time users spend finding relevant information.
Click Path: Analyzing the clicks or paths taken to reach desired results.

We employed two methodologies:

Event Tracking: Capturing data on each search result click to analyze user actions.
Funnel Analysis: Mapping the user journey from initiating a search to clicking on a result to identify drop-off points.

Testing

Co-design session and usability testing

After co-design sessions with the team, we developed initial layout ideas and refined result card details based on API capabilities. I then created high-fidelity designs and conducted a Maze usability test, which provided valuable insights. These findings helped refine the search experience and better align with customer expectations.

8.4 Ease of use rating: 8.4/10, reflecting high satisfaction with simplicity and user-friendliness.

7.7 Meeting expectations rating: 7.7/10, indicating good alignment with customer needs.

74 Findability: Usability score of 74 for locating the "happeo_fc" Slack channel, suggesting areas for improvement in findability.

"You solved a couple of the issues that I presented as expectations for an improved search experience. e.g. more consistent UI, better use of visuals and icons. Less text heavy. And most important search results coming in one pane (one place to look) on the right."

— Bram Koster (Randstad)

Post-Release Insights

User Insights and key feedback

Survey Results

The beta release scored 2.59/5 in user satisfaction. While 23 users praised the improved UI and filtering options (5/5), 39 rated it poorly (1/5), citing issues with finding relevant content like HR policies and how-to guides.

Customer Interviews

Interviews with 16 customers and 7 stakeholders revealed:

Content Organization: Need for better prioritization of key information.
Search Accuracy: Requests for more accurate, diverse, and customizable results.
Usability: Challenges with mobile accessibility and seamless external platform integration.
AI and Personalization: Interest in tailored, AI-driven suggestions.

Iterations

Enhancing Search Functionality

To improve Happeo's search experience, we refined the algorithm to deliver more relevant results based on user feedback. Additionally, I led efforts in AI-Powered search.

Prioritized Content Grouping

Collections appear first, making key content easy to find.

Improved Relevance

Titles and descriptions with keywords like "sales" are ranked higher, while hashtags refine results when multiple matches exist.

New Result Order

Pages, Channels, and Collections rank higher than users or posts for faster access to vital resources.

Search AI insights

Translating customer needs into actionable insights for the AI team.

Search AI Analytics

Developing analytics to monitor and optimize search precision and user satisfaction.

Continuous improvement

Ensuring the search system evolves to meet user demands through continuous data-driven enhancements.

Release Impact

Our revamped search functionality has transformed the user experience, delivering faster and more accurate results.

7s Search times dropped from 45 to 7 seconds, with quick search modal usage increasing by 33%, enabling faster access to relevant content.

25% Successful searches increased from 60% to 85%, with 90% of users selecting results within the top three listings.

15% Drop-offs during the search process decreased from 25% to 10%, ensuring smoother navigation.

Learnings

Key challenges & learning

Missed early insights

Skipping initial user interviews led to gaps in understanding. Targeted follow-up interviews addressed the issues, improving satisfaction.

Phased deliveries

AI search, a key customer need, was delayed implementation but successfully done in later phases.

Team transition

AI search was handed over to another team, limiting my direct role, though I contributed insights and designed analytics dashboards.

Constraints

Technical limitations and roadmap priorities impacted research timelines.

View full case study Back to Portfolio