Disney Parks Food and Beverage Mobile Ordering

Launching mobile ordering feature to the Disney world app

Mobile Ordering Hero Image

Disney World Mobile Ordering Project

To catch up an industry standard, Disney had unique problems to solve.


Mobile Ordering Feature

We were designing this brand new experience in Walt Disney World app that allows guests to order food on their mobile devices and pick up at a dedicated counter for quick service restaurants inside Disney World.

It helps Users:

  • Save time by not waiting in line

  • Take more control of their schedule

  • Avoid pressure ordering at the counter

It helps Business:

  • Reduce cashier labor

  • Increase check average

  • Serve more QSR meals rather than snacks


Approximately 12% adoption rate and 20% check average increase were seen since launch.  This outcome convinced 22 additional restaurants to join the feature-capable list.


My Role

I was 1 of the 3 interaction designers, actively brainstorming, whiteboarding and documenting design directions during early stage design workshops

Later on, we split and each owned parts of the flow/problems specified below.

I also led the prototyping team for usability test.




Guest Empathy Exercise

Before the official kick-off meeting, I held consecutive design workshops to do problem statement and task model exercises to help the team quickly ramp up.



Early Stages of Flow Exploration

Wireframes I did during the early stages of design. The style doesn't get too into the details but leverages patterns from Disney's existing design system.



Rapid Motion Studies For Quick Decision making

Quick upsell design/motion explorations during workshop sessions: 



Case Study: Designing Customization Module

Offering customization options for items users are ordering is one of the most anticipated feature from early user research. 

Because of drastically different menus from 16 QSR restaurants, designing a scalable component for various customizable items was a bit tricky. Here's an example showing how different these items and their options could be:

Customizable Item Default        Option 2       Option 3   Option 4      Option 5   Option 6   
Salad DressingYesNoYes, On the side
BaconYesNoExtra with Additional Cost
Meat TemperatureMediumVery RareRareMedium RareMedium Well DoneWell Done

The interface needs to carry the function of not only showing the options but also informing some options are with extra cost. Here are some explorations I did with common design controls and existing patterns from the design system. 

After reviewing with other designers, we agreed that none of them are scalable to achieve simplicity, discoverability and easy of use for all possible customizable items data sets.


So I took a different approach, referencing the natural conversations between the guest and the server when ordering food:

CUI For Customization.png

Instead of calling out all the options for each item, the server only says the default choices, and have the guest continue to engage the interaction based on his/her interest.

Based on that, I combined a traditional labeled accordion with a current selection status showing on the right. When expanded, a set of single-selection buttons are presented, with additional cost being part of the button label if applicable:

Customization Component Wires

Because it's a new pattern, a couple of nuance motions were added to build stronger connection between the status label and the selection buttons.

Framer prototype that demonstrate the interaction:



Challenging the Notification Strategy

Based on the established business rules, users' notification center will be flooded with messages from each individual restaurant.

I created a comparison visualization showing how it happens and what the recommendation is. It successfully raised our PM's concern and ended up changing the business rules.



Fully Functional Framer Prototype within 2 weeks

I led a team of 5 designers, set up daily check-ins, architected the framework , and made timelines and task sheets to make sure we meet the deadline.


Final Framer prototype with customizable order, price calculation and refined motion:



Motion Spec for hand off

Motion specifications along with the demo to help communicate detailed animation/motion to engineers.



Want to hear the full story?  Shoot me An Email:  📤


Hero image credit: disneyworld.disney.go.com