Supercharge your travel agency business by enabling real-time online bookings

Create/Develop a platform that helps travel agents to sell their products collaboratively with customers with more confidence and less time. 


To create a user-centric platform that allows agents to perform their tasks easily

UX/UI Lead
Lo-fi & Hi-fi prototyping

150+ Multi diversity team, Including Dev, QA, Architects and PM


With TravelBooker, our latest travel technology product, we are enabling travel agencies to optimize operations while supporting travel companies to reach sustainable and quantifiable growth. TravelBooker travel agency software is powered by CodeGen International Pvt Ltd.


  • To create a centralised and intuitive portal that simplifies daily tasks
  • Design rich dashboard to the user to track and monitor real-time data.
  • System that allow easily themed and configured to your business and brand needs on demand.
  • Ability to search and book while cross-selling other shopping cart items and ancillaries.

What’s a Rich Text element?


Top Key takeaways
  • 48.8% of respondents would like to have a guide when they purchesing coffee
  • 57.7% of respondents would like to learn new methods of coffee making
  • 66.7% of respondents would like to have some kind of guide to select a coffee type while they are on local coffee shop
  • 51.2% of respondents is refilling their coffee in every month
  • The most famous coffee type is Black Coffee & Ice Coffee
The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

The Product Goal

The project goal was to create an application the allows an agent to find and seal better travel deals for the customers at the same time system should be smart enough to identify the best opportunities from the given expert knowledge database and provide better insights and results when the product mature in the future.

(Find more about the project by visiting

Key points
  • To create an application that allows Agents to work faster and smarter at the same time.
  • The user should be able to connect multiple H2H systems and get the best product results* from the system without any hiccups.
  • The agent should be able to create quick quotes, explore more result alternatives, and manage bookings and payments in a smart way

Key pain points we focused

HMW plan holiday
HMW identify the perfect package for customer
HMW grab best deals for customer
HMW get expert knowledge to the system
HMW create may quotes/bookings in less time

Key product segments

Before we begin the design process we have to identify the key product segments we are going to. After a few rounds of ideations and validation sessions we have finalized the major product breakdown into 3 different segments

Admin Portal

A centralised and intuitive portal that simplifies the management and setting up of business rules, theming and reporting to fit the business objectives.

B2B Dashboard

The agent dashboard enables the user to track and monitor real-time data and reports to enhance operational efficiencies and decision making.

Comprehensive Booking Flows

Enable agents to search and book while cross-selling other shopping cart items and ancillaries to increase yield. Easily manage rates, rules based on prioritisation, aggregation, pricing, discounts, and promotions in real-time.

Surf Design System

Creating a centralized design system was challenging at that moment besides the product complexity leading the designs system was a new experience for me. I had to go through many articles videos and a few books to figure out the process before stepping into the rabbit hole.

After weeks of research, I decided to start with Atomic but converted it to be not so Atomic. The main criticism I have with atomic it makes things so complex when the system grows older. So I have created the structure bit differently.

  • Core Components (Atoms) All the core components, including Buttons, input, Tab, Modal, Chip, etc.
  • Business Components (Molecules and Organisms) All the business components are listed here. such as Cards, Forms, List, etc
  • Layouts  The page layout from the Home page to the Cart page, From Dashboard to Confirmation is listed here.
  • Brand stay above all that we can switch between brands at any time. this will include Colors, Typography as well as Icons

This was a super challenging part of the system. Now we are planning to create a theming plugin for Figma to automate the branding part since its take a considerable amount at the moment

Hi-Fi Mockups

User testing was an iterative process that was conducted at every milestone of the project to identify the biggest pain points. Once feedback was gathered, I would revisit the prototypes and test them again.

I wanted to create a refreshing, minimalist, and clean UI that can improve agents day to day activities


The dashboard is based on business insights. Agent can easily start their journey from anywhere he planned.

  • Search products
  • Booking summary for each store
  • Booking/Quote insights
  • Payment insights

Admin Portal (Super user)

The admin portal is created to minimize the overload of the super-user. All of the company insights, store-level insights as well as tools to maintain user management and business management are becomes the main aspect of this segment.

Result pages

This was quite a challenging part of the booking flow. Since we are consuming multiple APIs to get results we have to think consistent way to show all of the product flows (Hotel, Cruise, Tour, Flight, Activity, Car, and Transport)

No results

We don't want to Agent to feel stressed while building a holiday package or booking an item for their customer. So we decided to make a system smarter with smart suggestions on the no-result page based on the criteria that were input and the passed data that we collected. This will give the agent the flexibility to look for more or start a new search right away from the no result page.

Key takeaways

The more involved with the user the more product become useful

After we started usability testing we identified that most users are starting to act from their previous habits. So they expect the system to behave with the same wahy in legacy systems. So we have to do a few alterations to make them adapt to the system. Especially initiates like the user onboarding flow across the platform are in process to make the transition more seamless 

Withdrawn from our own bias and predictions 

Understanding the way of users think and feel via analyzing research data helps me to get rid of my own bias. And turn those feedbacks into opportunities. If I didn't go that far I would have rejected really valuable features based on my own assumptions