Jesica Chu logo

Booking.com

A Redesigned Web & Mobile Site Experience

Overview

Overview

  • Role:
    UI/UX Designer, UX Researcher, Visual Designer, Presenter
  • Collaborator:
    -
  • Tools:
    Sketch, InVision, Illustrator, Photoshop, Zeplin, Pen & Paper, Google Docs
  • Platform:
    Web Browser, Mobile Browser
  • Timeline:
    Jul - Sep 2019 (part-time)

Background

Booking.com is one of the world’s largest online travel platforms where millions of guests find their accommodation and accommodation providers list their properties for short term rentals. As of 2019, “Booking.com has over 3 billion guest arrivals across all property offerings since 2007 with 750 million of those guests arriving at alternative accommodations including homes, apartments and other unique places to stay”1.


Problem

As the world’s largest accommodation booking website, Booking.com’s web and mobile sites are outdated and cluttered with information compared to other competitors. This project aims to enhance and simplify the process and experience of booking accommodations for all types of guests, by improving the user experience and refining the UI and branding of the company.

Note: Booking.com has a well developed and designed mobile app. My focus for this project is to tackle their mobile site.

creenshots of current home pages
screenshots of current Booking.com web and mobile home pages

Solution

I redesigned Booking.com’s web and mobile sites to provide an uncluttered interface and easier access to information for travelers to explore, find, and book the most suitable accommodation without feeling overwhelmed.

final desktop design final desktop design final mobile design

My contribution

As the sole member of this project, my responsibilities included company and user research, user interviews, designing user flows, interface design, interaction design, sketching, wireframing, prototyping, usability testing, quality assurance, visual design, creating design guidelines as well as presenting and demoing the project

Approach

The plan was originally focused on the visual design, UI, and branding; however, I decided to include UX into the project as this will allow me to understand what customers really need. Overall, the process helped me deliver the best solution that not only looked good but also solved guests’ pain points.

design process

Research

There are two main groups of users who use Booking.com: guests looking for accommodation options and accommodation providers catering to those needs. For this project, I’m focusing on the guests' experience since it’s the company’s main target audience.

Once I decided to improve both devices' guest experience, I did some competitive and market research along with website analysis and deconstruction.

Research

Market & Competitive Analysis

Booking.com holds the first position in the global market for providing a wide range of accommodations as well as other types of travel reservation including flights, trains, cars, and taxis. With that said, the company isn’t the only provider of accommodations so I started by researching the market to find out more about their competitors so I could analyze their website and mobile sites.

competitor logos
content from www.owler.com

I wanted to do a research and analysis on the top 5 most popular competitor sites for booking accommodations but found out that most of them are from the same parent company- Expedia Group.

competitive analysis competitive analysis

Note: Since the number one competitor is Expedia Group and they own 6 of the 10 competitors, I decided to replace it with Expedia instead to get better data.


After reviewing the competitors’ websites, we can see that most of the accommodation websites have similar qualities such as lengthy content and information on the homepage, big footers, lots of filters and options, a blog section, and so forth. Websites that belong to the same parent company tend to look and have very similar styles and provide almost the same services with a different branding.

SWOT Analysis

After I gathered all the competitive data, I decided to also do a SWOT analysis based on the market findings. This helped me better understand the business from different angles.

swot analysis

Interviews

After the research, I conducted 3 user interviews mixed with a few guerilla interviews to learn how people use Booking.com as well as other similar services to book for their preferred accommodations with features they liked and disliked. Those methods were useful as they were agile, and I got an idea of the most common pain points.

The participants followed a few criteria: has travelled recently, travels frequently, and has booked accommodations online.

After analyzing the data, I found out guests are mainly stressed, irritated, and disappointed when they try booking for accomodations online.


Stressed:
Property and host information is hard to find along with contacting and receiving messages from them
Irritated:
Pages are too cluttered with information so there’s a lot of searching. Once they find what they’re looking for, prices and options are now different from the initial search
Disappointed:
Information retrieved isn’t the most transparent one. Full prices or specific location rules aren’t shown when looking through the options. Some of the fees are only shown during the payment page

Design Opportunities

After synthesizing the research insights from the interviews, company analysis, and market research, I brainstormed and came up with a few potential design opportunities for improvements

  • Add a section with property and host information including any type of warnings and/or latest announcements
  • Improve overall usability and experience to make the website and mobile user-centred with a better layout and fewer sales strategies or ads
  • Show all fees on room options for people to know the full prices before going into the next step/screen as well as any type of rules/regulations by the original providers

Design

Ideation

During this stage I started thinking and brainstorming what the user and work flows were going to be as well as the way information should be reorganized, as this was one of the main pain points users had when trying to look for browse and book for accomodations on their system.

Design

Sketches & Wireframes

With the proposed solutions in mind, I sketched several concepts for both the web and mobile versions. In total, I sketched 2 screens for web and 3 for mobile with one of the screens being created on both device types, as stated in the requirements.

I began sketching and redesigning one of the web screens to make sure I was able to tackle correctly one of the main pages. Then, I continued creating all the mobile screens considering those screen dimensions needed more work. Once I finished the mobile screens, I was able to translate with more ease some of the designs into a wider version for the web.

sketches
sketches of 2 web (top) and 3 mobile (bottom) screens

I then translated those ideas into digital screens using Sketch focusing on the mobile version first since I had in mind to redesign most of their screens to create a better interface and experience. Then, I realized the more wireframes I created and the more time I spent on them, the more detailed everything was becoming, and it meant the less time I had to turn them into mockups and high-fidelity prototypes.

Due to the time already spent on the detailed wireframes, I started to incorporate wireframing and mid-fidelity looking mockups into a mix of the two of them. Without worrying too much, I continue creating mid-fidelity screens for all of my wireframes to keep them consistent.

wireframe of desktop screen
wireframe of homepage screen for web/desktop
wireframes of mobile screens
wireframes of homepage, property list, and property detail screens for mobile

User Feedback

For the usability testing sessions, I decided to ask coworkers and people I knew were already Booking.com users so try and test the wireframes I had. I asked them to talk aloud while they went through a few tasks. At the end, I chatted with them regarding the interface, the ease of task completions, and any other comment or suggestions they had to improve their overall experience. I did a few short tests and with the data gathered, I revised and implemented those changes to the wireframes.

Moodboard & Style Guide

As I started with the mockups, I needed to include elements I preferred for my final prototypes so I began by creating a mood board. The mood board included new elements like icons and buttons as well as current brand and design guidelines from Booking.com since I still wanted to keep it recognizable.

I developed the style guide together with the mood board before going into prototyping to ensure consistency.

moodboard styleguide

High Fidelity Design - Iterations

Based on the new style guide, I made changes while finalizing all the hi-fidelity screens. In the meantime, I conducted the first round of usability tests with the new design and had some good feedback. Some segments needed more work than others as people use the sites differently so they have different needs. I then did some iterations and another round of testing to test and tweak more details.

I used Sketch and InVision to create the mockups and prototypes to illustrate enough functionalities for me to test my design opportunities.

homepage iterations

Evaluation & Iterations

Usability Testing Process

A few more usability tests were conducted; however, this time was more visual as I wanted to focus on the redesign of the site to make it as clean and easily accessible as possible. One of the biggest problems was the large amount of information scattered around the pages with no hierarchy to the content.


During the testing sessions, I asked my users to talk aloud while I observed them complete simple tasks. Having users talk aloud allows me to understand what they are thinking and how they are trying to navigate the system. By observing them trying to complete the tasks helps me really understand how they use the system as people aren’t used to talking aloud every action and they keep quiet when they encounter an obstacle, which is a sign for me that it’s something that needs attention.

usability tasks

Evaluation & Iterations

Feedback & Design Iterations

Overall, all my users were able to complete the tasks and reduce the completing time compared to the original site and during the wireframing stage. Majority of the feedback was about how clear and easy the process of looking for certain information or booking for a room got. They were usually overwhelmed with information that they could not remember where the information was.

After collecting and analyzing a few more results, I implemented the proper iterations and made changes were needed.

final desktop design
redesigned homepage for desktop
final mobile design
redesigned homepage for mobile

Latest Design

A set of high-fidelity interactive prototypes for web and mobile were created to present the best solutions with a new interface while also showcasing a new brand style guide. The new design helps guests find the information in search without feeling overwhelmed with the amount of data on each page while spending less time per task when trying to book for accommodations.

I delivered a presentation and demonstrated an interactive prototype for the new Booking.com. Everyone was impressed with the project that it gained positive feedback mainly by how the new sites have users in mind, how modern their new sites look, and how easy it is to view all the information needed.

homescreen view
properties listing view
property details view
final redesign
Booking.com experience redesigned for web/desktop and mobile
try me, i'm interactive :) *Dreaming of a Bali vacation?

Latest Design

Future Steps

If I had more time, I would like to expand the project to include more practices for the user experience as this project was mainly focusing on redesigning the user interface.

Develop Remaining Screens

Finish designing and developing the remaining of the desktop version screens as well as to redesign more screens for both web and mobile. Ideally, I would like to redesign the whole site and experience.

Usability Tests & Surveys

Conduct more usability tests for the interface as well as the features for both platforms. I would also conduct observational studies and use heatmaps to better understand how users are navigating the site and performing tasks.

Future Steps

Reflection

For this project, I challenged myself to redesign one of the world’s largest online travel company's web and mobile site. I learned from this project how the simplest research combined with interviews and wireframes were crucial steps for creating valuable user interfaces to help guests focus on what is needed. Additionally, I also gained an understanding of how to (re)design for an already existing and successful company.

Reflection

Achievements & quotes


Looks much better! It’s clean and easy to use. The notifications would have been nice for my last trip.

Helen, Booking.com user

I love the new look. I don’t get overwhelmed with options and it’s easier to find what I’m looking for.

Hernan, Booking.com frequent user

Your moodboarding is especially strong, as well as your ability to visually "reverse engineer" a screen design. When I look at the before/after of your screens for the booking.com site, it’s really something else [...] Specifically - your hero sections for mobile and desktop… very badass.

Randy G., Consultant and Creative Designer

Achievements & quotes

Next Project

Mindless Invoice