UX/UI • Prototyping

Resort Booking Widget

Wireframe Prototype

Note: These prototypes were created in a previous version of Sketch; some bugs can be expected.

Desktop Prototype
Mobile Prototype

Functional Requirements

Departure Airport Selection

 
 

With location services enabled, the departure airport input can be prepopulated based on the user’s location.

 
 

The airport list can be searched by city or airport code.

 
 

Or the user can select from a full list of airports.

 
 

Resort Selection

 
 

The resort list can be searched by keywords or associated destination.

 
 

This is also done through incremental search.

 
 

The user is displayed a message if no matches are found.

 
 

If a user is navigating within a particular resort, that resort is prepopulated.

 
 

Or the user can select from a full list of resorts.

 
 

Travel Date Selection

 
 

Users select a check-in and check-out date, which, when selected, populate in their respective input field.

 

Users can navigate through present and future months while previous or unavailable days and months are disabled.

 

On mobile, months are navigated by scrolling vertically.

 
 

A user can also manually enter or edit either date through keyboard input.

 
 

An error message is displayed if the date format is incorrect or the date range is invalid, not meeting the required length.

 
 

Room & Guest Selection

 
 

By default, the input provides one room and two adult guests.

 
 

If the brand is family-friendly, the user also sees a children counter for each room.

 
 

Adding rooms or guests is reflected in the input.  Adding additional rooms also adds the ability for users to remove rooms from their query.

 
 

Adding children adds an age dropdown to the interface.

 
 

Additional information regarding the age policy for children is displayed in an informational popover.

 
 

The maximum number of rooms is 4.  Once this threshold is reached, the ability to add rooms is disabled.

 
 

The maximum number of total guests is 8.  Once this threshold is reached, both the ability to add rooms and guests is disabled.

 

Interface Design

 
 
 
 
 
 
Previous
Previous

Sunscape Resorts & Spas Design System