UX exploration · internal artifactv0.2 · multi-page

Room Normalizer — PDP Component Exploration

Problem

On the PDP today, users see a long list of room rates with inconsistent naming and overlapping rate plans. Duplicate room types appear under different labels. Comparison is hard, and confidence in the choice is low.

Goal

Introduce a Room Normalizer block that groups messy inventory into intuitive room types, exposes 5–10 bookable rates per group, improves clarity and decision speed, and keeps every option directly reservable.

Component width
764 px (fixed)
Surface
Hotel PDP — Rooms section
Concepts
14 directions
Fidelity
Mid · grayscale wireframe
Key design principles
  • Normalize without hiding rate-plan detail.
  • Keep booking friction low — every rate one click from Reserve.
  • Make comparison easy within a single normalized room type.
  • Balance density vs clarity per use case.
  • Build trust in the grouping logic before optimizing for speed.
Legend
Primary action (Reserve)Positive attribute pillNeutral / restrictive pillAnnotation / explanation block

Room normalizer · concept index

10 directions · click to open
Concept 01Density · flat list

Simple grouped list

Room-type headers with every rate listed flat beneath. Maximum visibility, zero hidden state.

Open concept →
Concept 02Collapsible groups

Accordion room groups

Each room type is a collapsible header with rate count and price-from. Users expand what they care about.

Open concept →
Concept 03Room-first decision

Featured room with expandable rates

Strong room summary card with bed, size and amenities; rates revealed in a separate panel below.

Open concept →
Concept 04Aligned columns

Table-inspired comparison block

Per-room table with aligned, sortable columns: Rate, Bed, Meals, Cancellation, Policy, Price, Reserve.

Open concept →
Concept 05Modular tiles

Card stack by room type

Soft outer card per room type; each rate is a discrete bordered tile with attributes and Reserve.

Open concept →
Concept 06Recommended-first
Best
+ 5 more rates

Best rate first, others tucked below

One recommended rate rendered as a hero block; remaining rates collapse behind a '+N more' control.

Open concept →
Concept 07Per-group filters

Tabs inside a room group

Segmented control inside each group filters rates: All · Refundable · Non-refundable · Breakfast.

Open concept →
Concept 08Hierarchical disclosure
Normalized from

Two-level: room type → rate variants

Pick a normalized room type at level 1; expand any rate variant (Flexible, Advance Purchase, Member Saver…) to see its bookable offers.

Open concept →
Concept 09Top 3 + reserve weight
Show 4 more ▾

Progressive disclosure with sticky CTA

Top 2–3 rates shown initially; 'Show N more' reveals the rest inline. Reserve buttons heavier and right-anchored.

Open concept →
Concept 10Trust + match quality
Likely same room · 6 offers

Confidence-led concept

Each group leads with a confidence banner ('Same room across 6 offers · Matched across 4 rate plans') plus a meter and 'How we matched' panel.

Open concept →

Build a rate

4 directions · click to open

The concepts above ask which prebuilt rate? These ask what if the user composes the rate themselves? Pick a base room and add or remove options — refundability, breakfast, payment, corporate qualifiers — and watch price, chips, and policy update live. Four directions on the opt-in vs opt-out and guided vs scannable axes.