booking
dream
holidays

Helping 1 million customers book their dream holidays.

On the Beach Plc is one the biggest summer holiday providers in Western Europe sending over 1,000,000 customers on their perfect holiday each year. Rapid company growth and popularity of mobile devices demanded reconstructing current website to offer unified experience on every device.

Since 2007 OTB website was not responsive at all, using two separate instances for mobile and desktop users. Growing popularity of mobile devices was a strong signal for On the Beach to introduce a refined mobile experience.

edtwist edtwist

My role

I led the design of responsive framework across iOS, Android, Desktop and Web since the outset of the project in July 2013. Up until July 2015, I led efforts to evolve the service and address customer pain points related to the browse and discovery experience.

The challenge

On the Beach website structure was divided into 2 separate apps:

  • Non-responsive desktop website
  • Mobile version of the site with limited functionality

In’ve teamed up with projects managers and senior developers to pin point exactly which areas are the most and crucial parts for the business, so we can quickly iterate current non-responsive website and implement some of the quick wins for our customers before moving to the bigger parts and new framework in the near future.

The usual - wall full of Post-it notes! In this case we were grouping pain points together

Defining clear objectives and scope

The research phase made it easier to define a scope for the project. Here are the main business objectives

  • diminish the use of different variations of the website
  • automate and computerize as much as possible the process to reduce manual entries
  • simplify selection of available products
  • ease booking and checkout process

These objectives implied naturally to make the process of creating and sending report less tedious and therefore more fun.

The approach

Key features

The first part of the project was to conduct detailed interviews with the analytics team and project managers. It allowed me to understand conversion funnels much better.

First stop would be the kickoff: I'd get together with our PM to go through the backlog of features and customer requests, and re-prioritize them on a weekly basis. I would facilitate these exploration sessions through whiteboard documentation or design.

I'd take notes (and document photos) throughout our discussion so that we could walk away with action items. Then I'd head back to my computer to document the notes and begin sketching flow diagrams or layout concepts.

At certain checkpoints, it was time to review the various iterations (and the new insights/problems/ideas) that I'd worked through with my PM. After those were addressed, I may have jumped into a prototype to get a better feel for the flow, interactions, and general usability with our more refined problem/goal in mind.

Designing the foundations for the new basket

As soon as we were all at the same page concerning the objectives, I started working on userflow and wireframes to present my vision. I worked on different directions which I validated or invalidated with the teams. In the end we agree that new basket should:

  • Show only important data
  • Save the screen estate
  • Be always accessible
  • Follow the user on page scroll
  • Use similiar patterns

User interface components

Once we validated navigation principles with teams and managers and we were satisfied with the low fidelity visuals, I started to work on the user interface itself. I started with high fidelity mockups and refined them over time to make sure that the information architecture is layed down appropriately.

Making On the Beach responsive

With the skeleton and the prototype validated and tested, I worked on the User Interface. I wanted to keep the interface simple and minimal, yet colorful as well as playful. Colors quickly inform the user what he/she can interact with and where the important pieces of information can be found.

Card based design

With our new framework, we've introduced a new card design for both mobile and desktop as an entry point to more detailed information and help customers focus on specific stories. Each card shows the most important data - hotel's name, locations, photo and ratings

Results

With the skeleton and the prototype validated and tested, I worked on the User Interface. I wanted to keep the interface simple and minimal, yet colorful as well as playful and attractive. Colors quickly inform the user what he/she can interact with and where the important pieces of information can be found.

When it's manual, it should be fun

Obviously, everything can’t be automated and sometimes users have to manually enter data, or copy and paste some text. As it can’t be avoided, I created an interface which make it easy and pleasant to add information. My overall goal was to make an application which is both esthetically pleasant and practically useful.

A delightful holiday search experience

Here is the main interface, where customers spend most of their time researching about their summer retreats. Thanks to the responsive design, and general IA restructure - the search is less tedious and more fun.

+24% ConversionIncreased engagement and booking completion.

£140k RevenueEstimated increase in revenue per month.

+15% CustomersIncreased number of returning customers.