Explorers and courageous travelers 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 focus website 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.
- 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
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.
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.
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?)
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.
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.
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.
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.
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.
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.
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.
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!