Overview
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.
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.
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.
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
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.
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
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.
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.
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.
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.
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.
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
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
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.
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.
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.
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.
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.
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.
Evaluation & 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.
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.
Latest Design
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.
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.
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
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
Looks much better! It’s clean and easy to use. The notifications would have been nice for my last trip.
I love the new look. I don’t get overwhelmed with options and it’s easier to find what I’m looking for.
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.
Achievements & quotes