F&B Mobile Ordering
I led the design of a mobile ordering system for hotels, expanding Canary's product suite into new revenue channels — spanning guest ordering, a menu CMS, and a staff fulfillment dashboard. The product went from concept to production in four months, shipping 93 of 100 scoped issues across three connected surfaces.
Hotel software platform serving 20,000+ properties worldwide.
Research to GA launch. Core ordering flow designed in a 4-day sprint, iterated over 6 months.
- Marco Sevilla — Lead Designer
- Nicolas Garnier — Product Lead
- Becca Aleynik — Product Manager
- Andrea Bradshaw — Eng Lead
- Joanne Chevalier — SWE
- Austin Irvine — SWE
- Adil Shaikh — SWE
- Grant Jenkins — SWE
- Luciano Guasco — SWE
Guest Ordering: Menu browsing & item customization, Cart & checkout with room charge, Order status tracking, Real-time order notifications
Staff Dashboard: Order queue & fulfillment view, Order detail side sheet with accept/deny, Delivery type configuration (in-room, poolside, etc.)
Menu CMS: Categories, items & modifier management, Supplemental fees & tax rules, Multi-property menu templating
Design highlights
Order confirmation with ETA
Hotel admin — delivery type setup
Supplemental fees and taxes configuration
From static content to revenue engine
Canary was expanding into APAC markets where mobile ordering was table stakes, not a differentiator. Without it, we couldn't compete. Closer to home, dedicated platforms like Iris and Toast were locking in contracts with major brands, and deals were slipping because we had no answer.
The challenge: Canary's Guest Hub was still a static content product — hotel info, amenities, messaging, basic upsells. Functional, but not transactional. F&B ordering would change that, turning Guest Hub from a content layer into a revenue-generating platform. Rather than building from scratch, we'd extend the existing Upsells infrastructure: reuse the backend, design a new guest experience for food ordering, and add F&B-specific capabilities like menus, modifiers, and time-based availability.
The biggest risk was scope. The market was full of consumer ordering apps and full-stack restaurant platforms. We had to stay disciplined: no multi-vendor marketplaces, no consumer-facing discovery, no kitchen operations software. Solve the hotel's problem — getting guest orders to staff efficiently — and nothing more.
The Problem
Hotels lose significant F&B revenue when guests have to call the front desk to order room service — a process that ties up understaffed front desks, leads to misheard orders, and creates enough friction that many guests just open DoorDash instead. One hotel we spoke to described their breakfast system using door hangers — guests would forget to hang them, staff would miss pickups, and complaints piled up. Physical menus required sanitization, were expensive to print, and costly to update when items changed.
The Solution
I designed a mobile-first ordering flow embedded directly in Canary's Digital Compendium — from menu browsing to order confirmation — alongside a staff fulfillment dashboard for managing incoming orders in real time.
Hero mockup — guest ordering flow showing menu → item detail → cart → confirmation
Design approach
Shaping the roadmap
We didn't build a linear roadmap and execute top-to-bottom. Research, design, and development ran in parallel — and the roadmap evolved as assumptions got tested. Features we initially planned got descoped when research revealed they weren't essential for launch. Others emerged from customer conversations we didn't expect. The final shipped scope looks nothing like the first draft.
1. Menu-first landing
Guests land directly on the restaurant's menu, not a hotel info page. I prioritized showing food immediately because research showed guests arrive with intent to order — removing friction between “I'm hungry” and “here's what's available” was the biggest conversion lever.
2. Delivery type drives the entire experience
I identified that all hotel ordering workflows share a common variable: where the food goes. This became the central design insight — in-room vs. alternative location (pool, lounge) determines the checkout flow, authentication requirements, and staff fulfillment workflow. Hotels configure this per outlet, and the guest experience adapts automatically. This simplified what could have been dozens of edge cases into a clean, scalable model.
Diagram showing delivery type → checkout flow branching
3. Five system objects as the IA backbone
The design is built on five interconnected objects: Ordering Outlets, Menus, Items, Modifier Groups, and Orders. This object model meant hotels manage items in one place and compose menus flexibly — pricing can be overridden per menu without duplicating items.
Real-time order queue with accept/deny workflow, time-elapsed sorting, and dedicated notification settings.
Hotels manage five interconnected objects. Items are authored once and composed into menus flexibly — pricing can be overridden per menu without duplicating items.
Guests access ordering through their hotel's digital compendium, a direct SMS link, or by scanning a QR code at their table or room. No app download required.
4. Reservation-linked ordering with graceful fallbacks
For PMS-integrated hotels, orders tie to guest reservations — contact details pre-fill, identity is verified, and staff see a trust badge. For non-PMS hotels or walk-in visitors, I designed a manual entry flow that still captures everything staff need. This let us ship to a much wider range of hotels without waiting for POS integrations.
Verified vs. unverified vs. walk-in badge states on staff dashboard
5. Built on Upsells infrastructure, designed for F&B
Rather than building from scratch, F&B ordering reuses Canary's existing Purchase Order system from Upsells. I designed the staff experience to feel native to F&B — color-coded priorities, time-elapsed sorting, dedicated notification settings — while engineering could ship faster by leveraging existing backend rails.
Staff order fulfillment dashboard
Research & Discovery
Research methods
- Customer interviews with hotel F&B staff (The Pines Resort, COMO Hotels, Eurostar, Embassy Suites Times Square, Chateau Avalon, Malibu Beach Inn)
- Prototype usability testing with hotel staff and guests
- Competitive analysis (Aigens, Duve, Toast Mobile, Lightspeed, Iris/Marriott)
- Design jams with engineering to validate technical feasibility
- Live pilot feedback from HOMA Cherngtalay (Thailand) and Omni Hotels
Key insights
1. Phone-based ordering is the biggest pain during peak hours. Chateau Avalon described guests calling an understaffed front desk, staff taking orders manually, preparing food, delivering it, then manually charging the folio. They estimated savings of over $2,000/year just from eliminating physical menus and reducing errors.
→ Designed the staff dashboard to sort by time elapsed with visual urgency indicators so nothing gets missed.
2. Requiring POS would block 80%+ of potential customers. When a sales rep asked “F&B ordering works for any hotel right? No integrations needed?” — that validated the no-POS-required approach.
→ Designed the full ordering flow to work without any POS, using manual menu management and email/SMS notifications to staff.
3. Guests expect consumer-app speed. A job candidate told our VP of Product that he experienced Canary's F&B ordering poolside at a COMO hotel in Thailand: “I didn't have to walk 100 meters to place an order — I could do everything from my phone.”
→ Designed as mobile-optimized web flow (no app download) with familiar patterns: tap to add, cart summary, one-tap submit.
4. Hotels need test mode before going live.
→ Designed dedicated test mode so staff can walk through the full guest flow without it being visible to actual guests.
5. Menu availability timing matters. Competitors just dump all menus regardless of time.
→ Designed time-aware menu availability, inspired by Uber Eats, with a menu selector that clearly indicates which menus are currently available.
The prototype
I built a fully interactive prototype (Next.js + React, deployed to Vercel) that evolved over several weeks — starting with order management screens, expanding to menu management, then a full functional demo with 50+ pre-loaded items and real cart persistence, then AI-powered menu parsing using Claude's API, and finally the modifier system. This wasn't a throwaway prototype — it became the primary demo tool for sales calls, GTM enablement, and stakeholder reviews.
Code prototype on Vercel — functional demo with 50+ items
Research methods
- Customer interviews with hotel F&B staff (The Pines Resort, COMO Hotels, Eurostar, Embassy Suites Times Square, Chateau Avalon, Malibu Beach Inn)
- Prototype usability testing with hotel staff and guests
- Competitive analysis (Aigens, Duve, Toast Mobile, Lightspeed, Iris/Marriott)
- Design jams with engineering to validate technical feasibility
- Live pilot feedback from HOMA Cherngtalay (Thailand) and Omni Hotels
Key insights
1. Phone-based ordering is the biggest pain during peak hours. Chateau Avalon described guests calling an understaffed front desk, staff taking orders manually, preparing food, delivering it, then manually charging the folio. They estimated savings of over $2,000/year just from eliminating physical menus and reducing errors.
→ Designed the staff dashboard to sort by time elapsed with visual urgency indicators so nothing gets missed.
2. Requiring POS would block 80%+ of potential customers. When a sales rep asked “F&B ordering works for any hotel right? No integrations needed?” — that validated the no-POS-required approach.
→ Designed the full ordering flow to work without any POS, using manual menu management and email/SMS notifications to staff.
3. Guests expect consumer-app speed. A job candidate told our VP of Product that he experienced Canary's F&B ordering poolside at a COMO hotel in Thailand: “I didn't have to walk 100 meters to place an order — I could do everything from my phone.”
→ Designed as mobile-optimized web flow (no app download) with familiar patterns: tap to add, cart summary, one-tap submit.
4. Hotels need test mode before going live.
→ Designed dedicated test mode so staff can walk through the full guest flow without it being visible to actual guests.
5. Menu availability timing matters. Competitors just dump all menus regardless of time.
→ Designed time-aware menu availability, inspired by Uber Eats, with a menu selector that clearly indicates which menus are currently available.
The prototype
I built a fully interactive prototype (Next.js + React, deployed to Vercel) that evolved over several weeks — starting with order management screens, expanding to menu management, then a full functional demo with 50+ pre-loaded items and real cart persistence, then AI-powered menu parsing using Claude's API, and finally the modifier system. This wasn't a throwaway prototype — it became the primary demo tool for sales calls, GTM enablement, and stakeholder reviews.
Code prototype on Vercel — functional demo with 50+ items
Design Process
Approach: Ship the simplest version that solves the core problem, then expand based on real customer feedback.
Early Figma explorations, wireframes of ordering flow
Research phase (Aug 2025)
Set up customer calls, wrote research scripts, and built code prototypes to validate requirements with hotel staff. Early design jams with engineering surfaced that food ordering is “a complex process with its own operational and integration challenges” — this shaped my decision to start simple and avoid POS dependencies.
MVP sprint (Sep 2025)
30 iterations in a focused 4-day sprint to nail the core guest ordering flow — menu browsing, item selection, cart review, order submission, and confirmation with ETA.
Staff experience (Oct–Nov 2025)
Designed the hotel-facing dashboard — new orders, past orders, order detail panel, approve/deny workflows. I proactively prioritized the remaining design tickets by business impact: supplemental fees first (quick revenue win), then modifier groups, then staff notifications.
Modifiers & polish (Nov–Dec 2025)
Designed the full modifier management system — add-ons, substitutions, and variations. Collaborated with Becca (Upsells PM) and Nico on nuanced decisions like whether to pre-select default modifiers (we studied Square, Uber Eats, and DoorDash and landed on no pre-selection).
Expansion (Jan 2026)
Designed the flexible ordering model — alternative delivery locations, non-PMS hotel support, walk-in visitor ordering. This required rethinking checkout as 6 distinct scenarios based on delivery type × hotel type × auth state. I shared a comprehensive design share to #epd-in-stay covering all scenarios.
Constraints I designed around
- No POS integration at launch — Most target hotels don't have cloud POS
- Built on existing Upsells rails — Engineering needed to ship fast
- Bundled with Compendium — Guest entry point had to live naturally within the Compendium ecosystem
- No app download — Everything as mobile web via QR code or link
Before/after — phone-based ordering vs. digital flow
Approach: Ship the simplest version that solves the core problem, then expand based on real customer feedback.
Early Figma explorations, wireframes of ordering flow
Research phase (Aug 2025)
Set up customer calls, wrote research scripts, and built code prototypes to validate requirements with hotel staff. Early design jams with engineering surfaced that food ordering is “a complex process with its own operational and integration challenges” — this shaped my decision to start simple and avoid POS dependencies.
MVP sprint (Sep 2025)
30 iterations in a focused 4-day sprint to nail the core guest ordering flow — menu browsing, item selection, cart review, order submission, and confirmation with ETA.
Staff experience (Oct–Nov 2025)
Designed the hotel-facing dashboard — new orders, past orders, order detail panel, approve/deny workflows. I proactively prioritized the remaining design tickets by business impact: supplemental fees first (quick revenue win), then modifier groups, then staff notifications.
Modifiers & polish (Nov–Dec 2025)
Designed the full modifier management system — add-ons, substitutions, and variations. Collaborated with Becca (Upsells PM) and Nico on nuanced decisions like whether to pre-select default modifiers (we studied Square, Uber Eats, and DoorDash and landed on no pre-selection).
Expansion (Jan 2026)
Designed the flexible ordering model — alternative delivery locations, non-PMS hotel support, walk-in visitor ordering. This required rethinking checkout as 6 distinct scenarios based on delivery type × hotel type × auth state. I shared a comprehensive design share to #epd-in-stay covering all scenarios.
Constraints I designed around
- No POS integration at launch — Most target hotels don't have cloud POS
- Built on existing Upsells rails — Engineering needed to ship fast
- Bundled with Compendium — Guest entry point had to live naturally within the Compendium ecosystem
- No app download — Everything as mobile web via QR code or link
Before/after — phone-based ordering vs. digital flow
Impact & Results
Business impact
- Customer launch: January 21, 2026 — GA launch: February 9, 2026
- Pricing: $1.75/room/month bundled with Compendium, $1.00/room/month as add-on
- First verbal commitment: Malibu Beach Inn (Dec 2, 2025) — Director of Operations ready to sign immediately after product demo
- Second verbal commitment: Embassy Suites Times Square (Dec 3, 2025)
- Target: 15–30% increase in F&B revenue from reduced ordering friction
- GTM tiger team of 9 AEs assembled; customer launch email sent to 349+ accounts
- 50 F&B orders processed during pilot phase, validating demand before GA
“Significant value in the bundle, estimating over $2,000/year savings from eliminating physical menus and reducing errors.”
— Chateau Avalon ownership
User impact
- HOMA Cherngtalay (Thailand pilot) actively used the product and provided constructive feedback — validating real hotel adoption
- Crown Resorts (Australia) requested a dedicated demo, signaling enterprise interest in APAC
- Multiple APAC properties expressing interest with combined potential ARR of $25K+
“Customers value having mobile ordering as part of Canary because it enhances visibility for F&B as part of Compendium, makes it easier to engage via Messaging, and bundles products into one provider.”
— Nico Garnier, PM
Product impact
- F&B Ordering became the foundation for a broader Mobile Ordering platform — POS integration, order scheduling, and insights dashboard in pipeline
- The delivery-type model is now the architectural pattern for all future ordering scenarios including spa and activity bookings
- My code prototype became a GTM asset — Marketing pulled images for sales slides, CS used it for training
Business impact
- Customer launch: January 21, 2026 — GA launch: February 9, 2026
- Pricing: $1.75/room/month bundled with Compendium, $1.00/room/month as add-on
- First verbal commitment: Malibu Beach Inn (Dec 2, 2025) — Director of Operations ready to sign immediately after product demo
- Second verbal commitment: Embassy Suites Times Square (Dec 3, 2025)
- Target: 15–30% increase in F&B revenue from reduced ordering friction
- GTM tiger team of 9 AEs assembled; customer launch email sent to 349+ accounts
- 50 F&B orders processed during pilot phase, validating demand before GA
“Significant value in the bundle, estimating over $2,000/year savings from eliminating physical menus and reducing errors.”
— Chateau Avalon ownership
User impact
- HOMA Cherngtalay (Thailand pilot) actively used the product and provided constructive feedback — validating real hotel adoption
- Crown Resorts (Australia) requested a dedicated demo, signaling enterprise interest in APAC
- Multiple APAC properties expressing interest with combined potential ARR of $25K+
“Customers value having mobile ordering as part of Canary because it enhances visibility for F&B as part of Compendium, makes it easier to engage via Messaging, and bundles products into one provider.”
— Nico Garnier, PM
Product impact
- F&B Ordering became the foundation for a broader Mobile Ordering platform — POS integration, order scheduling, and insights dashboard in pipeline
- The delivery-type model is now the architectural pattern for all future ordering scenarios including spa and activity bookings
- My code prototype became a GTM asset — Marketing pulled images for sales slides, CS used it for training
Reflection
Worked well
- Building a code prototype early (not just Figma) made customer research dramatically more effective — hotel staff could interact with realistic menus and ordering flows. The prototype evolved into a genuine GTM asset.
- The “delivery type drives the experience” insight simplified the entire product architecture — one variable that determines the flow instead of dozens of edge cases.
- Close collaboration with PM (Nico Garnier) on customer calls gave me direct exposure to buyer pain points — I wasn't designing from second-hand requirements.
- Cross-functional design collaboration with Becca (Upsells PM) on the modifier system surfaced edge cases early.
Would change
- I'd push harder to include staff notifications in the MVP. Post-launch feedback from HOMA showed hotels needed more immediate alerts — their F&B team had to keep checking for new messages.
- Item remarks discoverability could have been stronger. HOMA's feedback was specific: “It is not clear from the main menu screen that guests need to tap into the item to leave a remark.” I should have caught this in prototype testing.
- The AI menu parsing experiment (Claude's API) was well-received but stayed as a prototype. I'd push to get it into the roadmap earlier since manual menu setup is the biggest onboarding friction.
What I learned
- Designing for two distinct audiences in one product (guests ordering + staff fulfilling) requires thinking about the system, not just the screens.
- Shipping without POS integration was the right call — it let us validate demand months earlier than waiting for integrations.
- The prototype-to-product pipeline works. Building in code created a shared artifact that aligned engineering, product, sales, and marketing around a tangible vision.
Worked well
- Building a code prototype early (not just Figma) made customer research dramatically more effective — hotel staff could interact with realistic menus and ordering flows. The prototype evolved into a genuine GTM asset.
- The “delivery type drives the experience” insight simplified the entire product architecture — one variable that determines the flow instead of dozens of edge cases.
- Close collaboration with PM (Nico Garnier) on customer calls gave me direct exposure to buyer pain points — I wasn't designing from second-hand requirements.
- Cross-functional design collaboration with Becca (Upsells PM) on the modifier system surfaced edge cases early.
Would change
- I'd push harder to include staff notifications in the MVP. Post-launch feedback from HOMA showed hotels needed more immediate alerts — their F&B team had to keep checking for new messages.
- Item remarks discoverability could have been stronger. HOMA's feedback was specific: “It is not clear from the main menu screen that guests need to tap into the item to leave a remark.” I should have caught this in prototype testing.
- The AI menu parsing experiment (Claude's API) was well-received but stayed as a prototype. I'd push to get it into the roadmap earlier since manual menu setup is the biggest onboarding friction.
What I learned
- Designing for two distinct audiences in one product (guests ordering + staff fulfilling) requires thinking about the system, not just the screens.
- Shipping without POS integration was the right call — it let us validate demand months earlier than waiting for integrations.
- The prototype-to-product pipeline works. Building in code created a shared artifact that aligned engineering, product, sales, and marketing around a tangible vision.