Travel Agent Portal (TAP) – One Portal, All Brands

B2B

July 11, 2025

UX/UI Designers, Developers, Product Manager, QA

Date
2025

Project / Client
TTC

Overview

The Travel Agent Portal (TAP) is a multi-branded B2B platform used by agents to search, book, and manage travel across multiple brands. The portal also provides internal product documentation, roadmaps, and operational tooling.

This redesign focused on modernising the UI, improving usability across complex workflows, and aligning TAP with the PO1 Design System — a scalable Tailwind-based system already in use on the consumer site. The goal was to reduce production time, increase UI consistency, and enhance the agent experience.

The Problem

The TAP interface had grown disconnected from the rest of the ecosystem. We were essentially maintaining two design systems and two codebases, one for consumer, one for B2B.

This resulted in:

  • The repetitive component builds

  • Higher QA and maintenance effort

  • Inconsistent UX across platforms

  • Slow implementation of feature updates

We were rebuilding the same thing twice — once for TAP and once for the consumer. It didn’t scale. – Front-End Developer

My Role

As the Lead Product Designer for this redesign, I was responsible for the full UX/UI process — from audit and ideation to system design and developer handoff.

Key contributions:

  • Weekly refinement meetings to align with PMs and engineers on requirements and handover readiness

  • Daily standups to track design progress, unblock devs, and ensure smooth cross-functional delivery

  • Led the component audit, mapped legacy UI to PO1 components, and designed new TAP-specific patterns

  • Partnered with developers to implement Tailwind-based components with consistent utility logic

  • Delivered a fully documented Figma library, design tokens, and dev-handoff guidelines

Research & Insights

In early discovery sessions with internal stakeholders, it became clear that much of the design and development effort was being duplicated across TAP (B2B) and the consumer platform. Despite serving different audiences, both shared many foundational UI patterns.

Key insights:

  • Two separate codebases led to duplicated components, inconsistent styling, and increased QA overhead

  • Maintaining parallel design systems created technical debt and slowed delivery across teams

  • Internal users (agents) needed a smarter, faster experience, but without reinventing existing consumer patterns

  • There was an opportunity to “work smarter, not harder” by aligning both platforms under one scalable system — PO1 — and extending it where needed for B2B-specific use cases

This insight drove our strategy to unify the design system and refactor TAP’s front-end architecture using Tailwind CSS, eliminating redundancy while improving maintainability and scalability.

TAP Design System Overhaul

Scalable, Unified, and Accessible UI Foundation

1. Design System Integration

Unified TAP with the PO1 Design System (used on the consumer site) to create a consistent visual language, reduce duplication, and streamline design-to-dev handoff.

2. Component Consolidation & Extension

Conducted a comprehensive component audit, mapping 50+ legacy UI patterns to PO1 equivalents. Built additional TAP-specific components (e.g., issue dashboards, guest panels) that extended the system without breaking consistency.

3. Tailwind-Based Refactor

Refactored the legacy codebase using Tailwind CSS to standardise styling, increase maintainability, and improve dev velocity with utility-first principles.

4. Token-Driven Theming

Established scalable design tokens for colour, spacing, typography, and interaction states to enable consistent theming and future multi-brand support.

5. Workflow & UX Improvements

Redesigned core flows (search, booking, guest management) for better clarity, speed, and mobile adaptability, using progressive disclosure and improved hierarchy.

6. Accessibility & Responsiveness

Ensured all new components met WCAG AA standards, with responsive layouts, focus states, and full keyboard/ARIA support.

7. Efficiency & Scalability

Reduced design and development time through shared components, system documentation, and a Figma + code library built for reuse across platforms.

Tooling & Handoff

  • Built a Figma + Tailwind CSS component library

  • Created an internal style guide with token references and component usage rules

  • Improved alignment with TestRail, HotJar, and DataDog for monitoring

Challenges

Adapting a consumer-facing system (PO1) for B2B complexity

Managing legacy flows while incrementally migrating to Tailwind

Learnings

System unification pays off in scale, speed, and consistency

Investing in better tooling (docs + design tokens) empowers teams long-term

Working smarter, not harder, means designing for reuse from the start

What’s Next

Migrate remaining TAP flows (reports, finance, settings)

Instrument analytics to track adoption and behaviour post-migration

Share: