THE
COMPANY
NextPax is a leading Travel Tech Company that streamlines the process of managing vacation rental inventory by allowing property managers to effortlessly list their properties on all major booking sites via our API technology.
THE
TEAM
My Role - UX/UI Designer,
A Senior Product Owner,
A Backend Developer,
A Frontend Developer.
THE
METHODS
Market research, User Interviews, Benchmark Analysis, Navigation Tests, and Hi-Fi Prototypes.
Tools: Google Forms, Miro, Figma, Figma Mirror.
TIME
FRAME
Mar - Oct 2022
PROJECT
OVERVIEW
The page that displays the property information and where a user can book the property is called the booking form. Major booking platforms, such as Booking.com, have their own but for NextPax partners that don’t have it, NextPax provides them with our own.
In this project, we were introducing a web and mobile-first redesign of the NextPax Booking Form. Our goal was to make booking properties easier than ever.
The NextPax Booking Form project consisted of a complete overhaul of the existing web-based booking form and the development of a mobile version to make it more convenient for users.
PROBLEMS &
CHALLENGES
The previous booking forms had issues that were negatively impacting the end users and property managers:
- Missing crucial information: making property managers busy and annoyed at the high volume of questions from users.
- Lack of trustworthiness: the bland and simplistic design decreased users’ confidence when booking. This meant fewer closed deals for the property managers.
- SEO unfriendly: in the backend, the previous booking form was not optimized for search engines, decreasing the organic visibility of these properties.
- Unresponsive layout: the booking form is accessed with a web browser, but only had a desktop layout. This made the experience suboptimal for users accessing from mobile devices.
THE
APPROACH
Here is my approach and what I executed on this project.
1. Conduct research: gathering information about the target audience, their needs, and preferences. The information was obtained through interviews, customer feedback, and navigation tests.
2. Identify the problem: understanding the needs of the target audience, identifying user pain points, analyzing the competition, and, conducting a heuristic analysis of the existing platform.
3. Define the scope: Determine the goals, the features that needed to be included, and the resources required to complete the project.
5. Create wireframes: structuring the product to determine the placement of content and features.
6. Visual design: defining the visual elements for the booking form to be consistent with the NextPax branding and our two main products (The Core System, and CDS - Channel Distribution System). Colour scheme, typography, and icons were taken into consideration.
6. Design prototypes: designing a high-fidelity prototype to test the functionality and usability of the product.
7. Usability testing: testing the new booking form (web and mobile versions) to ensure that it meets user needs and is easy to use. This phase is important to identify any usability issues that need to be addressed before going to the development phase.
8. Implementation: working in collaboration with the developers, PO, CEO, Marketing Director, and other stakeholders.
9. Launch and maintenance: monitoring the Booking Forms’ performance after deployment to make necessary adjustments.
So far, no major issues have been reported and the new booking form is in its best historical performance.
THE
OUTCOME
With the interviews and benchmark research we came out with 2 layouts: One for the stand-alone units - units that can be rented as a single entity, such as apartments, and townhouses. The other one is for the multi-units - a property that has many sellable units, such as hotels, and apart-hotels.
The overhaul of the NextPax Booking Form was a big success, and as the UX/UI designer in this project, I’m very proud of the results.
Users are responding very positively to the new form, and data from NextPax and property managers is evidence of that.
Our team worked tirelessly and we managed to completely transform the design, layout, and content of the booking form to improve its usability, visual appeal, and readability of the form.
You can see the booking form live here.
BEFORE
WEBSITE
AFTER WEBSITE
STAND-ALONE UNITS
AFTER WEBSITE
MULTI-UNITS
FIRST MOBILE VERSION
STAND-ALONE UNITS
FIRST MOBILE VERSION
MULTI-UNITS
See the full case study, with detailed information, below:
UNDERSTANDING
THE PROBLEM
“A problem well stated is a problem half solved.” - Charles Kettering
A common bad practice in design is to skip straight to a solution without understanding the problem.
To ensure the solution for our booking form was user-centered, I began by asking pointed questions about the problems our users might be facing with the existing platform.
With a clear understanding of their pain points, it is then possible to create a solution that really meets their needs and expectations.
I can’t stress enough how important this is. By taking this approach, we avoided wasting time and resources on addressing non-existing problems and/or creating solutions that don’t address the underlying issues our customers were facing.
How did I find the problems to solve?
While NextPax already had data from property manager complaints, and the development team was aware and already working on making the future booking form more SEO-friendly in the background, as a UX/UI designer, I focused on the problems that users booking properties via the booking form were facing.
To do so, I conducted thorough interviews and usability testing. That is how I identified issues that were hindering the booking process and causing users to abandon their reservations.
Why is the booking form important?
The booking form is the main page for users to gather information and decide if the property they are about to book matches what they want.
For property managers, this can be the difference between having a healthy business or not.
That’s the reason users need to be able to book a hotel room without any difficulties. The more problems users face to book their vacation room, the higher the change they will leave the form without any bookings made.
With this in mind, it becomes clear why the old booking form's subpar design was negatively impacting all parties involved.
HEURISTIC
EVALUATION
I started with a heuristic evaluation and usability evaluation methods, to identify and evaluate usability issues on our existing booking form.
I follow these steps:
1. Evaluate the booking form page: This involved reviewing the page and noting any usability issues. For example, the visibility of the content, and any issues related to a lack of clear steps on the user's progress through the booking process.
2. Analyze the findings: After completing the evaluation, I analyzed the findings to identify the most critical usability issues. This involved prioritizing the issues based on their impact on the user's experience and the ease of fixing them.
3. Provide recommendations: Based on the analysis, provide recommendations for improving the usability of the booking form page.
After evaluation, I concluded that:
The existing form had a cosmetic issue and does not impact task completion, and a minor usability problem, the user can still complete their task, although they had unanswered questions about their booking.
4. Repeating the evaluation: Right now we are in this step - after implementing the recommended changes - I am repeating the evaluation to check if the usability issues have been resolved.
INTERVIEWS &
NAVIGATION TESTS
I interviewed 5 users. To start with, I gave them the task to complete their bookings up until filling in guest and payment information. While they were navigating the form, I asked:
1. What do you look for when booking a place?
2. Where/how do you check for information?
3. What do you expect to see on the booking page?
4. What are their motivations when booking a hotel room?
INTERVIEW & NAVIGATION
TEST FINDINGS
5/5
Look for pictures. Better if they are big and with detail.
4/5
Check the hotel’s social media channels.
5/5
Consider property price very important.
5/5
Thought the Property ID number, under property name, was the property phone number.
4/5
Check for social proof.
3/5
Missed breakfast and other amenities information.
3/5
Look for a parking space.
Some insights from users' navigation test
Users check the same accommodation on different websites to confirm if the price shown is the cheapest option.
Pictures impact the user's opinion about the accommodation.
Users expect to see the amenities and hotel facilities prior to the room description.
A user tried to book the room when she changed the number of people, but the price didn’t change. She questioned if that was correct.
Users tend to stop looking and move on to another website when they can’t find the information they are looking for.
Users would like to have the option to open the Map on a bigger screen.
A well-designed page and social proof make the users more confident about the service.
COMPETITORS
ANALYSIS
I conducted a thorough competitor analysis to identify the strengths and weaknesses of our direct and indirect competitors, as well as opportunities for differentiation and improvement for our booking form.
Through this analysis, I gained a better understanding of the competitive landscape, including the types of content and services offered by competing channels. I also identified areas of differentiation and improvement, which allowed us to better tailor our offerings to meet the needs of our users and stay ahead of the competition.
By analyzing customer feedback and reviews, as well as examining audience engagement and content quality, I was able to identify areas where we could improve our booking form and provide even more value to our users.
Overall, this competitor analysis helped us stay up-to-date with changing trends in the travel industry and ensured that we were providing the most valuable and user-friendly booking experience possible.
STYLE
GUIDE
TYPOGRAPHY
GUIDE
THE
REDESIGN
SCREENS WEB
STAND-ALONE UNITS
SCREENS WEB
MULTI-UNITS
SCREENS MOBILE
STAND-ALONE UNITS
SCREENS MOBILE
MULTI-UNITS
NEXT
STEPS
To ensure that our customers have the best possible experience when booking their travel plans, we will be conducting testing and optimization to ensure that everything works as expected.
Our team will be testing both the website and mobile versions for usability, performance, and overall customer satisfaction. We will also optimize the website for a variety of mobile devices and test it for compatibility with different web browsers.
We will be leveraging customer feedback to make improvements to the form, ensuring a seamless booking experience for our users.
Navigate the Booking Form here.