Indie Campers

4 min read

Indie Campers

4 min read
🙋‍♂️
My role
UX/UI Designer and Front-ender
👏
Team
Me, PM, CPTO, and Fullstack Devs
Duration
3 months
🔎
Discovery
Customer listening, experience map and competitors analysis
✏️
Designing
Sketching, mockups, prototyping, and user testing
🛠
Tools / Tech
Figma, Adobe XD, HTML, CSS, VueJS, Google Analytics, Adobe Suite, Hotjar

The Challenge

Create a new page for the Indie Campers’ models/categories, showing technical info to support the clients when choosing a model to travel. The whole funnel experience — including sign up page and checkout page — also had to be redesigned, as it has a strong correlation with those new pages.

Context

Traveling in a campervan is trending all over Europe although most travellers are doing that for the first time. Indie Campers is the biggest own-fleet campervan rental in Europe, with around 1600 vehicles around Europe. That said, our customer support team receives many requests and has to answer questions regarding the features, available extras and price breakdown

Discovery

We had to understand the most important touchpoints of the customer journey, and how the market is set. What our clients often ask, what are the most important to them, what they usually hire with book

Experience map

When I joined indie campers a customer journey map was already created with the whole experience our clients have while traveling with us, from the first access on the website to the post weeks after the trip. One of the first things I’ve done was talk with the Product Managers (PM) who have compiled that journey.

We were going to change some of the touchpoints, including new ones: The listing page and SignUp page. So I’ve discussed with PMs how those new steps would influence the Customer Journey Map.

Competitors Analysis

The possibility to hire a campervan to travel is new on the mind of everybody. However, there a lot of players already in the market, so it would be extremely important to understand how our competitors built their listing pages and checkout step.

We selected, compared, and analyzed some of our direct competitors’ listing pages

We also analyzed other digital platforms — like Airbnb, Booking.com, Expedia — to check what other industries do nicely to give more ideas for our version.

Customer listening

The Customer Support Team listed the most frequent questions they received about the vehicles, such as insurance, fuel type, extras available to hire, features and amenities, location to pick up the vehicle, etc.

Designing

Sketching

Alongside the Product Manager of this project, we used the previous findings to prioritize the information and create sketches based on phases. Our team works in an MVP model, so we deliver the minimum valuable product first and increment it in future iterations.

In this stage, we mapped all possible paths the user would take until the booking confirmation

User testing

Some topics we could clarify with the previous research, thus, I had to run a few tests. We have to be extremely careful when we display prices to users, as it could influence the perception of the clients over the product and if they will proceed on the funnel. So, I’ve tested with users several ideas of the price breakdown, to find the clearest version.

The challenge here was to make the price breakdown more clear and simpler, with no hidden fees and clarity on what they will pay for

Mockups and prototyping

Mobile is taking a huge space across the internet, and at Indie Campers is not different, around 70% of the access to the website is on mobile devices. So, I’ve started the approach of mobile-first and then adapt to other devices.

As previously explained, we used an MVP approach, so I’ve created the MVP version and other steps to the most complete version. Furthermore, I’ve created an iconography style as a new set of icons was required, a set that could be used for the van features, facilities, and status messages.

I’ve used Adobe XD to create the mockups and prototypes, and Adobe Illustrator to create the icons

Development

At Indie Campers, all designers have to have some knowledge in HTML and CSS, as they are people in charge to guarantee that what is being developed is what they’ve designed. Indie Campers’ website is built using VueJS and SASS on the front end, I’ve worked alongside a full-stack developer to create those pages.

I was in charge of the CSS / SASS, the general HTML structure, and support a bit on VueJS

At Indie Campers, the development team works on a Continuous Deploy methodology. So, as the MVP version was ready to be deployed we released it, and on the next sprints, we were increasing it.

Results

The process took around 3 months. Our Customer support team uses a platform that tracks the type of requests they receive. Comparing the 2 following months of the MVP version release with the same period of the previous year, we had a significant improvement on our Customer support team.

Future steps

On the following day of the release, I’ve set a few trackers on our Hotjar account to identify potential new improvements or any issues. A lot of new content has been added explaining our vehicle, but we could identify new information we could explain better.

We could identify we are explaining well about the vehicles, but information about the service should be better explained. Also, we are planning to start AB Tests, so in future we will be able to test several changes at the same time.