Hotel PDP›Rooms & Ratesimplied context · 764 px
Build your rate · opt-out
Best experience pre-selected. Remove options to simplify.
Room type
Premium options · all pre-selected
Your rate
In policy$266/ night
base $219 · +$47 options
Free cancellationIncludes breakfastIncludes parkingPay at hotel
State breakdown · 4 states
State 01 / 04All recommended on
premium baselineBuild your rate · opt-out
Best experience pre-selected. Remove options to simplify.
Room type
Premium options · all pre-selected
Your rate
In policy$266/ night
base $219 · +$47 options
Free cancellationIncludes breakfastIncludes parkingPay at hotel
State 02 / 04Breakfast removed
−$20Build your rate · opt-out
Best experience pre-selected. Remove options to simplify.
Room type
Premium options · all pre-selected
−$20 removed
Your rate
In policy$246/ night
base $219 · +$27 options
Free cancellationIncludes parkingPay at hotel
State 03 / 04Premium removed
−$47Build your rate · opt-out
Best experience pre-selected. Remove options to simplify.
Room type
Premium options · all pre-selected
−$47 removed
Your rate
In policy$219/ night
base $219
Pay at hotel
State 04 / 04Stripped to base
base rate onlyBuild your rate · opt-out
Best experience pre-selected. Remove options to simplify.
Room type
Premium options · all pre-selected
−$47 removed
Your rate
In policy$219/ night
base $219
No options selected · base rate only
Design review · breakdown
What this is
Same option list as Concept 11, but every value-add is checked by default with a 'Recommended' badge. Removing options strikes them through and decreases the total.
Why it works
Anchoring + loss aversion lift attach for breakfast, refundability, and parking. Users see the premium total first and decide what they're willing to give up.
Best use case
Leisure or hybrid audiences where flexibility and amenities are likely to be valued, and where the agent wants to nudge toward the fuller experience.
Tradeoffs / risks
Can feel paternalistic or manipulative if defaults feel forced. Higher starting price may scare price-sensitive users before they realize options are removable.
UX notes · scannability · normalization · booking confidence · provider transparency
Default bias: opt-out. Removed options stay visible (struck through) so the user can re-add them. Running 'savings' tally makes the simplification tangible.
Hand off · Claude Code prompt
Paste this into Claude Code to regenerate this concept as a standalone interactive wireframe component.
You are building one self-contained, fully interactive wireframe-style React component that demonstrates a single hotel "Room Normalizer" concept. # Concept - Number: 12 of 14 - Section: builder - Name: Premium pre-selected (opt-out) - Tagline: Compose · opt-out - One-line summary: Start at a recommended premium configuration with everything on. Remove options to simplify and reduce price. # Framing Inverts the opt-in model. Anchor on the best experience, then let the user strip back to what they actually need. Tested behavioral default for higher attach rates. # What this is Same option list as Concept 11, but every value-add is checked by default with a 'Recommended' badge. Removing options strikes them through and decreases the total. # Why it works Anchoring + loss aversion lift attach for breakfast, refundability, and parking. Users see the premium total first and decide what they're willing to give up. # Best use case Leisure or hybrid audiences where flexibility and amenities are likely to be valued, and where the agent wants to nudge toward the fuller experience. # Tradeoffs / risks Can feel paternalistic or manipulative if defaults feel forced. Higher starting price may scare price-sensitive users before they realize options are removable. # UX notes (scannability · normalization · booking confidence · provider transparency) Default bias: opt-out. Removed options stay visible (struck through) so the user can re-add them. Running 'savings' tally makes the simplification tangible. # Visual + interaction requirements - Wireframe fidelity: monochrome, system UI, no brand color. Use Tailwind utility classes only. No images. Use simple borders, muted backgrounds, and mono labels for meta text (uppercase, tracking-widest, text-[10px]). - Canvas width: 764px, centered. Internal content respects that frame. - Context: this lives inside a hotel PDP "Rooms & Rates" section. Assume 3 normalized room types (King, Queen, Double Queen) with 5–8 bookable rates each. Invent realistic mock data inline — rate label, bed, meals (room only / breakfast included), cancellation (free until N / non-refundable), payment (pay now / pay at hotel), price per night. - Fully interactive: every control the concept implies must work in-browser with React state only — no backend, no router. Examples: accordions expand, tabs filter, sort headers sort, "Show N more" reveals rows, builder toggles recompute price live, sticky CTAs update with selection. - Accessibility: real <button> elements, keyboard focus rings, aria-expanded on disclosure controls, aria-pressed on toggles. # Deliverable - A single default-exported React component file using TypeScript + Tailwind. - No external UI library. Inline any small primitives you need. - Include the mock data inline at the top of the file. - File should run as-is when dropped into a Vite + React + Tailwind project. Build only this concept. Do not generate the other 13.