Birchwood Majestic: Hotel Booking Engine
Project Overview:
Birchwood Majestic is a fictional hospitality brand created to demonstrate the design of a full transactional hotel booking system, including search, room selection, guest details, checkout, and payment flows.
This project was intentionally designed mobile-first. Mobile environments expose UX weaknesses faster than desktop, forcing stronger hierarchy, clearer flow logic, and more intentional decision-making. Working within constrained screen space allowed me to focus on creating a streamlined transactional experience where each step, action, and pricing detail remains clear and purposeful.
The goal was to structure a complex booking journey into a clean, scalable interface that reflects real-world user behavior while supporting discovery, configuration, and checkout within a single cohesive flow.
My Role:
Senior UX/UI Product Designer
I designed the complete booking engine from concept through high-fidelity production UI, defining core flows, interface structure, and responsive layouts.
Scope of Work:
End-to-end design of the booking system, including flow definition, interface structure, high-fidelity prototyping, responsive layouts, accessibility considerations, and iterative refinement based on usability feedback, with a focus on creating clear, scalable, production-ready UI.
Tools:
Figma, Photoshop, Illustrator.
Disclaimer:
This project was created as a portfolio demonstration to represent the type of production UI and transactional systems I’ve designed professionally. Due to confidentiality constraints from previous roles, I’m unable to publicly share real client work, so this fictional booking system is used to showcase my approach to flow architecture, interface design, and production-ready UX..
The problem
Mobile hotel booking flows often fragment key decisions across disconnected screens, forcing users to repeatedly re-enter information while juggling location, dates, room options, and pricing. When availability, room details, and add-ons are not clearly structured, users lose context, hesitate, or abandon the booking during high-intent moments like selection and payment.
From a product perspective, the challenge is organizing multiple variables (location, dates, guests, room types, upgrades, and totals) into a single cohesive journey that remains readable and predictable on a small screen.
The goal
Design a mobile-first booking engine that consolidates discovery, availability, room selection, add-ons, and checkout into a continuous, structured flow. The goal was to guide users from location choice through confirmation while maintaining persistent booking context, minimizing re-entry of information, and surfacing pricing updates in real time.
The system prioritizes progressive disclosure, clear hierarchy, and persistent booking summaries, allowing users to confidently move forward while understanding exactly what they’re booking at every step.
Design Approach
This project was approached as a mobile transactional system rather than a conceptual experience.
I began by mapping the complete booking journey, from location discovery through confirmation, identifying key decision points such as date selection, room comparison, guest configuration, add-ons, and checkout.
From there, I structured the interface around progressive disclosure, ensuring users only see what they need at each step while maintaining persistent booking context (location, dates, guests, and pricing). The flow was designed to minimize re-entry of information and reduce friction during high-intent moments.
High-fidelity prototypes were built in Figma to define layout logic, component behavior, and interaction states, resulting in a production-ready UI that clearly communicates system structure and flow sequencing.
Primary Booking User
Booking Scenario
This project models a real mobile booking scenario, guiding users from location selection through date choice, room comparison, optional add-ons, and checkout in one continuous flow.
The interface maintains persistent booking context (location, dates, guests, and total price) to support fast decision-making and reduce friction during high-intent moments.
User Journey Map
This journey map defines the end-to-end mobile booking flow, from discovery to confirmation. The experience is structured to separate exploration from transaction, guiding users through location selection, room choice, optional add-ons, and checkout in a clear, linear path. Key decisions are surfaced progressively, with a persistent booking summary supporting transparency and confidence before payment
Key Features
Quick Room Quick Room Selection
Browse available rooms with clear layouts, detailed descriptions, and location-specific visuals, allowing users to compare options and make decisions quickly.
Personalized Add-ons
Optional services such as in-room spa treatments and private chauffeur rides are presented after room selection, supporting upgrades without disrupting the primary booking flow.
Clear Cost Breakdown
Pricing is displayed transparently throughout the experience, helping users understand total costs in real time and confirm selections with confidence.
User-Friendly Navigation
A structured interface provides fast access to locations, dates, rooms, and booking details, reducing friction across every step of the journey.
Booking Summary & Instant Confirmation
Users receive a complete booking overview before payment, followed by immediate confirmation, reinforcing trust and reducing uncertainty at checkout.
Interactive Location Map
An integrated map enables users to explore hotel branches, view available locations, and access property details directly from map pins for fast location-based selection.
Refining the Design Process
The process began by defining real booking scenarios for busy, luxury-focused travelers, outlining how users discover locations, compare rooms, and complete reservations. These scenarios informed the initial structure of the booking flow and helped clarify priorities across the experience.
I created a detailed user flow covering location selection, room choice, add-ons, and checkout. Early sketches and low-fidelity layouts were used to quickly validate hierarchy, navigation, and screen structure before moving into digital wireframes aligned with the brand.
Once the core flow was established, I developed low-fidelity prototypes to test navigation patterns and feature placement. These were refined into high-fidelity interactive prototypes, where visual design, branded components, and interaction states were finalized.
This iterative progression from rough exploration to production-level UI ensured the booking experience remained focused on clarity, efficiency, and real-world usability while maintaining Birchwood Majestic’s luxury aesthetic.
End-to-End Booking Flow
This flow illustrates the complete mobile booking journey, from initial discovery through room selection, personalization, payment, and confirmation. The experience was designed to reduce cognitive load while guiding users through a complex transactional process with clear steps, optional enhancements, and continuous cost visibility. The goal was to create a streamlined, production-ready flow that balances efficiency with a premium hospitality experience.
Crafting Luxury Through Color and Design: The Visual Identity of Birchwood Majestic
The visual identity of Birchwood Majestic was carefully designed to communicate luxury, calm, and refinement while supporting a highly usable transactional experience.
- Deep Forest Green (#1E4D2B): Symbolizes nature and evokes a feeling of tranquility, aligning with the brand’s commitment to elegance. This rich hue is ideal for primary buttons and headers, providing a strong visual anchor throughout the design.
- Warm Birch Beige (#EDE7DC): A soft, neutral shade that exudes calm and sophistication, making it perfect for background sections and maintaining a harmonious balance.
- Rich Gold (#C5A254): Adds a touch of opulence and refinement, enhancing accents, icons, and interactive elements with subtle luxury.
- Slate Grey (#4A4A4A): Serves as a modern and elegant neutral tone, perfect for text or as a secondary background. This color ensures clarity and complements the overall luxurious feel.
- Soft White (#FAF9F6): Provides a clean and fresh backdrop that enhances readability and creates a sense of spaciousness for content-heavy sections.
Typography was selected to reflect refined simplicity and strong legibility. The combination supports both brand expression and functional clarity, ensuring users can move through the booking journey effortlessly while maintaining a polished aesthetic.
To enhance the overall experience, AI-generated imagery was used to create custom visuals aligned with the brand’s tone. This approach allowed full creative control while maintaining originality across the interface. Every visual detail was intentionally composed to support immersion, reinforce luxury, and deliver a cohesive, high-end experience across the entire booking flow.
Step-by-Step User Journey: Birchwood Majestic Booking Process
Home Screen
Introduces the brand while immediately guiding users into booking, minimizing time-to-first-action.
UX Focus: Clear entry points for location and dates to reduce cognitive load and move users quickly into the booking flow.
Location Selection Screen
Allows users to compare Birchwood Majestic properties visually before committing.
UX Focus: Map-based discovery paired with property highlights to support fast, confident location decisions.
Choose Your Date Screen
Enables quick selection of check-in and check-out dates without leaving the flow.
UX Focus: Calendar design prioritizes clarity and minimizes taps for faster progression.
Guest and Room Selection Pop-Up
Collects details on the number of rooms, adults, and children before availability is shown.
UX Focus: Enables quick occupancy setup at the right moment in the flow, preventing unnecessary backtracking and ensuring room results are relevant from the start.
Room Selection Screen
Allows users to browse available room types for the selected location and dates.
UX Focus: Presents room options with clear hierarchy (image, capacity, price, CTA) to support fast comparison and confident decision-making.
Add-Ons and Services Screen
Provides optional enhancements that allow users to personalize their stay.
UX Focus: Introduces premium services as additive choices with transparent pricing, encouraging upgrades without disrupting the core booking journey.
Review Screen
Summarizes all booking selections, including rooms, dates, guests, and add-ons.
UX Focus: Creates a high-trust checkpoint where users can verify details and make adjustments before entering payment, reducing abandonment caused by uncertainty.
Complete Booking Screen
Captures guest information and payment details to finalize the reservation.
UX Focus: Organizes form inputs into clear sections to minimize friction on mobile and support fast, error-free completion.
Confirmation Pop-Up
Confirms the reservation and presents next steps after payment.
UX Focus: Immediately reassures users with booking confirmation while offering optional account creation without forcing commitment.
Birchwood Majestic UX/UI Prototype
For the best experience, please view this prototype on a desktop. Some elements may not display optimally on smaller screens.
Takeaways from This Project
Designing the Birchwood Majestic booking experience highlighted how important it is to turn complex booking steps into clear, easy-to-follow flows. Based on my years of hands-on work in hospitality platforms, this project focused on reducing friction through simple structure, clear steps, and always showing users their total cost.
Balancing luxury visuals with usability pushed me to keep the interface elegant while staying practical and accessible. This project reflects my experience designing real booking systems, turning complex requirements into clean, scalable UI that works for both users and business needs. Throughout every stage, I always think about the user and design with their needs at the center.