Redesigning Booking.com

Overview

The Challenge

The challenge was to redesign the user interface of a popular app in 3 days. I decided to redesign the app of Booking.com since it is a very practical app, but is overwhelming because of all its information.

Scope

  • Validate assumptions through research.

  • Redesign 3 screens of the Booking.com app based on these research insights.

  • Create a high-fidelity redesign including a prototype.

Role: UI Designer

Duration: 3 days (full-time)

Due to the time constraints, I’ve decided to focus on the following screens:

  • Homescreen with the searchfield for accomadations

  • Results screen

  • Details screen of an accomadation

As a first important step, a clone of the chosen screens was created in Figma. Like this I was able to inspect the UI elements and to understand the functions.

Booking.com is an online travel agency for booking travel accommodations as well as flights, rental cars, taxis and attractions. Using a search and filter system, users can filter by hotel stars, accommodation type, location and proximity to individual areas, user ratings, and preferences in terms of amenities, such as for individual age groups and living arrangements, leisure activities, sports and recreation, outdoor opportunities, and accessibility.

(source: https://de.wikipedia.org/wiki/Booking.com)

About Booking.com

Understanding the existing app

Heuristic Analysis

After cloning those screens with the current design, a heuristic analysis was conducted to fully understand the UI — with its good parts and parts that could use some improvement. Especially the detailed page is complex and confusing.

Key findings

to change

  • detailed page is only one page: the user needs to scroll a lot to access all information & it is hard to find specific informations in a glance, there is no menu or possibillity to filter information

  • detailed page: the hierarchy of the elements doesn’t align to their importance

  • results page: overloaded with information, not easy to scan and to recognise the most important information

to keep

  • the search field is on each page very concise because of its constant positioning

  • how to return to the previous page is very clear

Moodboard & Style Tile

By creating a mood board that represents those defined brand attributes, I was able to create a new color palette and decide on the typography. My color palette is inspired by the beach and the ocean, including their beautiful gradients. The primary color stays blue but it is now more vibrant.

UI Preparations

In the next step, I identified the brand attributes that an app for booking vacations should transmit. Booking a vacation should be exciting and feel adventurous. It should provide freedom, organisation and be affordable. In the current design, the app doesn’t transmit the exciting and fun feeling of booking a vacation.

Hi-fi prototype

Here you can explore the redesign of booking.com and see a comparison between the current design and my proposition.

Discover other projects

  • Metime - App for self-reflection

  • E-Commerce for VeJa