Project Description

unBooked is a travel application designed to bring you the best accommodations at the lowest price.

Why can't I see the name of the hotel or the street address until after I book?

When brand-name hotels have rooms that would otherwise go unsold, they use unBooked to fill them, so you get them at incredible rates -- prices lower than any other travel site, guaranteed.

For us to bring you these great deals, we can't give you the hotel or street address until after you book. Once you book your room, we immediately confirm your reservation and show you the hotel's complete details, including its name and exact location.

We clearly list the hotel's star rating, area and lowest price. You'll also be able to see the city area where each hotel is located, along with an area map, allowing you to review the hotel's neighborhood location. In larger cities, we may also provide a description of the area's character, and a list of local landmarks and attractions found nearby.

Autocomplete location search using Google Maps.

Date range selection - Background changes based on selected location. 

Easily manage number of rooms / guests in a single dropdown menu.

 

List view of hotels based on availability and search criteria.

Map view of available areas in a selected region. 

Check out the prototype walkthrough created using InVision app!

Easily manage and adjust search criteria on the fly while browsing. 

 

Accordion style check out allows the the customer to concentrate on sections independently while keeping all information organized on one page.

Check out in no time with two easy steps or easily adjust your trip using the search criteria bar at the top.

For usability purposes, an ‘Edit’ link is featured at the bottom of each completed section. The completed section is always visible to enable the user to quickly glance and verify their past entries. Note how the summaries of past steps are displayed in a greyed out font and a multi-column layout to conserve vertical space.

Payment Methods: Tabs are used to indicate that the payment methods are mutually exclusive. They also allow for quick payment method selection.

If you're still reading this... 

The back-button issue: Users expect the back button to take them back to what they perceive to be their previous page. Perception is the key factor here, since there’s often a discrepancy between what is technically a new page and what users perceive to be a new page. To avoid this issue it was recommended that the client incorporate “back-button support”. This back-button support can be achieved by using the HTML5 History API. More specifically, the history.pushState() function allows a site to invoke a URL change without a page reload, meaning the site can align the browser back-button behavior to match user expectations.