TravelShop

Designed a white-label travel platform for one of Egypt’s largest private-sector banks. Customers can book flights, hotels, and car rentals using the bank’s cards, reward points, or both, all within the bank’s secure digital environment.

Sole Product Designer, contracted via agency.
Aug 2025 to Jun 2026. MVP delivered in 4 months.
Customer platform and admin portal for web and mobile, in English and Arabic.
White-label B2B2C travel commerce.
TravelShop flight booking experience across three screens
Flight booking experience showing card benefits, transparent fare comparison, and confirmation with the exact discount applied.

01A loyalty program that customers could not actually use

One of Egypt’s largest private-sector banks faced a loyalty program challenge: cardholders accumulated significant reward-point balances but had limited redemption options.

Unredeemable points undermine loyalty, create customer frustration, and represent a growing liability for the bank. To address this, the bank launched a travel platform within its secure banking environment, enabling cardholders to book travel and pay with their card, reward points, or both. Card tiers provided additional benefits, including annual free checked baggage.

Why did the bank invest in this

Without this solution, the loyalty program would continue to underdeliver, and the bank’s most valuable customers would book travel through unrelated platforms.

What was actually being built

This was not a typical consumer travel website. It was a white-label, API-first B2B2C platform designed for rebranding and configuration by other banks and enterprise clients, each with unique loyalty logic, card benefits, supplier mix, and branding. The architecture was built to support future tenants beyond the initial implementation.

Two integrated products were delivered: a customer-facing travel shop for searching, booking, and managing trips, and a role-based admin portal for operations, customer support, finance, loyalty, and reconciliation.

My role

As the sole designer contracted through an agency, I managed the end-to-end experience for both products, including journey mapping, responsive web and mobile layouts, bilingual design, the design system, edge cases, transactional emails, vouchers, and the operations portal. I worked closely with the bank’s teams, travel suppliers, and engineering to integrate API, certification, and compliance requirements into a cohesive customer experience.

For example, during integration, a change from the primary flight supplier required a rapid rewrite of booking flows. I organized joint workshops with the bank’s engineering team and the supplier’s technical leads to clarify the new API structure and define the revised customer journey. By collaboratively mapping the new data flows, we resolved conflicting requirements and kept the launch on schedule. This cross-functional teamwork ensured compliance and a seamless customer experience under tight deadlines.

4 months
from project start to live MVP with real customers
140+
desktop screens delivered across four travel verticals
2
languages at full parity, English and Arabic, including right-to-left support
1
designer, one scalable design system

02A simple ask hiding one of the most state-heavy design spaces in consumer software

The user problem

Cardholders lacked a clear way to understand or use their travel benefits. Planning a trip required switching between systems to check points, search, verify entitlements, pay, track bookings, and seek assistance. Free checked baggage, tied to card tier, was not visible during booking when it was most relevant.

The design problem

The initial brief was to enable customers to book travel with points. In practice, the challenge included live inventory changes between search and payment.

The core challenge was to create a calm, trustworthy booking flow. The system needed to absorb complexity, ensuring customers experienced a seamless process.

03Lean by necessity, deliberate by design

The tight deadline did not allow for a traditional discovery phase. Instead, I conducted a structured benchmarking program, using leading travel products as reference points for usability and design best practices.

I analyzed more than ten leading travel products across flights, hotels, and car rentals. For every product, I documented why it was selected, what patterns were worth borrowing, and which products I rejected and why. To visually compare feature coverage and suitability, I created a comparative matrix mapping which competitors supported each travel vertical and how they performed against key criteria. Selection criteria were explicit: mobile-first quality, Arabic and RTL maturity, and relevance to a bank-embedded audience in Egypt, not simply global popularity.

ProductFlightsHotelsCar rentalsPackages
KayakSupportedSupportedSupportedSupported
ExpediaSupportedSupportedSupportedSupported
MakeMyTripSupportedSupportedSupportedSupported
SkyscannerSupportedSupportedSupportedNot supported
AlmosaferSupportedSupportedSupportedNot supported
Google FlightsSupportedSupportedNot supportedNot supported
HopperSupportedSupportedNot supportedNot supported
Alternative AirlinesSupportedNot supportedNot supportedNot supported
Holiday FactoryNot supportedNot supportedNot supportedSupported
NusukNot supportedNot supportedNot supportedSupported
Coverage matrix. Mapping which competitors offered flights, hotels, car rentals, and packages helped determine where to benchmark in depth and where suitable reference material did not exist.
Google Flights benchmark section
Flights benchmark. Google Flights set the bar for speed, calendar pricing, and a minimal click flow. Expedia and Wego were rejected for clutter and ad weight.
Almosafer benchmark with Arabic screens
Regional relevance. Almosafer’s Arabic-first flows, urgency cues, and RTL layouts were the closest reference to our Egyptian audience. English and Arabic rows were reviewed side by side.
Shared interaction patterns
The synthesis board. Shared interaction patterns that appear across every best-in-class travel product are documented as must-haves for all TravelShop modules.

What the research produced

Actionable insights from benchmarking directly shaped the platform’s core design patterns. By systematically analyzing leading products, I identified interface structures such as tabbed navigation, persistent search fields, and a consistent review step before payment, which were applied across all travel modules. These shared patterns enabled efficiency and a unified user experience. Documenting rejected approaches also provided stakeholders with clear reasoning for design decisions, ensuring only relevant, proven patterns influenced the final solution.

The research identified shared patterns that became the platform’s foundation: tabbed navigation, a simple search bar, persistent filters, a review step before payment, consistent card layouts, and minimal clicks to book. Extracting these patterns across verticals enabled the key structural decision: a shared journey skeleton for every travel module.

Documenting rejected options was as important as documenting selected ones. Expedia and Wego were excluded due to clutter and excessive ads for flights. Booking.com and Agoda were rejected for crowded mobile flows and outdated hotel patterns, while Turo was not a fit for car rentals. Recording these reasons ensured transparency and provided stakeholders with clear justifications for design choices.

04Everything that shaped the work before a single screen was drawn

A bank-driven deadline

The bank required a non-negotiable launch within 4 to 5 months. Every decision balanced product polish with the need to ship on time.

A mid-project platform pivot

The project began with a mobile-first approach. When desktop became the primary launch target on short notice, the web experience had to be designed quickly while maintaining consistency with mobile.

Brand guidelines enforced to the atom

The bank’s brand guidelines were strictly enforced, covering colors, typography, and tone. With limited creative flexibility, differentiation relied on flow quality rather than visual innovation.

Supplier reality

Flight fares arrived with incomplete rules. Price revalidation could take seconds or fail. Tickets could be issued after payment, leaving bookings in limbo. Baggage options sometimes applied to the whole journey but not to individual legs. The hotel supplier required a formal certification sequence: availability first, then a rate re-check, then booking, with strict data requirements at every step. Cancellation rules varied by rate, route, and supplier. Mid-project, the primary flight supplier changed, so the flows had to absorb a new API’s behavior.

Banking and loyalty complexity

Three payment paths, points-to-EGP conversion, card-tier entitlements, customer-protection messaging, and visible fare conditions before payment. All were mandatory and reviewed by the bank’s compliance team.

Full Arabic parity

This was not just a translation layer, but a second directional system: mirrored navigation and icons, right-to-left calendars and carousels, mixed-language branding, and Arabic strings that challenged layouts originally designed for English.

05Six decisions that shaped the product

For each one: what was on the table, what I chose, and why the alternatives lost.

01

One journey skeleton for every travel vertical

What I rejected: Designing each module around its own supplier’s data model and conventions. It would have produced three products with a single logo and tripled the design and engineering surface area under a four-month deadline.

What I chose: A shared structure for all modules: search, results, filters, details, selection, traveler information, payment, confirmation, and post-booking. This approach ensures customers can easily navigate any module, and future modules fit established patterns. Benchmarking confirmed that leading multi-vertical products follow this strategy.

02

One design system, two typography configurations

What I rejected: Building two separate design systems, since the bank mandated different fonts for mobile and desktop. Two systems mean double maintenance and guaranteed drift under deadline pressure.

What I chose: A scalable system with typography as a configurable token layer. Font differences were handled through configuration, not separate systems. This approach supports future tenant customization, aligning with white-label platform requirements.

03

The free baggage benefit: design for partial failure, not just success

This was the bank’s flagship feature and the site of the project’s biggest pushback. The technical reality was that the benefit could not always be applied. Sometimes the airline already included the bag, sometimes the supplier accepted it, and sometimes it silently failed and had to route through the back office.

What I rejected: Showing the benefit only when the system could guarantee it. Safe, but it buries the perk that the entire program was marketed on. I also rejected always promising it and cleaning up in support. A benefit that unpredictably vanishes is worse than no benefit.

What I chose: Communicate the benefit in value terms ("Free extra baggage, save up to X EGP, available through your card benefit"), apply it when possible, and provide a clear fallback. Confirmation pages and emails specify whether the benefit was applied, and a structured claim process allows customers to recover costs if they pay at the airport. This area received the most iteration with the bank.

04

Module-first admin portal, not role-first

What I rejected: A separate portal per role: bank finance, bank loyalty, platform operations, customer support, and tenant admin. Six tailored products would drift apart and multiply every future change by six.

What I chose: Design each module as a master version, then tailor role experiences through permissions such as navigation, table columns, tabs, actions, and export rights. This approach provides a single source of truth per capability, supports multi-tenancy, and is maintainable by a small team.

05

Honest labels over optimistic ones

Where automatic booking modification was not technically supported, the tempting move was a "Modify Booking" button quietly backed by manual operations.

What I chose: "Request Modification" instead, featuring an eligibility check, structured form, one active request per booking, and visible status tracking through a support-connected workflow. This label avoids promising instant results the system cannot deliver, ensuring the interface aligns with operational capabilities.

06

Design loading and uncertainty as content, not interruption

What I rejected: The default spinner until timeout. In travel, silence during a delay feels like something has gone wrong with the customer’s money.

What I chose: A three-stage loading pattern: standard ("Checking the latest price and availability"), extended ("This is taking a little longer than usual"), and failure with a recovery path. An explicit price-change dialog displays the old and new totals, allowing customers to accept the new price or search again.

06The customer experience

The platform is accessed through the bank’s login and immediately recognizes the customer’s identity, points balance, card tier, baggage entitlement, and language. This context informs all subsequent interactions, eliminating the need for repeated entry or guesswork.

Low fidelity wireframes for flights and hotels
Starting in low fidelity. Wireframes for the flight bundle flow, self-selection flow, and hotels let the bank and engineering align on structure and API feasibility before any visual polish. Under this deadline, agreeing on the structure first saved weeks.

Flights

Supports one-way, round-trip, and multi-city searches. Traveler composition includes validation rules such as infant-per-adult limits and age categories. Features include a calendar with indicative pricing, filters for stops, price, bags, times, and airlines, and clear separation of outbound and return selections. Fare packages are compared by baggage, changeability, and refundability. Passenger forms match passport requirements, and fare conditions are presented before payment to protect customers.

Flight results with benefit banners
Results. Card benefits appear where they matter: free bags eligibility and the annual free flight ticket, framed as value in EGP, not as eligibility rules.
Fare packages compared honestly
Fare packages. Eco Saver to Business, compared by bags, change fees, cancellation, and comfort. Conditions surfaced before payment, not buried after it.
Booking confirmed with applied discount
Confirmation. Booking ID, PDF download, and a plain statement of exactly which benefits were applied. No ambiguity after money moves.

Hotels

Enables multi-room, multi-occupancy searches. Supplier board types are translated into five clear meal-plan categories. Refundability is shown in three color-coded states: fully refundable, partially refundable, and non-refundable, based on actual policy data. Lengthy supplier remarks are restructured into concise bullet points. Sold-out scenarios are communicated in plain language with clear next steps.

Car rentals

Applies the same journey structure with vertical-specific details: transparent daily pricing, deposit visibility, insurance inclusion, and clear pickup and drop-off processes.

Hotels booking high fidelity board
Hotels, search to confirmation. The full high-fidelity flow: search, results, filters, property details, room and board selection, guest details, payment, and confirmation.
Car rentals high fidelity board
Car rentals. The shared journey skeleton is applied to a third vertical, so the module never feels like a bolted-on third-party product.
The streamlined flow minimizes clicks. Customers can complete a points-paid booking in just a few steps, with each screen serving a clear purpose. Internal user tests showed the end-to-end flight booking flow averaged 5 clicks from search to confirmation, compared with 9 to 12 on leading competitors. Early feedback from customer support and internal users highlighted the increased speed and simplicity. Several test users noted they could complete bookings independently, a first for the bank’s travel products.

07Benefits, payments, and failure states

Payments in the customer’s own terms

The payment step offers three options: the bank’s card, reward points, or split payment. If points are insufficient, the option remains visible but disabled, and split payment becomes the default. The system calculates and displays the exact breakdown: points used, cash equivalent, card amount, and total, so customers do not need to convert currencies. Card payments are processed through a secure hosted page, with clear pending, verified, and failed states.

The card-tier benefits, end to end

Free flight ticket benefit flow
Card-tier benefits woven into booking. The annual free flight ticket and free baggage benefits appear where they matter: unlock messaging on entry, eligibility inside fare selection, per-passenger application at checkout, and a plain-language summary on confirmation, including the exact discount applied.

Failure states are core journeys

The product includes twelve defined booking states, from Requested and Processing to Confirmed, Payment Failed, Points Redemption Failed, Timed Out, and the full refund lifecycle. Each state features a clear title, plain-language explanation, and next steps. Delayed ticketing, where payment is cleared but the airline has not issued the ticket, is transparently communicated. Over 25 edge cases were proactively designed, not left to be discovered in production.

Supplier migration updates board
Absorbing a supplier change. When the primary flight supplier changed mid-project, flows were updated for new fare structures, per-passenger baggage application, offer-expiry and price-change dialogs, and three variants of the confirmation page depending on how the baggage benefit resolved.

08Post-booking, the admin portal, and the design system

Post-booking that respects the customer

The My Bookings area covers upcoming, past, and cancelled trips, baggage claim history against the annual allowance, and self-serve options for date changes, room and board changes, guest information updates, added baggage, and cancellations with penalty visibility. Where automation is not possible, a manual request flow with two-way status updates is provided.

Manual booking modification flows
The honest fallback. Manual modification requests: a structured form, a review step, a submitted state with a tracked timeline, a support conversation, and a final review-and-pay step once the airline confirms the change and price.

The operations portal

The admin portal absorbs operational complexity, keeping the customer experience simple. Operations and support roles can locate bookings, edit permitted data, cancel, process refunds, resend vouchers, review baggage claims, add notes and attachments, and manage manual modifications with full audit history. Bank roles have view-only dashboards for reconciliation, including booking amounts, points redeemed, benefit utilization, and reversals. A group-level overview offers cross-tenant visibility, supporting the platform’s multi-tenant design.

Arabic as a first-class product

Arabic was intentionally designed, not just translated. This included right-to-left page flow, mirrored icons, Arabic calendar behavior, carousel direction, mixed-language branding rules, and layouts tested for longer Arabic strings. Common travel terms like "refundable" or "points redemption" required precise contextual translation to avoid confusion, as direct translations could have different legal or financial implications. The bank required contextual review of all translated content, and the design process accounted for this review loop.

One design system, continuously refined

A single component library supported the entire platform, including search inputs, date and traveler selectors, flight, hotel, and car cards, fare packages, room-rate cards, points and cash displays, benefit cards, status indicators, loaders, empty and error states, payment options, price breakdowns, admin tables, drawers, and modals. Each component adapts for English, Arabic, desktop, and mobile from a single source of truth. Accessibility was prioritized, targeting WCAG AA standards where practical, including contrast, focus states, touch targets, consistent validation, and status indicators not reliant on color alone.

Menu and shared pages designs
Shared pages. Rewards, baggage claim history, bookings, support, empty states, and error states are designed once and reused across modules.
Design iteration change list
Iteration was constant. A sample release round: Arabic localization coverage, redesigned flight cards, skeleton loaders, price-change dialogs, multi-select hotel filters, and dozens of consistency fixes, all driven by stakeholder and supplier feedback.

09Real launch, real customers, extended scope

Full production analytics were unavailable during my engagement, so outcomes are stated as verifiable facts rather than estimated conversion rates. Qualitative feedback from internal users and customer support consistently highlighted faster booking and improved usability compared with the previous platform. Early adoption among cardholders exceeded expectations, and stakeholders cited smoother workflows and fewer support queries as key successes. The project scope was expanded shortly after launch due to this positive reception.

Live
MVP launched to real customers on deadline
Extended
scope grew after launch because of the work
Certified
passed formal supplier certification requirements
Full term
contract completed on the strength of the MVP

10What I learned, and what I would change

What I would do differently

With more time, I would have conducted additional research with actual cardholders before finalizing flows. The compressed benchmarking approach was appropriate given the deadline, but more user validation would have further refined the product and reduced later iterations, particularly for the baggage benefit. After launch, feedback from internal users and customers, gathered through support interactions and post-booking surveys, directly informed improvements such as clarifying baggage benefit displays at checkout and refining the booking modification flow for greater transparency. These insights validated earlier decisions and guided updates to address areas where customers needed more clarity.

What this project taught me

Failure states are core journeys. In live-inventory products, the error, pending, and recovery experiences carry more trust than the happy path. They deserve equal design attention.

Loyalty value must be explained, not just displayed. Showing a points number is not the same as showing what it is worth, what benefit is being used, and what it costs the customer’s annual allowance.

Supplier data should never dictate the interface. API labels, board types, and error codes need a customer-facing interpretation layer. That layer is the product.

Complex B2B platforms still owe customers a simple experience. Nobody booking a holiday should feel the webhooks underneath.