# Travel Engine – Travel Booking System HTML Template, UI/UX Case Study

> Travel Engine is a dynamic travel booking platform that makes discovering and booking trips simple: flights, hotels, holiday packages, buses and cars from one search. Travellers explore destinations, compare prices and build trips around their preferences, budgets and timelines; agents see every fare broken down. The design balances function and creativity, with maps, galleries and calendars, and is fully responsive. Mohammad Azad designed it and built it as an HTML template.

- Web page: https://mohammadazad.com/templates/travel-booking-system/
- Live template: https://travel-engine.mohammadazad.com/
- Type: case study of an HTML template (travel booking)
- Role: UI/UX design and front-end build

| Key fact | Value |
| --- | --- |
| Ways to travel | 5: flights, hotels, holidays, buses, cars |
| Accounts | 3: traveller, agent, super agent |
| Agent fare breakdown | Base fare, taxes & others, invoice price, total fare quote |
| Pages | 29 |

## 01 – The shift

| Before · Tab after tab | After · Travel Engine |
| --- | --- |
| A different site for flights, hotels, buses and cars | One search bar for all five, holidays included |
| Long lists with no way to narrow them | Filters for price, stops, times, operators and amenities |
| Agents doing the fare sums by hand | An agent view with base fare, taxes, invoice and the quote on every result |
| Booking that only works on a desktop | Fully responsive, from search to checkout |

## 02 – My role

- **UX:** search, results, details and checkout for five kinds of trip.
- **UI:** a navy and red look, with maps, galleries and calendars.
- **Build:** the responsive HTML template, live online.

## 03 – Key features

- **Personalised itineraries:** trips shaped by preferences, budgets and timelines.
- **Smart search:** advanced filters for destinations, stays and activities.
- **Interactive UI:** maps, galleries and calendars.
- **Mobile optimisation:** responsive booking on any device.
- **Flights:** one way and return, stops and times, baggage, refund details, checkout.
- **Hotels:** rooms and guests, star rating, gallery and map, choosing a room.
- **Holidays:** packages by duration and theme, with what's included.
- **Buses:** operators and bus types, a seat map, pick-ups and drops, policies.
- **Cars:** one way and round trip, car types, inclusions and exclusions.
- **Accounts:** traveller, agent and super agent, with bookings, payments and wallet.

## 04 – The core: search, filter, and see it as an agent

On the page, a working search: pick flights, hotels, holidays, bus or car and the search fields change; slide the price to filter the results; press the eye for the agent view, which adds the fare breakdown above each result. Prices come from the template's screens, with a few extra results added for the demo. It plays on its own and hands control to the visitor on the first click.

## 05 – Live preview

The template can be loaded on the page and sized as a desktop, a tablet or a phone, or opened at https://travel-engine.mohammadazad.com/.

## 06 – The screens: 29 pages in 7 parts

- **Start:** three home layouts, about, log in.
- **Flights:** search, details, refund details, agent view, checkout.
- **Hotels:** search, details, agent view, checkout.
- **Holidays:** packages, agent view, checkout.
- **Bus:** search, details, seat selection, agent view, checkout.
- **Car:** search, details, agent view, checkout.
- **Accounts:** traveller, agent, super agent.

## Links

- Next case study, aConic Admin: https://mohammadazad.com/templates/aconic-admin/
- Mohammad Azad, portfolio: https://mohammadazad.com/
- LinkedIn: https://www.linkedin.com/in/mohammad-azad