Custom WordPress Plugin and UI/UX Development

Technology Stack

WordPress
Vanilla
JavaScript
REST APIs
HTML5
CSS3
MySQL

The Client

The client is an industry-leading hotel booking engine provider that partners with hundreds of independent and group hotels across Europe and North America to help them grow their direct bookings. The client sells his booking engine to various hoteliers, who integrate it into their business websites to improve customer engagement and conversions.

The Challenge

This hotel booking engine that the client has developed works with the help of an AI-based data injection mechanism. This mechanism cleverly understands what a guest wants (like spas or cocktail parties) when he first visits a hotel website and, accordingly, displays personalized content to wow him.

But, when the client came to us, the functionality to display personalized content wasn’t available. Although the client had the booking engine and related backend APIs ready, he could not visually reflect personalized data on website frontends. He had trouble understanding where to position that data on WordPress website interfaces to get maximum conversions. This was when he engaged Capital Numbers to help with the job.

The client wanted us to create a custom WordPress plugin to dynamically inject personalized content within different layouts. The aim was to power up his booking engine with this plugin so that more hoteliers buy this booking engine and increase his sales.

He also wanted this plugin to be independent of the backend logic so different hoteliers could embed it in various websites without worrying about disrupting the backends.

The entire work needed extensive technical knowledge. So, we aligned our best UI/UX developers for the job.

The Solution

As an initial step, we created a high-level software architecture diagram. In this diagram, we outlined different user journeys, such as:

Booking date preferences
Pre-arrivals
Room preferences
Location preferences
Activity preferences, etc.

We did this to understand the type of data the booking engine would capture. We analyzed several other API call data, as well.

Next, we studied the WordPress backend theme and frontend layout ideas that the client had built. We did this to determine the best way to reflect data visually on those WP sites.

After these initial assessments, we started developing the WordPress plugin. We agreed to customize it entirely to help any hotelier embed it on their website.

While developing the plugin, we decided to add UI design controls to ensure the hoteliers can inject custom data per their UI needs. We wanted the WordPress plugin to serve as the control system for hoteliers to decide where and when to inject the data returned by REST APIs.

We then created the HTML UI files based on the layout ideas the client had sent us. Each HTML file would act as a separate template into which personalized content could be injected. We used Sass to create variations of those templates to serve different hotel website layouts.

We created separate modules for each data injection type. We also used native Vanilla JS for each module to help it inject API data into the web pages. We kept each module logic separate from the backend for future enhancements and maintenance. Our team ensured all data gets stored on the MySQL-powered database securely.

Our skilled developers carried out each implementation phase-wise and deployed it on Bitbucket step by step. Throughout the 7-month engagement, we proactively coordinated with the client over Slack and Google Meet, which helped us implement everything on time.

Results

The resulting outcomes were eye-catching UI templates and a tailor-built WordPress plugin compatible with all CMS websites. Here’s more on what we achieved and how.

Well-structured Software Architecture

Our deliverables are on point because we mapped out every user journey in a well-thought-out software architecture diagram.

Custom WordPress Plugin

Our custom WordPress plugin has enhanced the client’s booking engine significantly.

Enhanced Booking Engine

The all-new booking engine draws AI-captured user intent and displays personalized content on hotel websites.

More Guest Info

Because we added new custom fields using ACF, the plugin captures more guest data, such as:

Guest names and emails
Length of stay (i.e., 2N/3D, etc.)
Type of stay (i.e., work, family, leisure, etc.)
Number of guests
Preferred rooms and budgets
Preferred food and beverages
Preferred amenities (i.e., spa, golf, swimming pool, etc.)

A Personalized Display of Content

Based on the above data, the plugin reflects personalized content, such as:

Discounts on first-time bookings
Free tickets to nearby attractions
Complimentary breakfasts
Special spa services
Packages for golf enthusiasts
Discounts on food during Christmas eves

Correct Placing of Personalized Content

Our plugin places the above content on banners, pop-ups, sliders, or dynamic carousels, depending on website layouts.

An Uptick in Booking Engine Sales

Our client loved what we created. He has seen a rise in booking engine sales after integrating our plugin.

25% Increase in Direct Bookings

Many hoteliers have seen a 25% increase in direct bookings after embedding the new booking engine in their websites.

Personalized User Journey

All in all, our plugin has personalized the user journey, getting the hoteliers new customers.

Improved UI/UX

User engagement has also shot up because of our UI/UX page templates.

Vanilla JS Benefits

The use of Vanilla JS has stepped up the web page performances, as well.

Client Trust

Looking at these fantastic results, the client has valued Capital Numbers’ work, which has turned his booking engine into a high-growth engine in just a few months.