Problem/Ask:
Hotel websites and their booking engines did not provide a seamless transition when users went to book a reservation from the website. I needed to provide a more seamless flow from website into booking engine, so users did not feel disoriented, as if they were no longer booking for the same hotel without changing the integrity of the booking engine.
Process/Solution:
Knowing that redesigning the full booking engine was not in scope, my thought-process shifted to focus on the navigation structure between the website and booking engine, while also looking for ways to simplify the booking engine navigation without changing the pages.
Working in collaboration with the product owner and business analyst, I ran a competitive analysis to see how competitors handled their booking flows. Based on this research, I determined that maintaining the hotel website menu structure within the booking engine will help maintain a semblance of where users are. At the same time, I wanted to redesign the current booking engine navigation to make it less bulky, and easier to follow.
To support the hotel menu, I provided different options for maintaining the menu structure in the booking engine, as well as provided the design characteristics.
To support the booking engine navigation, I provided options that differed in look and feel from the current navigation, without losing the integrity of the flow.
Current Booking Engine Navigation
To help narrow down the options, I ran rapid usability tests with users not associated to the project. Based on the results, along with several team discussions, for the hotel menu, we settled on Variation 1 and 2 (which can be configured via admin channels).
And for the booking engine, we went with Variation 1.
Live example of hotel menu bar and booking engine navigation
Working with product owner and development leads, the back office was built to support bringing the hotel menu into the booking engine, and the development team built the updated booking engine navigation based on the design.
Note: For the mobile responsive experience, the hotel menu was carried into the booking engine, but the booking engine navigation was not in scope to be updated for mobile.
