Web App Design
·
Interaction Design
·
QR Platform
Overview
This product is a premium web application designed to bridge the gap between hotel guests and hospitality staff. Accessible instantly via a QR code placed in-room, the platform bypasses traditional, high-friction touchpoints: like dialing the front desk or waiting on hold. allowing guests to request essential items, schedule room refreshes, and browse specialized amenities directly from their smartphones.
Traditional hotel amenity requests rely heavily on phone calls or physical menus, leading to operational bottlenecks for housekeeping teams during peak checkout/check-in hours. For the guest, this friction often results in communication barriers, lack of transparency on request statuses, and an interrupted relaxation experience. The challenge was to create a lightweight, high-fidelity web application that retains a premium luxury aesthetic while streamlining delivery logistics.
Key Results
Zero App Store Friction
Sub-10 Second Request Time
Minimized Redundant Housekeeping Trips
Reduced Front Desk Call Volume
Increased Amenity Engagement
Role & Methods
Product Designer (End-to-End)
Competitive Benchmarking / Information Architecture / Wireframing / Interaction Design / UX Copywriting / Prototyping / Iteration with Stakeholders
Problem
In luxury hospitality, guest satisfaction relies on immediate, high-touch service. However, traditional communication methods, such as calling the front desk via an in-room intercom, create friction for both guests and hotel operations. Guests experience frustrating hold times, language barriers, and a lack of transparency regarding when their requests will be fulfilled.
Concurrently, during peak check-out and check-in hours, the front desk faces massive call volumes, leading to manual data-entry errors, operational bottlenecks, and miscommunicated requests to the housekeeping team. The challenge was to bridge this gap with a modern, digital touchpoint that maintains a premium brand experience while streamlining the logistics of on-demand hospitality.
Constraints
Zero installation barrier: The solution could not be a native iOS or Android app. Guests staying for only a few nights will not download an app from the App Store just to order a towel. The entire ecosystem had to function as a lightweight web application accessible instantly via an in-room QR code
Varying text inputs from admin: Because the notifications and amenity descriptions are manually inputted by hotel staff through an admin panel, the mobile UI had to handle highly unpredictable text lengths. The design required strict structural guidelines, such as exact text truncation rules and dedicated full-view modals, to prevent text wrapping from breaking the luxury grid layout.
Atmospheric visual consistency: The user interface had to feel like a natural extension of a physical luxury boutique hotel. The constraint was balancing a heavy, media-rich "glassmorphism" aesthetic (using complex background blurs and ambient gradients) with the performance limits of a mobile web browser, ensuring fast loading speeds even on weak hotel Wi-Fi networks.
Digital Elegance Meets Physical Spaces
To make the digital experience feel like a seamless extension of a physical boutique hotel room, the visual identity had to move away from cold, generic tech templates. The design system was built around a premium dark glassmorphism aesthetic, utilizing deep ambient backgrounds, soft glowing borders, and high-contrast cream typography.
Mirroring the Premium Guest Environment
By incorporating sophisticated background blurs and physical, reflective screen textures, the interface directly mirrors the atmospheric lighting and premium materials found within a luxury hotel suite. This intentional styling ensures the product feels less like a basic utility app and more like a high-end, digital concierge tailored specifically to the guest’s immediate surroundings.
Moving Past Generic Conventions
Reaching the final interface required a rigorous, iterative process driven by the desire to create something genuinely distinct in the hospitality space. Early explorations leaned toward a standard, multi-tab navigation system. While functional, testing revealed it felt too transactional, similar to an e-commerce checkout rather than a premium guest service.
Evolving the Bespoke Dashboard
We completely pivoted, undergoing multiple design rounds to evolve the interface into an elegant, card-based single-page dashboard. We introduced custom stepper counters that fluidly change states when active, and established strict micro-copy frameworks to balance the visual weight. Pushing past the first conventional layout allowed us to deliver a highly customized UI that balances elite brand aesthetics with seamless usability.
Drag to explore - Selected iterations from wide range of design rounds
The Main Portal & Structural Scaling
The finalized product delivers an intuitive, zero-friction user journey optimized for immediate mobile web performance. The core interface features an elegant, highly scannable grid layout that segments scattered hotel services into distinct, easily accessible action items.
Handling Admin Data & Micro-Interactions
To account for highly unpredictable text lengths sent from the hotel admin panel, the notification details page implements precise line-height distributions and text layout scaling to prevent long updates from breaking the visual hierarchy. This is paired with fluid active button states and built-in validation modals that confirm guest actions instantly without requiring full-page reloads.
Eliminating On-Boarding and Interaction Friction
Operating as a mobile web app removed the friction of app store downloads, making the platform instantly accessible to 100% of guests. Digitizing the manual front desk call process cut interaction costs, allowing guests to complete a request in under 10 seconds.
Optimizing Operational and Support Efficiency
Smart confirmation popups minimized accidental submissions and reduced redundant housekeeping trips. This digital catalog significantly unburdened the front desk during peak hours, lowering call volumes while increasing guest amenity engagement.
Key performance indicators
Designing for Physical Context
Building a digital product for a physical space highlighted the importance of environmental UI design. Colors, contrasts, and screen interactions must complement, rather than disrupt, the user's real-world atmosphere.
Accounting for Unpredictable Data
Working with dynamic backend content from an admin panel reinforced the need for defensive layout design. Creating robust truncation rules proved that a UI must remain beautiful even when real-world text lengths are unpredictable.
The Value of Creative Resilience
Pivoting through multiple design directions to discover a unique dashboard layout proved a valuable point. The most obvious or standard UX pattern isn't always the right fit for a highly branded, premium luxury tier product.