UX Case Study: Search Engine Redesign for RV Rental

Our client, Campanda is a holiday website specialising in renting RVs to vacationers. They offer a way to connect RV enthusiasts with private owners and commercial suppliers who want to rent out their vehicles. This case study reports on how we helped optimise their search engine.

Explorers and courageous travellers increasingly go on adventures with RVs. But if I was in their shoes, I would have tons of questions before a trip like this. I would wonder what I should expect when renting such vehicles, and what do I need to take care of? Does my license even apply to driving these?
This type of initial confusion in the user’s head was one of our main challenges. The business goal of the project, meanwhile, was conversion optimisation. In this UX case study, we cover the story of updating the search function of Campanda, including our research and design process, and the specifics learnings we made during this project.

So, let’s dive in!

1. Kicking off the UX project

The project scope

Since the client aimed for a full SEO redesign, our project focused on the optimisation of search filters and the findings list page (SERP). As search forms a central part of the user journey to eventually renting out a vehicle, they felt they needed to completely rethink and revamp this feature with the help of UX studio.

UX case study -campanda-original-design
The original search form on the home page

Our goals

  • First, our goal was to increase the number of direct bookings/inquiries users made with suppliers, and getting to know the users better 
  • During the design process, the client insisted on us sticking strictly to Material Design guidelines from Day 1.
  • Also, we kept in mind how we could help and guide first-time users with booking while also inspiring them.

The UX team

UX case study - campanda ux team

From Campanda’s side, it was the PO who led our team. We worked closely with the CTO, the Head of Product, and an in-house designer.

All in all, we couldn’t have wished for a more prepared team! On top of their thorough study, they also gathered all the needed information in advance, such as the competitors, KPIs, estimations, must-have elements, a glossary and links. Additionally, they brought a crystal-clear value proposition, which saved us a lot of time.

What a strong start! We could jump into the project almost immediately.

Challenges and kickoff

Besides this level of consciousness, proving users true desires set a real challenge. User tests and numbers helped us convince our client and form their vision.

On the second week of the project, we took a business trip to Berlin for a real kick-off meeting. After the pleasure of meeting the team in person, we did some great stakeholder interviews with co-workers and big agencies.

UX researcher Mia at campanda
Our researcher, Mia, at our kick-off meeting in Berlin

2. UX Research

At UX studio, we have a pretty large user research toolkit. Even though the client knew their research goals, they let us use our preferred tools. We carried out (stakeholder) interviews, user tests with mini interviews, and card sorting sessions.

Stakeholder interviews

During the stakeholder interviews, marketing and customer support interestingly came up with different approaches.

Here we found an assumption we needed to research if we needed to show the supplier type to the customers. Many users found this aspect important, since one of the personas wanted to make personal connections, and avoid big agencies.

Although the support department stood for it, the users would book more if they didn’t know about supplier type. From the supplier’s view, the agencies wanted their professional knowledge to indicate their status as big companies. Usually, this included an international network and a secure insurance system.We had other well-specified questions that we needed to test.

  • Who makes up our users?
  • How do we filter ideally?
  • How do they discover our site?
  • How can we help them reach the first inquiry? (ie, what kind of information do users need to ask for an inquiry or book an RV?)
UX case study-campanda user personas
Creating user personas

Our kick-off meeting usually contains a persona workshop where we create assumptive personas. Check out this article to learn about our persona template.

Because our client already had them and we estimated our project to last six weeks, we didn’t have time to discover all user types. We could build up one persona’s characteristics based on the mini-interviews from before user testing.

UX case study- campanda user interviews with card sorting
User interviews with card sorting sessions

Mia, our UX researcher aimed to identify user needs, rearrange filter structure, and give a strong base for one persona.

As mentioned, the client had a clear vision about the expected outcomes. This helped us a lot, showing us a path forward. The user tests proved useful and brought us added information. The great success in our and the user tests came in our ability to optimise the design and form the client’s vision about the product.

Some issues identified:

  • Users said they wanted to see additional information beyond what they had already filtered for (bed types, vehicle age).
  • Vehicle category order and naming also didn’t make themselves obvious at first sight. A card sorting session let us rename and rearrange until the users understood them clearly.
  • The vehicle type and details sections moved closer to each other
  • We also experimented with a trip type recommendations layout.  At first, users avoided clicking them, as they mistook them for ads. The stock photo–like images changed to little icons that represented the actual trip types.

We also experimented with a trip type recommendations layout.  At first, users avoided clicking them, as they mistook them for ads. The stock photo–like images changed to little icons that represented the actual trip types.

Before-after versions of the search. Our users avoided clicking trip types because they mistook them for ads. Then we changed the category markers and add a little personal touch with the new icons.

While we examined filtering, we asked our users to group the given categories. After a few sessions, we’d already got a clear idea of the ideal filtering hierarchy and the groups. We also asked them to name each group. This let us do ideation about the kind of words users would apply. It also helped us understand it in everyday language instead of professional jargon.

UX case study- campanda card sorting session
One of the results of card sorting sessions

Design phase

UX case study - campanda design phase
First, we arranged our modules on every needed screen size

At UX studio, things usually start with desktop screens when it comes to design for multiple platforms. This happens keeping in mind how would it look on smaller mobile screens. And after finishing and testing our work on desktop, we interpret our design into mobile screens.

This project meant working with an in-house at Campanda designer remotely, not dividing our work by platforms. We agreed on building specific modular elements so as not to have to wait for each other. Rather, we could build desktop and mobile screens at the same time.

After first setting our screen layouts and positioned our modular elements on every platform, we agreed on scrollable and fixed areas. Lacking time, we didn’t deal with tablet UI screens. The client can put together these screens easily using the provided elements.

UX case study- campanda expanded filter
Expanded filters and date picker on desktop

Then, we created our prototypes in high fidelity mode using InVision. For UI, we enjoyed the advantage of the Material Theme plugin, which generated us basically everything possible required. Also, we had every element to build up our own custom-made cards, by followed material layout rules.

UX case study-campanda material components
Material Components generated by Material Plugin
UX case study -campanda mobile design
Mobile version

Our biggest challenge: The hit card

As in most cases, the biggest challenge comes in setting business goals that need to be met. It came down that we wanted to show too much information to a user vs. everyday users who usually don’t read carefully.

The hit card shows an individual search result on a list page. To present individual offers (RVs), we designed a card with scrollable sections. This way, our hit card could present a lot of information in a visually clear way, saving us space.

UX case study-campanda early hit card version
Hit card versions from early sketching phase
UX case study-campanda hit card for mobile and desktop
Hit card for mobile and desktop

First came a gallery. We placed an offer flag and the supplier image here with a performance icon. This element also encourages more activity from providers, moving them up in the ranking.

The second part covers the RV: title, location, prices, discounts and all the other necessary details. You can scroll between description and reviews as well. We added these parts because users wanted to see them on the first pages before they click anywhere else.

The client wanted no redundant copy in the cards. But without CTA, users got confused. Understandably, people want more information before booking. So we made the vehicle title clickable and linked it to the detail page.

Remember our main business goal: conversion. We had to create a CTA to instant booking on the card to avoid confusing users while they search for the perfect RV. We started with the wording “Inquire now” and “Book now” but people wanted to get more information first before booking/inquiring. That’s why we changed the wording of the CTA back to “Details”.

What makes a suitable icon for services like roadside assistance and unlimited mileage? On the last part of the HIT card, we made our service icons clickable and provided an explanation tooltip. Also, users can share and like their favourite items.

UX case study -campanda filtering and incquiry view
Filtering and quick inquiry option view

Our learnings:

This project served us with interesting findings and conclusions. Here are the main ones for myself.

  • If you work with Sketch files and need to work on the same file or library with another person at the same file, use Box sync to avoid messing up each other’s work. Regardless, agree on the preferred method and test it before you use it. Otherwise you’ll fall into the same situation we did. Leave enough time to do all the setups and make them sure they work.
  • This ideal definitely saves time: From the client side, come well prepared and have a clear vision and rational expectations. If you know UX and can onboard your experts right, we can jump on the work almost immediately.
  • In this case, start interviews with users to better represent their needs from the first moment against business goals.
  • I recommend trying out Material Theme Editor for Sketch if you haven’t yet. It makes for great fun and could make your branding work much easier.

Did you enjoy this case study?

We hope we could serve you with an interesting read and you managed to pick up some UX-related learnings. If you have similar past projects, please share them with us.

To learn more about UX, check out our free e-book, the Product Manager’s Guide to UX Design.

For additional reading, check out our Product Design book by our CEO, David Pasztor. We ship worldwide!

 

Anna Máté

I'm a UX/UI designer here at UX studio. Also a foodie, medium level control freak, beauty and lifestyle tip lover.