Zonal Travel Portal Concept

CLIENT

Zonal HR (Travel Team)

SERVICES RENDERED

UI Design, Hi-fidelity Mock-up, Visual Design

PROJECT URL

DATE COMPLETED

January 2020

Zonal HR (Travel Team) requested me to design a concept for an internal web-based travel portal that would streamline how employees book business travel and how the internal travel team manages approvals, costs, and reporting. The goal was to replace fragmented booking processes with a single, intuitive platform that handled flights, trains, car hire, accommodation, and automated email confirmations — all within one central system.

The project focused on both employee experience and administrative efficiency, covering two distinct user flows:.
- Employee booking interface.
- Admin travel management dashboard

The main challenge was designing a system that balanced simplicity for everyday employees with powerful tools for the admin travel team. Key problems to solve:

- Employees needed a fast, frictionless way to request different types of travel without confusion
- The travel team required visibility over bookings, approvals, costs, and reporting
- Multiple booking types (air, train, car hire, accommodation) had to live inside one clear workflow
- Approval states (pending, approved, declined, cancelled) had to be instantly understandable
- Automated email confirmations needed to feel professional and reassuring
- The platform had to scale across devices while remaining easy to use

This meant creating a UX that felt lightweight on the surface but supported complex operational needs underneath.

1. Understanding User Roles
I began by mapping out the two core user groups:

Employees

- Create bookings
- Upload itineraries
- Track approval status
- Download confirmations

Admins (Travel Team)

- View all bookings
- Approve or decline requests
- Monitor costs
- Generate reports
- Track performance metrics

This helped define separate journeys while keeping visual consistency across both experiences.

2. UX Structure & Flow
I designed a clear end-to-end flow:

- Login
- Dashboard overview
- Booking creation
- Status tracking
- Confirmation emails
- Admin reporting

Multi-step booking forms were broken into logical sections (flight, hotel, car hire, personal details) to reduce cognitive load and improve completion rates.

Each booking state was colour-coded for quick scanning:

- Pending
- Approved
- Declined
- Cancelled

3. Interface Design
Visually, I aimed for:

- Clean corporate styling
- Soft, approachable colour palette
- Card-based dashboards
- Simple iconography
- Strong hierarchy for data-heavy screens

The UI focused heavily on clarity — especially within tables, dashboards, and reporting views — ensuring information could be absorbed quickly by busy internal teams.

4. Email Template Design
Alongside the portal UI, I designed automated email templates triggered during the booking lifecycle. These included:

- Booking submitted
- Booking approved
- Dashboard access links
- Downloadable confirmations

Each email mirrored the portal’s visual identity to maintain consistency and trust.

The final concept delivered a complete internal travel ecosystem that:

- Centralised all business travel requests
- Reduced admin workload through structured dashboards
- Provided employees with transparency on booking status
- Offered real-time visibility into spending and reports
- Created a professional, unified experience across web and email

The design demonstrated how Zonal could modernise their internal travel process while improving operational efficiency and employee satisfaction.

Zonal Travel Portal Interactive XD Design

Below you’ll see an interactive XD design that illustrates the idea I came up with, whilst trying to adhere to Zonal brand guidelines.

Click Here For Full Screen Experience

Tools Used

A list of tools used in this project

Adobe XD

Colour Palette

A list of colours used in this project

#8BCDCB

#D2D943

#1C1C1B

#9D99CB

#FCC42F

#EC6470