Streamline Reservation Through the Akomate Booking Engine

Hari Mukti

UX Designer
Product Designer
UI Designer
Miro
Sketch
Whimsical Wireframes
Commsult

Overview

Akomate Hotel Management System (For Hotelier)
Akomate is a reservation management solution that helps businesses in the hospitality industry manage room availability, generate reports, handle check-ins, set up promo codes, add custom pricing packages, and more from within a unified platform.
Akomate Hotel Management System
Akomate Hotel Management System
Akomate Booking Engine (For Guest)
A booking engine is a website application used by businesses to enable users (guests) to create reservations or bookings for hotel rooms online. The booking engine is required for end users to book a room using a smartphone by visiting the hotel website that is integrated with the booking engine.
Booking Engine Flow
Booking Engine Flow

My Role 📌

In this project, I was part of a UI/UX design team, however, for designing the booking engine module, I was the PIC of design. We collaborated with other teams, such as project managers, product owners, product analysts, website developers, and copywriters.

Problem Definition

As a hotel system service provider, Akomate was created for hoteliers to manage all hospitality systems using one software. Challenges came up in providing a smooth and user-friendly booking experience for our customers. At the same time, the conventional method of booking rooms using the phone often restricted getting a hotel room.
Identifying these issues, Akomate focused on the urgent need to develop a booking engine to simplify booking hotel rooms.

Difficulty Booking on a Conventional Basis

We take a deeper look into this issue and try to find possible problems that will occur when booking using conventional methods.
Pain Point
Pain Point
Based on the findings, we decided to develop a booking engine by considering the problem-solving points that have been discovered.

Affinity Mapping

Based on the problems that have been found, we try to categorize the problems into three groups, accessibility and information, booking process issues, and the last one is payment limitations.
Affinity Mapping
Affinity Mapping

Possible Solution 🤝

After grouping, we analyze the problem and dive deeper to try to find a solution to the problem.
Solution
Solution

Impact Effort Matrix

We mapped the problems to find out which problems were easiest to solve and had the highest impact.
Impact Effort Matrix
Impact Effort Matrix

User Flow

The analyst team suggested the first userflow but we still need to discuss further and finally, we made revisions to the parts that can be improved Then discuss with the product owner and developer, whether this is possible or not.
User Flow
User Flow

Design Process 🎨

Wireframe

We try to make a blueprint before the designing process. We sketch out the basic layout of a product to see how it will work. This helps us make sure it meets what users need. I thought it's an important step for our team to work together and make sure everyone understands the plan. We create wireframes on the mobile screen size, cause we want to make it mobile-first, we assume our users mostly use mobile phones to book rooms.
Wireframe - Create Reservation
Wireframe - Create Reservation

Create a Reservation at the Palm Your Hand 🚀

Through this design, I try to solve the problems we found before. Due to the web-based booking engine, I did not add user login/signup to simplify the room booking process.
Create Reservation
In the create reservation flow, we use a modified interactive calendar where if all rooms on a certain date are fully booked, that date will be disabled. We also added various payment options, you can pay with e-wallet or pay at check-in.
Create Reservation Flow
Create Reservation Flow
Homepage
On the mobile homepage, we eliminated the banners on wider screens such as tablets and desktops, we wanted to make the homepage as simple as possible by considering the solution that had been made.
Design Mockup
Design Mockup

Staging UI/UX Review

During the development process, we did a UI/UX review in parallel, this aimed to minimize system errors and also minor design. We found a problem when the room was fully booked, the position of the card was still at the top according to the initial order. We realize this is unpleasant when looking for a room and then on the top page is shown a full book of rooms.
Ux Improvement
Ux Improvement

Customize the Booking Engine as Your Website Theme🎡

In the initial design, we synchronized the booking engine guideline with the Akomate hotel system. but after launch we had a problem, the booking engine we made looked too different from our client's hotel website. they wanted something more integrated, so we decided to make the booking engine customizable in some parts to match the theme with our clients.
Customizable Booking engine Theme
Customizable Booking engine Theme

Takeaways 🚴‍♂️

Iterate your design: In the design process, there is no such thing as a "perfect design" because we need to iterate the design to fix any flaws. To do design iteration, we need to evaluate, usability test, and see user feedback because it is all very useful to make our design more user-friendly.
Listen to user's feedback: always listen to user feedback, we design to make it easier for users, right.? Therefore make user feedback as motivation to improve the design that has been made.
Partner With Hari
View Services

More Projects by Hari