Introduction
Sri Lankan hotels provide a unique and diverse hospitality experience that mirrors the country's rich culture, stunning natural surroundings, and warm reception of guests. This island nation boasts beautiful beaches, lush forests, and a deep cultural heritage. Sri Lankan hotels accommodate a wide range of travelers, from those seeking luxury to budget-conscious backpackers.
In Sri Lanka, you'll find a variety of lodging options, including luxurious resorts, boutique hotels, eco-friendly lodges, and homestays. Many of these hotels are strategically located, offering guests breathtaking views of the Indian Ocean, verdant tea plantations, or dense jungles. Sri Lankan hotels are also well-regarded for their top-notch service and mouthwatering cuisine, often featuring spicy curries and fresh seafood. They provide a serene atmosphere that enables visitors to connect with the island's natural beauty and cultural heritage.
As a UX Designer, my duty
As a UX designer, my responsibility is to address the underlying challenges in the tourism industry and propose effective solutions. For this project, I'm tasked with designing a hotel booking web application tailored for local users in Sri Lanka. This involves a deep understanding of the unique requirements and preferences of this user demographic, and I will strive to make UX enhancements that cater to their needs and improve their overall experience with the platform
How is it going to be different
Indeed, there are numerous hotel booking web applications worldwide, including well-known platforms like Booking.com, Hotels.com, Trivago, and many others. While these apps primarily cater to international users, they are also accessible to Sri Lankan locals. However, there are certain challenges faced by local users when using these platforms. These challenges include issues such as rigid pricing structures, limited accessibility, and concerns about trustworthiness.
The web application I'm designing with Techserw Labs aims to address these specific issues faced by local users when booking hotels. It's tailored to provide a more accommodating and trustworthy experience for Sri Lankan users, mitigating the problems they encounter on existing platforms.
Let’s start the research and analysis
At the outset, it's important to acknowledge the proliferation of hotel booking web applications in the market. Our key objective is to encourage users to opt for our application. To achieve this, we need to carefully deliberate on a range of factors and approaches.
Factors to consider
Consistency
It is assumed that the local users have experience in booking hotels online using other platforms. Therefore, they have the understanding of how to book hotels online. They have gone through the features of a hotel booking application. Therefore, when they enter a new hotel booking application they would be expecting the application to have the features as well they would be expecting the same experience, so that they can get done their goals easily.
The application that will be designed is going to compete with the products that are in the market. It must be ensured that the designed application must also provide the same user experience, unless they would be confused and will not consider using the product. As well, to remain in the market, it is better to have the product similar to the competitors as well.
Usability
Creating a versatile application is crucial. While matching competitor features is important, it's not sufficient if our product doesn't offer usability to our local users. Even existing market products might have their own usability challenges. Hence, it's imperative to rigorously test and ensure the usability of the web application before its launch.
User-Centered Design (USD)
Designing a User Centered product is one of the crucial parts of UX Design. In this, as the designer, the overall product design thinking and design decisions should be done in the shoes of the user’s perspective. To achieve that, the designer must understand who the user is and what kind of a product I am designing.
User-Friendly Design Approach
While it is assumed that local users in Sri Lanka are familiar with booking web applications, our design approach should prioritize creating a user-friendly product. The user interface (UI) and user experience (UX) need to be carefully crafted to align with and meet user expectations.
Competitive Analysis - the findings
Developing a hotel booking website for Sri Lankan users involves the assumption that these users are experienced in online hotel reservations. Therefore, the primary objective is to identify the existing hotel booking websites in the market and the preferences of these users. This will be achieved through comprehensive research and analysis of these websites to uncover shared features, assess user experiences, and evaluate their strengths and weaknesses. The insights gained will play a pivotal role in enhancing our website and making it more user-friendly.
Booking.com
According to Booking.com, It was, founded in 1996, is a global travel company based in Amsterdam. Their goal is to simplify travel for everyone by using technology to connect travelers with various experiences, transportation, and accommodations. They offer over 28 million accommodation listings in 43 languages, including unique places to stay. Booking.com is part of Booking Holdings Inc. and provides 24/7 customer support.
According to Statista.com, In 2022, Booking.com, experienced a significant recovery in its revenue. This resurgence came after a sharp decline in revenue that occurred with the outbreak of the COVID-19 pandemic. In 2022, Booking.com generated nearly $17.1 billion in revenue, marking an impressive increase of over $6 billion from the previous year, 2021. This revenue level also exceeded the company's pre-pandemic performance.
Additionally, the net income of Booking Holdings on a global scale amounted to over $3 billion in 2022. This indicates that the company not only managed to regain its revenue but also generated a healthy level of profit during the year.
Benefits of using Booking.com
Variety of hotels to select
Price selection
Customer service
Drawbacks of using Booking.com
Old UI trends
Poor responsive desktop
Cluttered Interface
Hotels.com
According to DPO Group, Hotels.com, originally known as the Hotels Reservation Network (HRN), was founded in 1991 by David Litman and Robert Diener. It initially offered hotel bookings via a toll-free phone service to U.S. customers. In 2002, HRN rebranded as Hotels.com and transitioned to providing online hotel reservations, which led to rapid expansion with the addition of 29 websites in two years. In 2005, Hotels.com became an operating company under Expedia Inc.
As a part of the Expedia group, Hotels.com allows hotels to list their properties through Expedia PartnerCentral (EPC), granting access to over 200 Expedia booking sites, including Hotels.com. This increased online visibility enables hotels to reach a diverse customer base through various booking channels, such as mobile devices, tablets, and computers.
Benefits of using Hotels.com
Solid UI Design
Support with the Expedia Group for hotel registration
Required information display
Drawbacks of using Hotels.com
Less variety hotels shows (Compared to Booking.com)
Less hotel selection for Guests
Less effective UX process for room selection
Tripadvisor
According to Techboomers and Perusim, TripAdvisor is a widely-used online travel platform offering user reviews, photos, and forums for hotels and resorts around the world. Users share their experiences to help others make informed decisions when booking accommodations. The platform also provides comprehensive trip planning, including the ability to compare and book flights, hotels, cruises, and restaurants, with direct links to the original company websites.
Travelers can access destination guides and informal tips from fellow travelers, often deemed more trustworthy than company-generated content. TripAdvisor enjoys a significant monthly traffic of over 460 million unique visitors, with a vast repository of over 760 million tourist reviews, encompassing roughly 7 million restaurants and accommodations, making it a valuable resource for travelers in 49 global markets.
Benefits of using Tripadvisor
Pleasant minimalistic UI Design
Better hotel result sorting compared to other websites
Hotels from variety of websites
Drawbacks of using Tripadvisor
Cannot book hotels within Tripadvisor
Does not align with the exact goal, acts as a trip guiding and advising website
Inconsistent UI Design one few UIs
Identifying common UX and features
Hotel booking websites often share common features and user experience (UX) elements aimed at providing a consistent and familiar interface for users. As a designer, it is crucial to recognize these shared aspects across various booking platforms, thoroughly analyze how they function, and evaluate their advantages and disadvantages. This understanding helps in implementing the most effective and suitable UX practices when designing the given website, ultimately enhancing the user experience.
Search bar
In the analysis of various booking websites, a common feature identified is the presence of a search bar. However, this isn't the typical search bar; it's a tool that allows users to input their destination, travel duration, and the number of guests. Despite these shared functionalities, it's essential to note that each of these websites offers a distinct and unique user experience, which will be further explored in the following analysis.
Above is the responsive view of the hotel.com booking website. It reveals a user-friendly search bar that enables users to customize their location, travel dates, and guest count. However, the user experience is somewhat less efficient when it comes to room selection. In this system, users are required to input both the number of guests and the number of rooms within the search bar. Price calculations are then influenced by these inputs, which may result in a slightly less user-friendly and flexible experience.
The search bar on TripAdvisor's landing page is deliberately designed with a modern and minimalistic aesthetic. However, it differs from other hotel booking websites because TripAdvisor serves as a comprehensive trip planning platform. When searching for hotels, users are guided through a few steps to access the hotel results.
Despite this multi-step process, the hotel search bar itself is well-designed, offering a clean, modern, and minimalistic appearance. It retains its appeal in the responsive view, ensuring a visually pleasing and user-friendly experience.
The Booking.com landing page features a search bar where users can input their location, travel duration, and the number of guests and rooms. Among the search bars analyzed, Booking.com search bar stands out for its user-friendly design, making it simple for users to enter their preferences.
However, there is a notable issue with the search bar's design. The user interface appears somewhat outdated. Additionally, the responsiveness of the search bar and its designs is not optimal in the desktop-resized version, but works well on mobile devices.
In conclusion, the search bar should enable users to easily search for hotels, input travel dates, and specify the number of guests directly from the home page. The process should prioritize user-friendliness, and the design should align with contemporary minimalist design trends.
Hotel results
The UI displayed above is Hotels.com hotel result page. It shows after a hotel search shows a list of hotels based on the user's input. It includes a search bar for users to modify their input and provides filter options on the left side.
On the other hand, Tripadvisor result page features a more visually appealing user interface. It presents the hotel results in a neatly organized list format, with filter options conveniently located on the left side.
Booking.com has the simplest result page UI, with effective use of primary colors consistent with the landing page. Notably, the search bar on the result page shows the design and functionality of the landing page, maintaining a consistent and user-friendly experience.
The conclusion is that the ideal result page should showcase all the hotels matching the user's inputs from the landing page. Furthermore, it should provide user-friendly filtering options to refine the displayed results, ensuring a good User Experience.
Hotel result filter
Here's how Hotels.com allows users to filter their search results: On the desktop version, users can easily access filter options on the left side to refine their results. On the mobile version, a full modal view, taking up the entire viewport height, provides users with a convenient way to filter their results. This approach maintains consistency across various booking websites. Down below is how other websites; Tripadvisor and Booking.com have implemented them.
Tripadvisor:
Booking.com:
Conclusion is that the filter option on desktop must be on the left to maintain the consistency and provide similar User Experience. On tablet and mobile viewport it should be presented on a modal view.
Hotel selection
The hotel selection feature is an important element of any hotel booking website, as it enables users to browse and book from a wide range of accommodations. The execution of this user experience (UX) should align with specific objectives and goals.
Above is the hotel selection of Hotels.com. In the context of Hotels.com, the hotel selection is presented in a product card format, which has its advantages. However, it's essential to note a couple of limitations. Firstly, this format may not effectively display all the room variations within a hotel, especially when there are multiple room types based on guest count. Secondly, adjusting the room count after it was initially set in the search bar can be difficult. For that the room count has to be adjusted in the search bar again.
In contrast, Booking.com takes a unique approach to the user experience for hotel room selection, using HTML tables. The reason behind this unconventional choice is the long-standing familiarity of their users with this format, making it challenging to change. A notable advantage of this method over Hotels.com is the ability to display a more extensive range of room variations.
Conclusion is that, when designing a new booking web application, it's important to prioritize a user-friendly experience. At the same time, the design should represent a leap forward, aligning with current styles rather than staying with outdated approaches. The goal is to create a UI that feels fresh and modern, enhancing the overall user experience.
Defining the process of what needs to be designed and delivered
From the information we've gathered, it's clear that there are specific UX elements that need to be considered when designing the hotel booking application. Here is what is defined and required for the hotel booking application.
Required User Interfaces:
Home landing page
The application is designed as a new product that is to be released to the market. The landing page should serve as a starting point for the new users. The page should contain the search bar, the navigation should have signup and register options for user and hotel owners.
As said, since this is a new product a brief introduction is given, however it can be removed after. The landing page should have recommended locations and hotel sections.
Hotel search result page
Hotels result page should list down the hotels according to the inputs users have given. As well as, the hotel filter option should be displayed on the left. Modal view of them should be designed as well.
Hotel details page
Hotel details page is where the details should be shown. As well as the user should be enabled to select hotel rooms.
Hotel review page
Users should be provided reviews for hotels on the selected hotel. User should be asked for different inputs for the hotel review.
Payment page
Serves as an end point for the hotel reservation user flow. Users should finalize the reservation by providing the required details.
Login & register pages
The login and register pages for the user should be designed. Login and register options should be given as well.
Required process output:
As the designer, I am tasked with designing a hotel booking web application for Techserw labs. With the given resources, the responsibility is to design the hotel booking web application that goes align and consistent with the competitor products in the market; especially Booking.com.
For the design and delivery, the application is designed with the use of Figma editor. Interfaces to be designed for 1440px, 1200px, 768, 480px breakpoint as well as prototyped.
The designs to be shown to the team members at every step and end of sprint to gather feedback and go for more iterations.
Let's start the wireframe designing
Hotel booking landing page
The home landing page is designed considering that the that the product is new to market. There is complete free are to remove the introduction. As same as other hotel booking web applications, the website that is being designed has the search bar in the hero section as well.
Hotel search result page
Hotel search result page is where the results for the search input are shown. The UI delivers what the user has asked, as well as enables the user to sort them. Here is the desktop version of the wireframe.
Below, you'll find wireframes showing how the UI for the result page is planned to look on tablet and mobile. As previously mentioned in the conclusion, the design incorporates a modal filter form that covers the entire viewport, and the wireframes provide a visual representation of that approach.
Hotel details page
Hotel details page is where the details of the hotel are shown and here is the wireframe for it. Here is the hotel details page and how rooms are planned to be shown; as card format, which had to be changed later during the design process (will be discussed later).
Hotel review page
The users are allowed to write reviews for the hotels they reserved/visited. Here is how the wireframe for the review page is designed with a form that takes user inputs from the user for the review.
Hotel payment page
The payment page serves as the final UI wireframe in the hotel registration design. On this page, users will find a summary of the hotels they've booked and the total amount they need to pay. Below is the wireframe representing this design.
Login and register page
The login and register interface wireframes are designed. Here are the designed wireframes for them.
Into the designing process
Hotel booking landing page
The hotel booking landing page is the first UI that is designed. The design took a while, as it was the beginning. As the designer, during the design a lot of inspiration is explored. Mainly, focused on consistency and providing solid User Experience. As the modern and minimalistic look was to go, that type of a landing page was designed.
The landing page featured top destinations and hotel categories for the user to select from.
As said previously, consistency was a main factor designing this, hence the features; search bar, navigation features, categories on the home page are provided for the user for a solid User Experience. The UX/UI components in the landing page are down below. Make sure that the components look as well as quality rich.
Hotel search result page
Hotel search result page is where the results for the hotel search query are shown. Down below is the hotel result search page that is designed.
As per the requirement, the result sorting options are designed as well, for both desktop, tablet and mobile. All the designs are prototypes and demonstrated to the team. Down below is the sorting options for the responsive design.
Hotel details page
Hotel details page is the UI where hotel details are shown as well the options to book hotels are given. Down below is the UI that is designed for the hotel details page.
In the given UI, users are enabled to see the images of the hotel with a gallery, read hotel reviews and see available hotel rooms.
Problems that had to face & how they are solved
The problem is this UI was the hotel booking options. Down below is the process that is designed in the first iteration for booking hotels.
However, it was understood that the given process does not allow to display all the hotel room options that come under a single hotel room. For example; a hotel room can have multiple options like with kings bed or without, with food or without, with internet or without. These options were unable to be displayed in the card format.
Let’s take a look at booking.com hotel display. Here, booking.com hotel room display is taken because, that is product criteria that should be met.
Aim is for a fresh design look, and Booking.com's current method of using an HTML-like table for hotel displays seems a bit outdated. In our team meetings, it was decided to find a more modern way to show hotel information.
Presented below is the refined design for our product, offering users an intuitive interface to seamlessly choose rooms within hotels. This comprehensive solution showcases all available room types, providing users with a visually appealing carousel for effortless room exploration. The revamped format ensures enhanced visibility of room options and their associated features, surpassing the effectiveness of the previous card-based presentation.
Hotel review page
Hotel review page is where the reviews for the hotels are submitted. A form is given for the users to submit the reviews about the hotel. Down below is the designed UI for that.
Hotel payment page
The payment page displays the hotel rooms the user has booked. As well as, shows amount the user has to pay. Down below is the designed UI for that.
Login and register page
Login & register UIs are designed for the users with options; email, Google and Facebook. Down below is the designed pages.
Project summary
The project was to design a hotel booking application for Sri Lankan users. As the designer, the duty was to design a hotel booking application that provides solid User Experience for users. The factors; consistency, usability, User Centered design, user friendly approach are used accordingly throughout the project.
As the designer, learned that how a project can be done and maintained. Since, this was my first experience designing a product, Techserw labs guided me thorygoyut the project to deliver a quality product.
