Travel Search Engine
Refining Ascenda's travel search engine with an optimised layout and enhanced loading feedback to deliver an improved user experience.
Company
Ascenda Loyalty
Duration
1 month
My role
UX research
UI design
Prototyping
Re-designing our travel search engine for a better search experience
Context
Ascenda Loyalty delivers innovative white-label rewards solutions, enabling banks, fintechs, and travel brands worldwide to power seamless loyalty programs. Users can redeem points for flights, hotels, car rentals, and more, finding what they need through the travel search engine.
Challenge
We received feedback from our clients that the search engine has too many fields, making the UI feel cluttered and taking up excessive screen space, which limits the visibility of other content. In addition to that, users found that results took too long to load and had difficulty identifying if the results were still loading as they scrolled through the page.
Competitive research
To kick off the process, I analysed leading online travel agencies known for their strong UX and industry reputation.
Insights & findings
Single row search fields
Most online travel agencies place key search fields in a single row.
Additional filters are given lower priority
Additional filters, often pre-filled, are made smaller and less visually prominent to reduce clutter.
Mixed usage of field labels
Several online travel agencies have removed labels from their fields.
Fast loading speeds
Compared to our loading speeds, all online travel agencies load results 3-4 times faster.
Exploration
Given the tight timeline, I explored several high-fidelity layout variations for the new search with two key objectives:
Present search fields concisely to prevent overwhelming users while maximising visible content.
Improve loading feedback, ensuring users can anticipate incoming results as the page loads.
After discussions with our product manager and developers on optimising loading speed, we decided to address it as a separate project, excluding it from this scope.
After several rounds of design critique with the team, we refined the concept and settled on the following designs, each with its own set of pros and cons.
Version 1 (desktop)
This version prioritizes space-saving by minimizing unnecessary gaps and padding.
Version 2 (desktop)
The second version focuses on grouping related content together while maximising space usage.
Version 1 (mobile)
Similarly, on mobile, this version optimises space by making more content visible to users on the page.
Version 2 (mobile)
In this version, users can view all search fields directly without additional steps. However, this approach requires more vertical space, limiting the visibility of content below.
Putting it to the test
After narrowing down the designs, we conducted a usability test on Maze to determine:
Which version has a higher task success rate
Whether field labels should be present
Sequence of fields
Other areas of improvement
Insights from the usability testing session
Most users preferred version 1
While both versions had similar success rates, most users preferred version 1 for its cleaner design and the perception of fewer fields to fill in.
Field labels should be displayed
A higher percentage of users successfully completed the task when field labels were present, as they provided clearer guidance on each field’s purpose.
Location and date fields take priority
Location and date search fields are the top priority for users and should be placed above.
Clear loading feedback
With the improved loading feedback, all users could clearly recognise when the page was still loading.
Final solution
Based on insights from the usability testing session, I further refined the designs and tested them with various client brand colours and images to ensure compatibility and verify contrast ratios.
Testing with different branding
Before (desktop)
After (desktop)
To strike a balance between allowing users to edit their search and viewing more content, we made the search engine sticky—it appears when users scroll up and hides when they scroll down.
Before (mobile)
After (mobile)
Outcomes and learnings
Our clients were highly appreciative of the redesign, recognising that it successfully addressed the pain points they had highlighted. Their users found the new design cleaner, more convenient, and particularly appreciated being able to view more information at once, especially on mobile.
The core focus of this project was optimising screen real estate. To me, it underscored the importance of identifying key information for users and striking a balance between providing a quick overview of what's most relevant to them while maintaining a clean, uncluttered design—ensuring they aren’t overwhelmed by too much information.