Saved Hotel Property Comparison
Design a focused comparison of two saved hotels using equivalent rooms, total price, cancellation terms, location, and access needs.
The brief
Understand the problem
Background
Hotel cards make many properties look comparable even when prices exclude taxes, room types differ, and cancellation deadlines use local time. A shortlist comparison should help a traveler decide without hiding meaningful differences.
User context
Grace has saved two hotels for a four-night conference trip. One is cheaper and closer to the venue, while the other confirms a roll-in shower and offers a later cancellation deadline.
Product problem
Grace needs to compare like with like and understand which details are verified, estimated, or unavailable before choosing a property.
Objective
Create shortlist, comparison, policy detail, and selection states for two saved properties.
What to design
Define the experience
Required experience
- Select two saved properties for the same trip
- Align equivalent rooms and occupancy
- Compare total cost, access, location, and cancellation
- Choose one property while keeping the alternative saved
Screens and states
- Saved property list
- Side-by-side comparison
- Room and policy detail
- Selection review
Core user flow
Follow the critical path
- 01
Grace selects both saved hotels for her conference dates
- 02
The comparison aligns one accessible queen room at each property
- 03
She opens the cheaper hotel's access details and finds the shower type unconfirmed
- 04
Grace chooses the confirmed room and reviews the complete price before booking
Product rules
Requirements and constraints
Requirements
- Compare the same dates, guests, currency, and room basis
- Show taxes, fees, deposit, and pay-later timing in the total
- Use exact cancellation dates with the property's local time
- Distinguish property claims, guest reports, and verified access details
- Let users hide attributes they do not need
Constraints
- Prices and room inventory may change during comparison
- Rooms with different bed or cancellation terms cannot be presented as equivalent
- Distance alone cannot represent route accessibility
Reality check
States worth considering
Ready-to-use content
Mock data
Use this content to test hierarchy and realistic data states. You can expand it when the concept needs more depth.
Property A
- Total: $812
- 12 minutes to venue
- Free cancellation until 18:00 on 4 October
- Roll-in shower confirmed
Property B
- Total: $744
- 7 minutes to venue
- Free cancellation until 12:00 on 2 October
- Shower type unconfirmed
Finish line
What to deliver
- Four responsive screens showing a two-property decision
- A comparison component with unavailable, unverified, and changed states
If you want more
Optional extensions
Optional direction
Visual resources
Use these as a starting constraint if you want one. They are not part of the required solution.
Open Sans & Libre Baskerville
Clear interface writing gives people the confidence to understand what changed and decide what to do next.
Open Sans & Libre Baskerville
Clear interface writing gives people the confidence to understand what changed and decide what to do next.
Theory to review
UX principles for this brief
Use these as decision lenses, then validate the design with the people and context in the brief.
effectChoice OverloadLarge or difficult choice sets can reduce decision confidence or action when options are hard to compare and preferences are uncertain.
effectDecoy EffectAdding an option that is clearly worse than one target option on relevant attributes can shift preference toward that target.
modelSatisficingPeople often stop searching when they encounter an option that meets an acceptable threshold rather than exhaustively finding the theoretical optimum.
principleSymmetry PrincipleSymmetrical regions tend to be perceived as coherent figures or paired units, especially around a clear axis.