Booking.com Redesign

  • below is the hotel specifics page of the original website on the left and my redesign on the right.
  • Although booking.com has been very helpful for my getaways and family vacations, the website itself starts to feel a little outdated. The interface is cluttered with heavy words, repetitive information, and distracting colors.
  • original booking.com interface
  • So I decided to redesign their website with a more minimal approach. I started with wireframes of 5 different pages, used those to conduct a “wizard of oz” test, and created a high-fi (look-like) model of the hotel info page, which is what you saw above.
  • For the first iteration of wireframes, I included pages for home, search result, hotel information, and a check out page. I also added a "saved" page, which functions similarly to a wishlist from a shopping website. Users can save hotels that seem appealing to them, and can access and compare them easily.
  • navigation flow of the wireframes
  • next I conducted a "wizard of oz" study using the wire frames. As users "click" on each button, I swapped their current paper with a new one corresponding to what the button leads to.
  • While user 1 was browsing the hotels, she mentioned that she is looking for one in her budget. In response, I added a way to order hotels through prices.
    When user 2 tried to go back from the hotel detail page to the search result page, they did not click on the “back to search” button, instead they used the backwards arrow on the browser. This is a clear indicator that the placement of the back button needed to be at a more intuitive placement.
    I then updated the wireframes and the navigation flow chart.
  • For my hi-fi mock up, I reduced the repetitive information to make a clean interface. I also ordered everything in a single column format, so the user does not have to bounce left to right to search for information.
    Scroll down to see my redesign!