Table View

CASE STUDY
TABLE VIEW · CRUISE SEARCH RESULTS

Comparing cruises side by side, without scrolling or remembering

How I designed a compact table layout for cruise search results — so travel agents can see and compare many cruises on one screen, alongside the existing card layout.

My role: UX / UI Designer
Works on: Search results
Scope: 3 key design choices
Designer: Nehal Rana


01 — OVERVIEW

Search results showed one cruise per large card, packed with detail. That's great for reading about a single cruise, but hard when you're weighing several. Agents had to keep scrolling and try to remember prices, dates and cabin types as they went.

I designed a Table view: the same results, shown as one simple row per cruise, so many fit on screen at once. It's an extra option — the search bar, filters and the familiar card view all stay exactly as they were.

• One row per cruise
• Pick a cabin type to see its prices
• Hover for more detail
• Shortlist & compare


02 — THE PROBLEM

With only large cards to work with, agents ran into three frustrations.

1. Only one cruise on screen at a time
Each card filled the screen, so comparing options meant scrolling back and forth between them.

2. Comparing meant remembering
Agents had to keep dates, prices and cabin types in their head while scrolling, instead of seeing them side by side.

3. No easy way to make a shortlist
There was no simple way to narrow a long list of cruises down to the few worth considering.


03 — HOW I GOT THERE

Three key choices shaped the table — each one balancing "fit more on screen" against "still show enough detail".

Choice 01 — Pick one cabin type at a time
Instead of five price columns (Inside, Outside, Balcony, Suite…), agents choose a cabin type and every row shows that price. The table stays compact.

Choice 02 — Sort by clicking a column title
Click Dates, Nights or Price to sort low-to-high, again for high-to-low, and once more to reset — just like any spreadsheet.

Choice 03 — Extra detail on hover, not a new page
Hovering over the map or offers icon shows the full detail right over the row — so a compact table never means missing information.


04 — THE RESULT

A "Table" option now sits next to "List" at the top of the results. Every row shows dates, length and price straight away; everything else — the route map, special offers, full cruise details — is one hover or click away.

One row per cruise
Many more cruises fit on one screen than the card layout ever allowed.

Switch cabin prices instantly
Choosing a different cabin type updates every row's price without leaving the table.

Map and offers on hover
The route map and every special offer pop up over the row, then close — no new page.

Full details in one click
A small icon opens the full route, ship information and booking rules in a pop-up window.

Shortlist and compare
A "+" button on each row adds it to a shortlist, which then opens the chosen cruises side by side.


FITTING INTO WHAT ALREADY EXISTS

The top bar stays the same
The Table option sits where List already was, so search and filters carry over unchanged.

The card view is untouched
Table is simply an extra choice — nothing about the existing cards changed.

One hover behaviour, used three ways
The map, offers and cruise details all open the same way, so agents learn it once.

Shortlisting without leaving
The shortlist builds right in the table, so there's no extra page to visit.


05 — WHAT CHANGED FOR AGENTS

Compare at a glance
Dates, length and price for every cruise are on screen together — not stored in memory.

Nothing new to learn
Same top bar, same filters, same sorting — agents switch views, not habits.

Detail is always close
The map and offers can be checked without ever leaving the table.

A proper place to shortlist
"Which of these?" becomes a side-by-side view instead of a pile of open browser tabs.


06 — LOOKING BACK

The hardest part wasn't fitting more rows on the screen — it was deciding which details could move behind a hover without feeling hidden. Cabin type became a choice rather than extra columns, because five more columns would have undone the whole point of a compact view.

Keeping sorting in the column titles — where people already expect it — meant the new view needed no explanation at all.

What I'd do next
• Keep the shortlist saved during a search, so agents can come back to it later.
• Use the same hover idea to show ship features inside the table.
• Track which columns agents sort by most, to choose a smarter default order.