Ondevan Campervan — True Mobility

Haley Kirk
Mar 27 · 8 min read

Ondevan Campervan is a campervan rental company in Miami, FL. The majority of their sales come through people discovering their website through internet searches. Although they have experienced success since their launch 2 years ago, they have found that customers often get lost on their way to the booking process.

This project aimed to design a mobile and desktop friendly website for Ondevan. Although the company had existing branding, we also took this opportunity to tighten up the company’s visuals.

  1. Increase sales by removing friction from the booking process.
  2. Give campers more confidence in the company and their own ability to explore the outdoors.
  3. Reduce the amount of time users spend researching for their trip.

Problem

Ondevan Campervan’s current website does not match the level of professionalism nor customer service that the company provides.

Jumbled information flow and a lackluster mobile site has led to many customers leaving the website before booking.

Based on website analytics, we know that customers are interacting with the website across different platforms. Research shows that 88% of travelers with smartphones will switch to another site if yours doesn’t satisfy their needs. (Google Think)

User Research

Information from 300 past clients

Ondevan had kept records of their 300 past clients. Records included place of residence, gender, age, etc.

Map created through Tableau with existing data

5 in-person website usability reviews

I asked participants to review the existing website while recording their reactions through Otter Voice Notes. They were placed on the homepage and asked to proceed through the booking process up until the payment process.

Website review through Hotjar.com

186 heatmaps were collected on the homepage and booking page. Demographic information was collected for 288 visits.

Device information collected from Hotjar
Hotjar.com heatmap for mobile homepage

58 online surveys

Surveys were collected through Typeform from 25 potential customers and 33 past customers. Questions focused on the research process and habits when researching travel online.

6 qualitative interviews

I phone interviewed 6 past customers. Questions ranged from open and abstract, “Why did you decide to do a campervan road trip?” to straightforward, “What kind of phone do you have?” and “What are the top 5 apps you use?”

7 usability tests — low fidelity

Insights

Through my User Research I was able to identify common pains and gains from our users. These key insights were used to plan the design process.

Value Proposition Canvas

Confusion with Booking Process

Based on our website usability tests and hotjar recordings, we saw that many people were confused by where they were supposed to go. Many were also turned off by the “Quote Now” button that led to the booking platform.

Qualitative Data from existing usability test

Research Fatigue

“I did like 10 hours of research!” This was a common insight from our users. Between vehicle research and destination planning, users often felt overwhelmed by the planning process.

Show Me Everything

Users wanted to see all of the details about what’s included and lots of photos. Several users suggested showing an actual blueprint of the vans to have a better idea of what was inside.

Impostor Syndrome

Many users or potential users were intimidated by the idea of camping and the perceived difficulties of “vanlife”. One interviewee cancelled a trip for herself and her husband after their friends cancelled last minute. In her words, “We’re not gutsy enough to do this on our own.”

Personas

Through the data collected from the stakeholder, interviews, and hotjar demographics, we were able to identify 3 distinct customers with distinct needs.

  1. European Travelers Taking Holidays in Florida
  2. North American Travelers Escaping the Cold
  3. Local “Weekend Warriors”

Journey Map

To better understand the needs and opportunities to help our 3 different users, I created a user journey map for each of the three personas. These User Journeys showed different needs and timelines for each persona.

The User Journey was divided into 4 different stages based on the common tasks of online booking for travelers:

  1. Dreaming
  2. Researching
  3. Planning
  4. Booking

Breaking down the user journey in these stages helped me understand where the biggest opportunities to delight customers exist

Minimum Viable Product

After sorting through our insights and looking at what would help users the most, we compared that with what the company would reasonably be able to implement.

Comparing impact vs. effort led us to our Minimum Viable Product.

Minimum Viable Product

  1. Mobile friendly
  2. Create a “happier” path to booking
  3. Have a simple, all inclusive infographic of what’s available

User Flows

Based on the interviews, user journeys, and data from the hotjar insights, we created several user flows to understand how different users at different points in the purchase would use our website.

From a business standpoint, we quickly decided it made the most sense to fix the flow that would make the business money.

Site Maps

Based on our flows and usability tests with the existing website, we focused on the importance of information architecture. We created a site map that consolidated information and expanded where necessary. We created with our users’ order of operations in mind.

Sketches

I strive to keep the prototyping in low fidelity state as long as possible because I wanted to quickly gather more data as opposed to spend too much time moving pixels.

Prototyping

Mid fidelity and high fidelity prototypes were created in Sketch and Invision. At this stage, a prototype was only created for the happy path on a mobile device.

User Testing

Throughout the different stages of prototyping, we found that certain things needed to be tweaked, including copy, CTA button, and the amount of information on the home page.

The Design

Our design process was rooted in our findings from our UX research.

We conducted a competitor analysis to understand the mental models of our users:

After establishing five core brand attributes alongside our stakeholder, we conducted several desirability tests using the company’s website and instagram page.

Ondevan Campervan Brand Attributes: 1) Fun 2) Cool 3) Adventurous 4) Unique 5) Trustworthy
Results of desirability testing

Feeling that our desirability test results matched our established attributes, we worked on cleaning up the existing branding of the company.

We began with redesigning the logo. The original logo contained so many colors it was often unusable in different circumstances. We created two variations of the new logo based on light or dark backgrounds.

We also changed the typeface from Satisfy to a combination of Playball and Montserrat. Playball seemed to have more character and substance, as well as better legibility due to the variations of weight in the characters.

Original Logo

We took the colorful, playfulness from the original branding and tried to capture that in the new style tile we created. We wanted to create a theme that was at the same time funky and psychedelic, while maintaining its professionalism and modernity.

The color palette and shapes were based heavily on the artwork of the actual campervan vehicles. Customers are drawn to the fantastical colors and designs. We wanted to express that same whimsy in our site design.

Style Tile and Library of Atomic Design Elements

The Prototype!

You can test out the prototype here! The prototype is specifically meant to highlight the new content on the homepage and the most common path to booking Home>Our Vans>Photos>What’s inside>Book Your Campervan

Key Findings

We were surprised to find key differences in where the booking processes differ for European vs. North American Travelers. We did not realize that they had such big differences in key determining factors in booking, for example — gas mileage vs. bed comfort.

This was one of my first projects where I focused on multiple users and different flows. It was really interesting and gratifying to explore all of the different ways the site would be used by different users.

What Would I do Differently?

I love to research, which sometimes makes it difficult for me to switch over to the creation step. I loved creating this product though! I wish I would have jumped into creation a little earlier so that I could have made more content in the time I had available.

What I Learned

This project gave me a deeper insight into some of the different specializations within UX. Information architecture and copy writing were two very important considerations because of the complexity of the information, as well as the fact that many of the campers speak English as a second language or speak very little English at all.

It also gave me great insight into working with a smaller company with more constraints. It meant working within the realities of the business, such as a limited budget and a pre-existing payment platform.

Haley Kirk

Written by

The Journey of a UX/UI Designer: People-focused, fiercely fun.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade