A booking engine in need of some care.

ux Research

ux / UI

UI development

Context

Improve the booking engine without any drastic moves.

A few years back, I was employed at a software company that specialized in websites and booking engines for hotels. During that period, the entire team was well aware of the pressing need to enhance the mobile booking engine, but embarking on that journey felt daunting to all of us.

Despite being the creators, we found it challenging to navigate the interface ourselves. The buttons were minuscule, the navigation arrows seemed unreachable, and attempting to select just one element at a time was an exercise in frustration. As for the forms, well, it's safe to say they left much to be desired. The challenge was simple: improve the booking engine without any drastic moves.

Strategy

I stumbled upon a remarkably insightful article titled What Booking.com can Teach us About A/B Testing Strategy ↗. (While it may not be the most recent publication, I highly recommend it.) This piece delves into the outcomes derived from an iterative testing approach, which focused on making incremental refinements. It unveils how Booking.com effectively harnessed the inherent power of their existing design to drive remarkable results. Envisioning the contrast displayed in the image below, which juxtaposes the 2007 and 2017 versions of booking.com's booking engine, tt became clear that this project held the potential for a transformative journey.

This article acted as a guiding beacon, illuminating our path as we ventured into this re-design challenge. Let me just note that back then, the concepts of UX, UX Research weren't as pervasive as it is today, and we were grappling with where to even begin.

Research

Drawing from the insights of the mentioned article, we established three foundational principles:

The booking engine has to work after we touch it 😬 (the most important one!).
We will not change the visual(UI) or not in an extreme/innovative way like any designer would love to.
The goal is to improve usability.

First things first, our initial step involved uncovering the existing flaws and pinpointing the primary challenges within the room booking process on mobile devices. We mainly used 2 variations of users test/observation:

We conducted observational sessions of users engaging with the mobile booking engine. These sessions were guided by specific challenges, such as "Book a room for a family of 4 (2 adults and 2 children) on date X and location Y."
We distributed identical challenges through a user testing platform to collect data on user interactions. This included tracking user clicks, identifying points where users encountered difficulties or hesitated, and where users gave up during their attempts to address the challenges.

Those tests/observations with real users enable us to translate our findings into 5 key conclusions:

A prevailing sentiment among users was a sense of disorientation while navigating the initial screen. We opted to streamline the interface by eliminating extraneous elements such as flags and a location tab.

A subset of users experienced frustration due to inadequate identification of "not available" dates. To address this concern, we introduced a pink-ish background and substituted the price with a clear "not available" indicator.

During the process, users reported wondering why they were using our booking engine over alternatives like booking.com. To mitigate this uncertainty, we integrated a reinforcing tag that emphasized the motivation to book directly with us: "Best Rate Guaranteed."

A booking reservation with children involved was really difficult for everyone. The absence of information on how to include children in the reservation on the initial screen led to complications. In contrast to the simplification approach in point 1, we introduced an option to specify the number of children, addressing this complexity.

Depending on the weekday you were, booking to the next weekend wasn’t available on the Quick Book tab which made no sense to users. To rectify this confusion, we extended the range of days available for Quick Book, offering a solution that aligned better with user expectations.

Result

Undoubtedly, the real litmus test for this project was the most pivotal input. Armed with this empirical data, we gained understanding of our customers' journeys, enabling us to initiate A/B testing on various aspects. This encompassed factors such as tag placement, the range of days for quick booking, color schemes, button and tab sizes, among others. And now,it goes the result: a reimagined design, meticulously crafted through an iterative testing methodology, harnessing the latent potential of our existing framework.

This non-sexy booking engine turned into a really cool project that allowed us to learn about: data analysis, how to run a real test, customer journeys, A/B testing...

Right, it’s not a full UX course. Most of the time we didn’t even know if we were doing the right thing, but we’ve tried, we improved the product and ourselves as designers and the results were great:

Hotels using our platform promptly shared positive feedback on the enhancements
This transformation cultivated an environment in which our B2C clients became more deeply engaged with the product. They actively provided feedback, effectively translating their own clients' needs and challenges into valuable insights.
In less than 3 months, the updates we implemented had a remarkable impact. Direct bookings through mobile channels surged by 25%.