Viatu is a Swiss travel company that helps their customers find and plan their dream African holiday.
Case Study | 2023
I redesigned Viatu's trip filter with the goal of making input data visible and improving the general user experience with a more elevated, engaging UI.
Platform
Responsive Website
My Roles
Senior UX Designer
Timeline
2 weeks
Viatu is a Swiss travel company that helps their customers plan dream holidays in Africa.
While working with Viatu I was tasked with redesigning Viatu’s trip filter for desktop, located on the website's Trip page, so as to improve engagement, input visibility and overall user experience.
This is how I tackled the problem and developed a solution.
"Greg joined our team as a Senior UX designer and in the short space of two months made a number of significant improvements to our product and design systems. He also trained and mentored our junior designer which has had a notable impact on her performance an efficiency. I have never seen anyone so organised and structured in Figma and was impressed by the way Greg presented his work for review and prepared designs for our developers. I would highly recommend Greg to anyone looking for a detail-oriented, collaborative designer."
The Challenge
The purpose of Viatu’s Trip page is for users to use the trip filter to explore trips and find their dream holiday. And yet 25% percent of users were dropping off the Trip page before even engaging with the trip filter.
This was happening because the trip filter was located below two sections which were more decorative than functional.
Before even considering the trip filter I recommended removing the first two sections entirely so that the trip filter could take center stage.
The original version of Viatu's Trip filter
Data Analysis
Using data from Google Analytics and Hotjar I analysed user behaviour and pain points and identified areas that I could improve on.
Key Insights:
25% of users were dropping off the Trip page before arriving at the Trip filter.
Over 50% of clicks occurred on the Trip Filter making it the most active section of the page.
Move-maps and click-maps revealed the most active tabs in the trip filter were the duration, budget and country tabs.
Competitor Research
To get a good understanding of best practices I explored how the world’s leading travel brands designed their filters.
A few trends and patterns emerged.
Filters were elevated from the background with colours or outlines that distinguished their containers.
Input data remained visible to the user after it was provided. For example if you added trip dates you could see the dates as you scrolled through the search results.
Filters were typically featured in the header section of the page to indicate that users should engage with them immediately.
Icons were used to visually demonstrate the purpose of each filter tab. For example for the duration filter a calendar icon is typically used.
Dropdowns were featured as overlays meaning they didn’t push content down, but appeared over it.
The general mission
The original filter did not look anything like the filters found on the websites of Viatu's industry leading competitors. It blended into the background and and shared little in common with the best practices that emerged in my research.
Instead of looking like an engaging tool, it looked more like a secondary navigation menu that users might even ignore altogether.
In general I set out to elevate the tab by making it look more like an engaging, functional tool at the core of the web page on which it's located.
I wanted the filter to be front and centre so that users would engage with it immediately, as intended, and find what they were looking for faster.
Goals Included
The filter needs to feel like an essential aspect of the user experience of the page rather than a secondary feature.
Input data needs to be visible after it's been provided.
Active tabs need to be visually more striking so it's easier to identify active tabs.
Wide dropdown containers that produce horizontal scroll bars need to be reduced in size so that users aren't forced to make a series of unnecessary extra clicks.
Instead of pushing content down dropdowns should appear as overlays.
Iterations
Using wireframes and the insights gained from my research I explored how the filter could be reimagined to be more engaging and user-friendly.
At first I experimented with combining the tabs into one container.
I also created a version with separate containers for each tab, however I would only return to this version at a later stage after hitting a number of obstacles.
I tested these initial concepts with various wireframes to get a sense of how they would function.
I then modified the UI to reflect a more realistic concept.
I experimented with outlines and various ways of showing active tabs.
I wanted the input data to be visible, so it was important for us to see what the filter would look like if all the input fields were full.
The result was a very wide filter and one that felt quite busy.
Though I'd made progress, it was starting to feel like the different tabs were blending together. I felt the separations needed to be clearer.
Next I tried reducing the number of tabs in the primary filter by creating a secondary dropdown for experiences. This reduced the width of the primary filter and made it easier on the eye.
I thought that experiences could be displayed with pills that users could add or subtract from the filter.
I still felt troubled by the fact that all the tabs were crammed into one container.
The separations between the tabs weren’t clear enough.
I also wanted to simplify the filter by making it less text heavy with truncations.
The Finished Product
Things fell into place when I returned to one of the first concepts we’d developed in wireframing.
I gave each tab its own separate container and employed icons to help visually communicate the function of each tab.
I also made each tab the same width and used truncations to prevent long lists of input data and create more visual relief.
These breakthroughs allowed me to solve a number of problems.
Input data could remain visible without the filter becoming too busy and text heavy.
I could keep the width of the filter consistent regardless of the input data provided because each container would be the same width relative to the screen size.
Different states were suddenly much easier to display:
Inactive tabs would feature the tab title in grey with a font weight of medium.
Active tabs would feature a stroke around the tab container and a black tab title with a font weight of medium.
A filled field would feature the input data in bold. (The tab title (Duration, Budget etc) would not feature in the filled field as the icon visually demonstrates what the field refers to.)
For input data that needs to be truncated we designed the fields so that if the text is too long a ‘+’ sign followed by a number appears to demonstrate that a certain number of items are included in the input data but not visible to the user.
For example: "South Africa, Namibia +1"For dropdowns that were previously too wide we created simplified, contained dropdowns featuring elegant pills that can be added or subtracted from one's input selection.
The final product. Note the 3 different states for the tabs demonstrated by the Duration, Country and Travel Month tabs.
Detail of the redesigned filter.
The three states of the tabs.