Hotel Booking Application
UI/UX Case Study
Overview
Imagine you as a traveler, deciding to take a break from work and plan a trip which is away from work, surrounded by nature, the finest food, and most important, peace.
But wait, a delightful vacation is one thing, but planning is another thing. Let’s say you’ve booked your flight tickets, and now it’s just a matter of booking the hotel. Finding hotels that match your needs and also in the budget is difficult to find, but what if an application provides you to explore, search hotels, see their amenities and reviews, and book within few clicks.
Main Goal
Make every process or interaction that hotel users/guests make in booking hotel rooms on the application to be more intuitive, more informative, faster, cleaner, simpler, and more effective.
User Journey
Here is the fundamental user journey from onboarding to the user till the payment of the hotel booking.
UI Style Guide
Red is a highly visible color to attract the attention of the users. It also has the power to help users to make quick decisions. The font color is a combination of black and gray colors which makes the text pleasant to the eye and easily readable. White is used as the background color to keep the app clean and minimalistic.
Helvetica Neue is used as the main font because it is designed and optimized to enhance the reading experience at the smaller point sizes also.
High Fidelity Design
After a lot of iterations, here are the high fidelity designs for the application.
For the first time user, onboarding screens will introduce the app and its functions. The main three functionalities of the app are Explore, Find Deals, and Book. The user can also skip the onboarding and directly register to the app.
For users who do not have an account, users are asked to fill in their data in the form of first name, email, password, and agree to terms and conditions.
Users who already have an account can directly login via an email and password. They can also reset the password, in any case, they forgot it.
Once the user login/register, they will be directed to the explore page, where they enter the details of their future trip. According to the parameters entered, they will be able to see the curated results for the same.
Users can also search via location and find top deals and top hotels. Clicking on the view all text button will take them to top hotels of all the time.
Top hotels will be visible for the location selected that can be modified as well as the user can filter the search as per their needs. Users can save the hotel for future reference or they can directly book the hotel. They can see the hotel description by accessing the hotel card.
The user can see all the details of the hotel, including the rate, images, contact details, amenities, reviews, and ratings.
The user can see the ratings and reviews written by other people. They can also write a review and give ratings for a particular hotel.
The reviews will help them to decide whether they want to book that particular hotel or not.
If the user is interested and will book a hotel, the user has to fill in their name and contact number. At the same time, the user can choose the number of guests and rooms as well as the check-in and check-out schedule.
If the user has filled in the details and confirms the hotel booking details, then they will land on the payment methods screen. Here the user can choose from several payment methods.
And if the user has successfully made a payment, the hotel booking process has been successful. After that, the user can return to the homepage.
The user can access the wishlist and profile section from the tab bar in the navigation menu.
Wishlist feature is important because the user can bookmark or save some hotels to compare it later or save for the future trip.
The profile includes past bookings, payments and refunds, help and support, and a logout option.
What are the next steps?
- Deep research about specific features
- Usability test of the prototype with users
- Improve user flow
- A comprehensive business model
Final Thoughts
The goal of this app is to make every process or interaction that hotel users/guests make in booking hotel rooms on the application to be more intuitive, more informative, faster, cleaner, simpler, and more effective.
Download the Free Sketch file for this app here
Thank you for reading.
