Creating a new booking experience.

Responsive Booking Engine for a Tour Operator Company.

Rocío Cano
Dec 13, 2019 · 5 min read

About the project

A leading European based tour company wanted to offer its unique local experiences in Italy, France, the UK, and Spain through a brand-new website easy to navigate and mobile-friendly.

The main focus of the redesign was to create a new experience during the booking flow. I was responsible to create the new user journey from the research to the ideation, prototyping, testing, and visual design.


Research

The problem

As the first step of the redesign process, I evaluated the website with the heuristic review method.

Old booking widget
Old booking widget
Old booking widget

The old booking widget was clear and easy to use but there were problems when there was no availability or any other type of disruption for the selected option.

After filling all the fields, users could get the unpleasant surprise that the selected option was not available without any other type of feedback (the reason why was not) or alternative options (different start time). Leading to unhappy customers abandon the website.

Besides the availability problem, the old booking widget did not provide all the information a customer might need to get engage with the brand, such as promotions, dynamic prices, different start times, similar experiences or add-ons.

Competitive Research

We noticed all of our competitors had a similar experience to ours and we wanted to find a way to differentiate us from them. We started to look at other travel industries such as hotel bookings or flights to understand what of the things they were doing we could use to our advantage.

As an example, on hotel bookings, there are informing at the same time that creates urgency the number of rooms available at the price. From the flight industry, we took the part where they show the users more days than the selected one.

Comparison chart

Ideation

Concept map & User flow

In order to better understand the information to display during the booking process, we create a mind map to visualize all the characteristics to take into consideration when someone is booking a tour.

After that, I created a user flow diagram to map the main steps of the user interaction required to achieve the purchase of a tour.


Prototype

Wireframes

First wireframe

In order to keep the steps as simple as possible at the same time that we displayed all the info we wanted we decided to use a calendar view where each day will contain the price, the promotion (when applicable) and the availability. During the process of designing, we iterate different times of what that calendar should look like. We did some wireframes to test the flow and also the first layouts.

After that test, we realized the flow was right but in order to follow a mobile-first approach we needed to change the layout. Finally, we prototyped a desktop and a mobile version.

Prototypes

Low-fi: https://marvelapp.com/6gj4bg?emb=1&iosapp=false&frameless=false

Mobile high-fi: https://www.justinmind.com/usernote/tests/17952647/18427241/27806686/index.html#/screens/0d947885-a12a-4c4d-b865-11fcba5e6e91

Desktop high-fi: https://www.justinmind.com/usernote/tests/17952647/18427241/27791452/index.html#/screens/d12245cc-1680-458d-89dd-4f0d7fb22724


Test

Usability Testing

Usability test scenarios

We tested our website two weeks before the planned release in order to find critical errors that could not lead to sales.

We invited to our office 30 people aged 18–45 who like to travel and have different levels of online shopping experience. They tested the website using different devices and were assigned specific tasks.

Overall the results were quite positive. The main issue found was on mobile during the tour page, 35% of the users could not find the “book now” CTA due to the design so we decided to change it to look more like a button.

A/B Test

A few months after launching the website, we started to run some A/B tests for some of our main features. Regarding the booking widget we noticed users are less likely to progress from clicking ‘Book Now’ to ‘Check Availability’ (62%) on desktop compared to mobile (70%) & tablet (71%). We expected that by making the Booking process more immersive, this would create a less distracted user and will lead to more tour bookings. We measured this using Google Analytics to measure “Check Availability” clicks and progression throughout the booking funnel.

Change: Booking slide-out functionality was changed to one that pops up from the bottom of the screen, with the background darkened and faded out to prevent distraction. Finally, a text-based progress bar has been added with headlines. These display which steps the user is currently on and what steps are remaining.


Results

  • + 5% Increase in Shopping Cart Progression
  • + 16% Increase in E-commerce Conversion Rate
  • + 201k Uplift in Revenue Over 6 months
Rocío Cano

Written by

Product designer

More From Medium

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