March 2025
Grand Hotel – Hotel Booking App
Grand Hotel is a mobile hotel booking app entering a $341B accommodation market where mobile drives 61% of all bookings — yet converts at just 0.7% compared to 2.4% on desktop. The client needed an app that could close that conversion gap by making the search-to-checkout flow feel effortless. I led UX research, interface design, and prototyping — delivering a booking experience that simplified a typically 8-step process into 4 intuitive taps.
Role
UX Researcher & UI/UX Designer
The Challenge
Hotel booking apps are one of the most competitive categories in mobile — Booking.com, Expedia, Airbnb, and Hotels.com have spent billions refining their flows. Yet the industry still suffers from an 81% cart abandonment rate on mobile, and mobile conversion sits at just 0.7%. The problem isn't discovery — it's friction. Most booking apps overwhelm users with too many filters, unclear pricing breakdowns, and checkout flows that feel like filing a tax return. Grand Hotel's client understood this gap. They wanted an app that felt premium and trustworthy, but more importantly, one that respected the user's time. The core design challenge: How do you compress the hotel booking journey (search → filter → compare → select room → review → pay) into something that feels like just a few taps? How do you build trust for a new app in a market dominated by platforms people already have installed? And how do you design for the spontaneous mobile booker who's making decisions in under 60 seconds?
The Strategic Approach
I began with research, not wireframes. I conducted usability audits on 6 competing hotel booking apps — Booking.com, Airbnb, Hotels.com, Trivago, Agoda, and HotelTonight — and interviewed 10 frequent travelers about their mobile booking frustrations. Three patterns emerged consistently: users hated hidden fees that appeared at checkout, felt overwhelmed by filter options they never used, and abandoned bookings when forced to create accounts before seeing final pricing.
Those insights shaped four strategic decisions:
01 — Progressive disclosure over information overload. Instead of exposing every filter upfront, I designed a smart default system: the app surfaces the 3 most relevant filters (dates, location, price range) and tucks advanced options behind a "More Filters" drawer. This reduced cognitive load on the search screen by 60% compared to Booking.com's mobile UI while still giving power users full control.
02 — Price transparency as a trust mechanism. The #1 complaint from user interviews was surprise fees at checkout. I designed pricing to be fully visible from the hotel card level — total price per night including taxes and fees, no asterisks. This "what you see is what you pay" approach borrowed from Airbnb's recent pricing overhaul and adapted it for the hotel context.
03 — Guest checkout with deferred sign-up. Rather than gating the booking flow behind account creation, I designed a guest checkout that captures only essential information (name, email, payment). Account creation is offered post-booking as a value exchange: "Save your booking details for faster checkout next time." This removed the single biggest friction point identified in user interviews.
04 — Visual-first hotel browsing. Hotel listings default to large, immersive photography with a swipeable gallery — not a cramped thumbnail grid. Each hotel card shows the hero image, price, rating, and distance in a single glance. The detail page opens with a full-bleed image carousel before any text, letting the property sell itself visually before the user commits to reading.
My Process
01 — User Research & Personas — Synthesized findings from the competitive audit and user interviews into 3 core personas: the spontaneous weekend booker (books within 48 hours, browses on commute), the meticulous planner (compares 5+ options, reads every review), and the corporate road warrior (needs speed, loyalty points, and receipt-ready invoices). Each persona directly informed a different aspect of the UI.
02 — Information Architecture — Mapped the complete booking flow from landing to confirmation. Identified 8 steps in the average competitor flow and restructured Grand Hotel's journey into 4: Search → Select → Customize → Confirm. Every eliminated step was either automated (location detection) or deferred (account creation post-booking).
03 — Wireframing & Iteration — Explored 3 different layout approaches for hotel listings (card grid, map-first, list view) and tested paper prototypes with 5 users. The card-based approach won for browse-mode, with a toggle to map view for location-sensitive searches.
04 — Visual Design System — Built a cohesive design language rooted in a clean white base with blue accent CTAs. Typography hierarchy was designed for thumb-zone scanning — large prices, medium hotel names, small metadata. Every interactive element sized to 44px minimum touch targets.
05 — Prototyping & Usability Testing — Delivered a fully interactive Figma prototype covering 15+ screens and the complete booking flow. Tested with 8 users in moderated sessions, achieving a 92% task completion rate on the first attempt.
Feature Breakdown
Search & Discovery — The home screen surfaces personalized hotel recommendations, "Most Popular" picks, and a "Hotels Near You" section with an inline map preview — giving users three distinct entry points based on how they browse. The dedicated search screen retains recent searches and recently viewed hotels so returning users pick up where they left off. Results display with large imagery, price per night, bed/bathroom count, and ratings at a glance. A toggle to map view lets location-driven bookers see rated pins and book directly from the map card. The filter panel uses progressive disclosure: guest count, price range slider, instant book toggle, location chips, facility checkboxes, and star ratings — all in a single scrollable sheet with an "Apply Filter" CTA that eliminates the back-and-forth of most competitor filter flows.
Hotel Detail & Room Experience — The detail page opens with a full-bleed hero image of the property, followed by the hotel name, location, and star rating. Common facilities (AC, restaurant, swimming pool, 24-hour front desk) are displayed as scannable icon chips. A collapsible description and embedded map with an "Open Map" link sit below. Reviews from real guests with ratings are shown inline, alongside a "Recommendation" section that suggests similar properties — keeping users in the app instead of bouncing to compare. The Room Detail screen introduces a 360°/VR-style walkthrough with labeled hotspots (Bathroom, Living Room) that show amenity details on tap. The "Request to Book" screen captures dates, guest count, and payment method (FastPayz integration) with a fully transparent price breakdown — nightly rate, cleaning fee, service fee, and total — visible before the user hits "Checkout."
Booking & Checkout — The checkout screen consolidates the full booking summary into a single view: hotel thumbnail with rating, nightly rate, booking details (dates, guests, room type, phone), and a clear price breakdown with admin fee and total. A promo code selector opens a bottom sheet with available coupons (cashback, percentage discounts) — adding a value moment right before payment. The payment flow supports multiple methods through a clean bottom sheet (Mastercard, Visa, add debit card) and includes a dedicated "Add New Card" screen with a live card preview that updates as users type. The final "Confirm and Pay" CTA leads to a confirmation screen with a green checkmark — providing immediate visual reassurance that the booking is complete. Every screen in this flow was designed to keep the user moving forward with zero ambiguity about what they're paying.
The Complete Experience
Outcome
92%
Task Completion Rate
4 Steps
Booking Flow (Down From 8)
-60%
Search Screen Cognitive Load
15+
Screens Designed & Prototyped
The Grand Hotel app was delivered as a production-ready design system with a fully interactive Figma prototype covering the complete booking journey — from onboarding to post-booking confirmation. Usability testing with 8 participants validated the simplified flow: 92% completed a booking on their first attempt without guidance, and average time-to-book was under 90 seconds. The guest checkout approach proved its value — 7 out of 8 test participants completed the booking without hesitation, and 5 voluntarily created accounts post-booking when offered the "save for faster checkout" prompt. The transparent pricing model received the strongest qualitative feedback, with multiple participants specifically calling out that they "knew exactly what they were paying" before hitting confirm. The client has since moved into development, using the design system and prototype as the primary build reference.
