[Design nuances] Hotel info in search results
We've been spending a fair bit of time improving the Cleartrip hotel search. In this post, we're highlighting a small, but significant change that is part of the latest improvements.
Previously, if you were searching for hotels and wanted more details for a specific hotel, we would redirect you to a separate page with those details. If you wanted to continue searching you would have to return to the results page.

We wanted to preserve the search context and avoid the tedious back and forth, so we decided to try a new approach--display the details in a layer floating above the main results--using a navigation technique commonly referred to as a modal window. We first tried this out on our Flight + Hotel search:

We liked the fact that the new approach eliminated the back and forth, but felt the information display needed some work. The "overview" information was too scant--it looked empty; lacking visual appeal and engagement. We weren't presenting enough content in the overview, making it seem like the content was lacking. Hotel photos and maps were an additional click away.
With those points in mind, we set about redesigning the information. We split the overview page into two separate columns, letting us surface more content--descriptive content (textual) was placed on the left and visual content was placed on the right. Satisfied that the information being surfaced was adequate, we turned our attention to the smaller details.

We gave the top of the window a light blue background to emphasise the hotel name and star rating, adding pricing information below the hotel's name. The blue background was then extended further down, making the window's navigation tabs more prominent. The size of the close button was reduced by eliminating text and making it an icon. A large and prominent book button was placed in the top right corner of the window, letting users move straight to booking.
The "Map" link displays the hotel on a Google map alongside nearby hotels--there's some neat features on that map, but we'll save those for a later post.

Reader Comments (4)
1. I still dont understand why you are showing the average prices range under the hotel name when i have mentioned my stay is for three days. May be i'm missing out something... please enlighten me. Otherwise i just got excited seeing the price range and went to book the room only to find out that it was the per day price and not the total amount i will end up paying.
2. Could you make the close icon on the modal window a little bigger or may be a more obvious link which says back to search results. Ref: Fitt's Law. http://en.wikipedia.org/wiki/Fitts'_law
Overall very nice feature
http://stephencelis.com/projects/timeframe