ABOUT
Background
Booking.com is a large platform that compiles: hotel booking, flights, car rental, tax services and attractions to book. The user has access to articles, tips and how to enjoy their holidays and explore a new city.
The font chosen was Ubuntu, which has good readability and x-height, and resembles the typeface of the Booking.com logo.
The colour palette was kept from the current app, however, the ton of the blue and yellow was changed to bright options. Yellow is used mainly as an accent colour and blue on the buttons.
Some icons work together with text as a button, which is the case of the menu on the Search page.
The information icon was filled instead of outlined to stand out in the design since it’s relevant information that the user should read.
UI Kit
USER INTERFACE
Current & New UI
Notes
1
The main menu on the Search (main) page is going to have the same functionality and display, with a different design. However, it will be kept on all pages. For example, currently, when the user clicks on “Flights”, it redirects to the page for flights without the menu on the top.
2
The fields were changed to reflect the UI proposed
3
All COVID alerts/links will have the same style. Currently, each page that displays COVID information has a different style. and icon
4
In these sections, there were more changes. Currently, is hard to understand this section and the user can’t see the locked features that he could unlock. Now, the status is displayed at the top with “User, you’re at Level 1”, and the levels unlocked and locked are displayed below
5
Exploring this section I realized that it was displaying tips, trip advice and articles, so I designed it accordingly to make it clear and clickable.
Current
Proposed UI
Notes
1
Menu kept in all related pages as well the notifications. The back button is not necessary since the user has the menu.
2
The bottom menu is kept on all pages of the app
Current
Proposed UI
Notes
1
These 3 links are part of the settings inside the profile. There is no correlation with the content displayed on Find a rental car page.
2
A secondary button suit better for the new proposal
Current
Proposed UI
Notes
1
Maps display when the page is opened, not only when the user selects the location
2
Use current location is displayed when the user clicks on the field. It was added on the main page of Find a taxi.
Current
Proposed UI
Notes
1
The cards for destinations and attractions will be displayed in 3 columns
2
On This section, it gives the option for multiple selections, and since the horizontal menu is too long for this situation, it was designed differently.
Current
Proposed UI
EXTERNAL HELP
Tools Used
Adobe XD
CONTACT