B2C · Cruise Booking Web Application · SeaWare

Designing a large customer-facing
cruise booking application.

UI/UX for a configurable web application covering cruise search, voyage and cabin selection, passenger information, reservation review, check-in, flights, excursions, dining, transfers, and other trip services.

Users
Cruise passengers
Platform
Desktop + mobile
Scope
Long-term product work
Role
Lead UI/UX Designer

Context

A large product built around a focused initial booking path.

The core flow helps customers secure the cruise without unnecessary detours. Each stage still contains its own states, validations, dialogs, and client-specific variations, while flights, excursions, dining, transfers, and other services can be added from the reservation afterward.

My contribution

Turning reservation logic into usable flows.

  • Worked with business and development teams to understand requirements.
  • Defined screen structures, states, interactions, and reusable UI patterns.
  • Maintained consistency across a large application over many years.
  • Adapted workflows for different cruise-line configurations.
  • Balanced a faster path to payment with flexible post-booking services.

Application Structure

Two views of the same reservation system.

The diagram separates the focused first booking round from the editable post-booking state. The node positions stay fixed so the two states can be compared without the layout jumping.

The initial booking follows a focused sequence from cruise search through cabin and passenger selection to the Reservation Summary. Optional services remain visible but stay outside the shortest path.

Search
Results
Cabin Category
Cabin Selection
Passenger Details
Reservation Summary
Payment
Special Requestsoptional service
Add-onsoptional service
Shore Excursionsoptional service
Transfersoptional service
Travel Insuranceoptional service
Onboard Activitiesoptional service
Diningoptional service
Airoptional service
Hotelsoptional service
Edit booked details Add or manage services Proceed to payment
Core booking flow: optional services stay visible but muted so the shortest path is easy to follow. Manage reservation: the layout stays fixed; the Summary is highlighted and the edit, service, and payment connections become active.

Selected Workflows

Three examples from a much larger application.

Each workflow shows a different type of product complexity. They are connected parts of the same reservation system, not separate products.

Workflow 01 · Reservation Hub

Reservation Summary as an editable hub

The B2C Summary was not treated as a static confirmation page — it stayed a live workspace for the whole reservation.

Challenge

Turn the summary into more than a read-only confirmation page. Customers needed one place to understand what they had already booked, continue to payment, make changes, and keep planning the trip later without confusion.

Design approach

Organize the page in layers: first the core cruise, cabins, price, and payment status; then services already booked; then optional services still available. Keep booked sections editable so the page works as an active reservation hub rather than a final receipt.

Desktop Reservation Summary — booked items Click to enlarge

Summary concept

A single, editable hub that puts control in the customer’s hands — review the reservation, change booked components, continue to payment, or add more services from the same place.

  • At-a-glance clarity. Core trip details, cabins, and payment status sit at the top, so the customer immediately sees what is booked and what they are paying for.
  • Editable, layered structure. Booked items come first, optional services after. Each section reopens through Add/Edit, and changes that affect price or availability are reviewed before they apply.
  • Action-oriented. One clear path to pay now, and an easy path to keep building the trip with additional services.
  • Responsive. The same hub on mobile, with content that scrolls and reveals detail progressively.
PLACEHOLDER SUMMARY STRUCTURE
DIAGRAM NEEDED

Summary structure

The Summary is organized in three layers, read top to bottom, so the customer takes in the reservation in a natural order.

  1. Voyage overview. The cruise, dates, cabins, guests, and the price with payment status — what the reservation is and what it costs.
  2. Services already booked. Special requests, add-ons, and excursions the customer has added, each editable in place.
  3. Additional services still available. Flights, hotels, transfers, insurance, dining, and onboard activities, added from the same screen.
Difference from B2B

The B2B agent summary kept all components in a predictable fixed order for fast scanning. The B2C summary first shows what is already booked, then presents additional services that can still be added.

Workflow 02 · Pre-Voyage

Online Check-In

Passenger details, documents, emergency information, required forms, completion status, and review were organized into a multi-step flow that supported several travelers in one reservation.

Challenge

Collect required information for multiple passengers without making the process confusing or forcing everyone to complete it at once.

Design approach

Organize check-in by passenger status and clear steps, support saved progress, and show incomplete requirements before submission.

Online check-in — passengers and status Click to enlarge

Passengers & status

Check-in is organized by passenger, so a reservation with several travelers stays clear.

  • Per-passenger status. Every traveler and cabin shows its own check-in state; the guest chooses who to check in now, and completed passengers are locked.
  • Saved progress. Check-in can be paused and resumed later without losing entered information.
  • Multi-traveler support. One booking can cover several passengers across cabins, each handled independently.
Online check-in — trip and booked cabins Click to enlarge

Trip & cabins

The same screen keeps the trip and booked cabins in view, so the guest always sees the reservation they are checking in for.

  • Trip in context. Sailing dates, ports, and ship stay visible alongside the check-in tasks.
  • Booked cabins. Assigned suites and the guests in each are shown for quick confirmation.
  • One place. Reviewing the trip and managing check-in happen on the same page, on desktop and mobile.

Workflow 03 · Add-On Service

Air Booking Within the Cruise Reservation

Flight search, passenger selection, results, fare comparison, and confirmation were connected to the existing cruise booking rather than treated as a separate application.

Challenge

Air booking had to work as part of the cruise reservation. It needed to stay tied to embarkation and disembarkation ports and sailing dates, while allowing pre-cruise or post-cruise flexibility and supporting the correct travelers from the reservation.

Design approach

Keep cruise and passenger context visible throughout search, results, fare selection, and confirmation. Support pre-cruise, post-cruise, or combined air options, flexible dates around the sailing, multi-passenger selection, and a final review of traveler and flight details.

Air booking — flight results Click to enlarge

Search & results

Air search and results run inside the cruise reservation, tied to the sailing and the travelers already on the booking.

  • Tied to the cruise. Search defaults to the embarkation and disembarkation ports and dates, with flexibility around the sailing.
  • Multi-passenger. The correct travelers from the reservation are carried into the search.
  • Readable results. Airline, price, stops, duration, and times are listed for scanning rather than packed into a dense grid.
Air booking — fare selection Click to enlarge

Fare comparison & confirmation

Outbound and return fares are chosen per direction, then confirmed against the travelers and the reservation.

  • Per-direction fares. Outbound and return options are selected separately, with clear pricing for each.
  • Cruise context kept. The voyage and passenger context stays visible through fare selection and confirmation.
  • Final review. Traveler and flight details are confirmed before returning to the reservation.

Product Breadth

More workflows than one page can explain.

The selected cases above represent only part of the full product. The application included many additional screens, dialogs, states, and client-specific variations across booking, passenger management, services, payments, and post-booking workflows.

Summary

Large product, clear structure, consistent execution.

The work was not limited to a few screens. It involved shaping a connected customer-facing product over time, translating complex cruise reservation requirements into usable and repeatable UI patterns, alongside business and development teams.