Case Study: Redesigning Booking.com –UI Challenge
The Challenge
As part of our Ironhack UX/UI Design bootcamp, we got the challenge to redesign the user interface of a popular app. I decided to redesign the app of Booking.com since it is a very practical app, but is overwhelming because of all its information.
Goals
- Validate assumptions through research.
- Redesign the Booking.com app based on these research insights.
- Create a high-fidelity redesign including a prototype.
Tools: Figma, Slack, Zoom.
Role: UX/UI Designer
Duration: 3 days (full-time)
Scope: Designing 3–7 screens, UX not mandatory but optional.
About booking.com
Booking.com is an online travel agency for booking travel accommodations as well as flights, rental cars, taxis and attractions. The company has access to the placement of over 28 million accommodations worldwide. It owns and operates a website and an app of the same name, which is available in 43 languages. The portal can be used to book hotels and vacation apartments, flights and rental cars, and to reserve cabs to the airport. 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. Information about accommodation is specified and determined in a booking process. For hosts, the site offers several tools for setting up, managing and analyzing accommodation.
Understanding the existing app
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.
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
Redesigning
Mood board & Brand personality
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.
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. The chosen type “Quicksand” has rounded corners and is very legible.
Hi-fi prototype
Here you can explore the redesign of booking.com and see a comparison between the current design and my proposition.
Next steps
In the next phase an accessibility testing regarding the contrasts is required. The cards with the different accomadations may need some changes to make the most important informations clearer. Also I need to evaluate which information is maybe needed in the redesign from the original one as I drastically reduced it. I need to run some usability tests to find that out and also to test if highlighted text in red and green is useful to the users.
What I learned
To decide to redesign a booking app was challenging. It provides a lot of needed information and feels often very overwhelming. During the project I also tried out some other apps to see what they do perhaps better. That’s how I came up with the simple but effectiv way to devide all the information on the detailed page into categories so the user can easily find the needed information thats relevant to them. First, I was overwhelmed by the app and had no initial idea how a redesign could look like. But I trusted the process, and than ideas developed very naturally. That was again a big “aha-moment” during the bootcamp for me, and I tried to internalise the motto “Trust the process”.
Thank you for reading & let me know what you think about my proposition! :)
