HotelTonight - Find Hotel + Things to Do Add-on

UX, UI & Product Design

Design for Last Minute Planning for Spontaneous Action

As competitors catching up with "last minute hotel booking” niche. HotelTonight ready faces off advanced bookings market. The last minute hotel booking with the best rates is not enough anymore. People care about their hotels and offerings at the last minute and even before!

What if HotelTonight is added micro planning functions to their app for advanced booking use case? I looked into 2 new functions add-on to their app ("Hotel Finder" + "Things to Do") based on my research for broadening hotel booker audiences on their hospitality service use case for using HotelTonight.

Conceptual Project

A personal passion project on upgrading on HotelTonight mobile app


UX, UI Design & Prouct Design


Spring, 2018

Acting Client


View the UI Flows: Find HotelsThings to Do

Micro Planning for HotelTonight

As HotelTonight expanded from same-day hotel reservations to 100 days booking, hotel bookers have the ability to plan ahead on HotelTonight mobile app, hotel bookers could plan trips on short notice with Hotel Finder on public commute before work. Or, they could use Things to Do function with a greater discount after they made a deal with HotelTonight, planning at hotel.

phone-sceenFilter Option

Prototype showing Hotel Finder Interaction Design Demo

Hotel Finder

Considering both currated and detailed finding, I made HotelTonight's category page as a Quick Find feature base on what HotelTonight's category system on the hotels. The second find page is acted as Detailed Find page helping hotel bookers with their specific use case.

Even if a hotel finding has no match, the result page would showing the next best hotel offerings base on the predefined finder. At the end of the check out, the page leads to What’s Around Me for that specific hotel's offer.

Hotel Tonight - UI Flow, Find Hotel

Things to Do

By adding “Things to do around me” function could enhance the user experience of the app and generate new income channel, making HotelTonight app more than just a hotel booking app at the last minute, but as the whole service making hotel bookers' last minute booking more accessible.

With the this function added, 1) more user data could be gathered for their hotel booking use case, 2) open up partnership deal with local businesses for giving beneficial for hotel booker and local businesses themselves.

HotelTonight - UI Flow, Things to Do

UI Enhancements and Style Guide

Find Function Button is add in the home page in the hand nature area and the edge of stretching area for the ease access for single hand usage and avoiding accidental clicks. The home page is also updated from single column to two columns, decreasing scrolling, see below for the enhancements.


How did I got there

The Emerging Problem- Not Standing out from the Competitions with the Last Minute Hotel Booking anymore

HotelTonight was the pioneer in the last minute hotel booking back in 2011. Many competitors, like and Expedia slowing catch up last minute hotel booking offering with greater functionalities and functions. HotelTonight is losing its novelty for the last-min booking niche with lack of abilities catering other specific use cases. Hotel bookers cannot find their desired hotels that fit their requirements easily and only using the app with a single purpose for booking hotels only.

Additional Problems

  • The app’s function is only limited to basic hotel scrolling and booking base from location searching function.
  • No hotel filter option if users have ideas in mind for what they want.
  • Hotel bookers using HotelTonight as an option for cheap pricing comparison, and not as buying platform. They directly go to hotel book rather via app for giving out credit card information.
HotelTonight - SWOT

Research, Design & Development

Most people want to book hotels at advance cause they want to make sure they have a place to stay before and fit their budget.

During the user research phase, I conducted 7 users, trying to understand what's their needs and why they may or may not using hotel booking services. I looked into people who using hotel booking services at daily for work, and people using hotel booking services at special occasion. To add on, I was also curious about the users' nightlifes lifestyle, as HotelTonight's brand suggested on night scene.

The research methods covered from casual conversation interviews, to live online text chat, and questionnaires. Questions like their booking preferences and nature of their use case were came out. View sample interview questions.

Type of Hotel Bookers

To help guiding my design choices, I created two personas based on my research, each one addressing his/her needs for what might be the jobs to be done for them. I addressed those UX needs as my design archetypes for the possible functions.

Business Hotel Booker

Business Hotel Booker

They are likely a Salesperson or technical support/Specialist that require on-site meetings. They usually book at very last min booking due to the nature of their jobs. They don’t know their schedule until very last min when required. They typically have a strict budget or a particular brand/chain of a hotel that they are looking for. They usually have an internal system for their hotel booking.

Leisure Hotel Booker

Leisure Hotel Booker

They usually book a hotel for vacation or leisure usage, They are flexible for what they looking when booking a hotel, but they would like to save a bit as they can when looking for a hotel base on my user group selection. They would say “planning is part of the exploration journey when planning their vacation”. They often choice Airbnb or hostel for different option.

IA, and User Flow Development

Instead re-defined the whole new app flow, I looked up the HotelTonight's existing IA to see if the new proposed functions could integrate to the initial app's system. I looked the user flow of proposed functions anticipating what might be needed in the UI.

HotelTonight Information Architecture

The Proposed Functions IA and User Flows

Sketches, Prototype, and Testing

A quick sketch of a whole re-defined UI was made to see if it was the best direction. Later I believe it was better the new proposed functions was serving as the supplements for enhance the experience. Most app users hate major refine of their existing flow.

The new wireframes was made quickly and converted as clickable prototypes for testing out the wordings, flow and adjustment of the UIs. Eventually the UI was developed as high fidelity prototype as shown at the beginning.

Filter Option → Find Hotel

Filter Option

What’s Around Me → Things to Do

whats around me
HotelTonight - UI sample

About HotelTonight

Launched in 2011, HotelTonight offers the world’s best mobile apps for booking hotels. HotelTonight make it remarkably easy to book great hotels at amazing rates on your mobile device, for tonight, tomorrow and beyond. When hotels have unsold rooms, they load them onto the app, which means incredible deals. We screen every hotel featured, and only work with ones you'll love.

View More