Disney World Mobile Ordering Project
To catch up an industry standard, Disney had unique problems to solve.
Mobile Ordering Feature
- Save time by not waiting in line
- Take more control of their schedule
- Avoid pressure ordering at the counter
- 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. Additional 22 restaurants were convinced to join the feature-capable list.
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:
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:
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:
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