launched contactless ordering in 190 select theaters for social distancing efforts, generating 22K+ mobile transactions on go-live weekend
Summary & business goal
In-app concession orders is a new feature to encourage safety as moviegoers go back to theaters post COVID-19 outbreak.
The business goal was to implement contactless ordering during the first phase of the pandemic shutdown. The development team needed time to build and release before reopening theatres at the end of the summer.
There is an MVP version, as well as a post MPV version. The feature is to be implemented on Cineworld’s mobile app and other tenants around the globe.
Contactless ordering helps with social distancing and safety measures but will also encourage app downloads and in-app revenue.
Design goals
Create a workflow in the app for contactless ordering of concessions.
- Make a multi-step workflow intuitive.
- Avoid dropouts during signup.
Role
Lead designer: UX/UI focus in various design and research methods, including brainstorming and problem solving techniques, competitive analysis, and iterative workflows within a testing environment.
Project required working closely with:
- Business Analyst
- Product Owner
- Marketing
- API Developers
- Front-End Developers
- Food and Beverage
- Operations
UX insight and findings
Within a week, the competitive analysis and a early concept influenced stakeholder buy-in.
We could gauge stakeholder’s reaction to the design before creating a lo-fi prototype.
The quick prototype allowed the business to view something tangible. A workflow to review for early feedback, and an opportunity to refine the ask.
Onboarding
DoorDash and Chick-fil-a are two apps that stood out when it came to onboarding in-app food ordering.
Not everything about DoorDash aligned with our goals, but the onboarding part did match.
The three screens below show:
- intro screen
- location services
- manage location
Competitive Analysis: DoorDash On-boarding
Click-fil-a also has similar screens as DoorDash, but the intro screens differ slightly, being that Chick-fil-a is task-driven and DoorDash is informative.
Both apps helped grasp the behavior and order of how the screen interact with one another and flow.
The onboarding section is the first screens users interact with when entering the workflow. It sets the tone for the rest of the experience.
Competitive Analysis: Chick-fil-a Onboarding
Food menu – mental models
The menu levels and food tiers are essential because they define the hierarchy of the menu. Taxonomy is key.
For MVP, the menu items’ images are not an option—the more streamlined the experience, the better.
McDonald’s and Chick-fil-a are two apps that stood out when it came to in-app food menus.
Both apps aligned closely with the food menu structure for concessions. McDonald’s app has an easy to read the menu with defined categories.
The quantity screen helps visualize what information needs to be present for the user to complete their order.
Competitive Analysis: McDonald’s Food Menu (Hierarchy)
Chick-fil-a has a similar structure to McDonald’s. Both have what concessions is requiring:
- food categories
- single food category
- single item in the food category and quantity
Notice both have customization on the quantity screen? You can add extra ice or give special instructions.
Chick-fil-a has calories on its quantity screen, whereas McDonald’s has a menu to the nutrition values.
These concepts are nice to have, but not all can be for MVP as the deadline is tight.
Competitive Analysis: Chick-fil-a Food Menu (Hierarchy)
Intentional design
The McDonald and Chick-fil-a food menus above influenced the outcome of the design for concessions. With minimal setup and no item images, we focused on taxonomy and data pulled from the food and beverage list.
Managed by F&B, Operations, and API developers, this was a large collaborative effort to have the categories and item names appear a certain way that is user friendly.
There was a lot of troubleshooting on the backend and character limits on the titles, approvals, and functionality. Time was not on our side, and inventory was limited per theatre location.
Organization: Concession Food Menu (Hierarchy)
Workflows and behaviors
The competitive analysis helped with understanding how to create a workflow even if it’s a rough draft.
The workflow helps with issues early on. Viewing the customer journey from a big picture helps identify:
- missing scenarios
- current state
- current state reworked
- new screens
- conditional behaviors
- messaging
- error messages
- edge cases
Knowing the current state and future state helps with repurposing existing screens.
The workflow helps with implementation and development and consistency with components.
Feasibility: Expectations – Limitations
Predicting scenarios
Scenarios use the paradigm and mental modal McDonald and Chick-fil-a have; using a familiar pattern, the user will adapt more quickly.
Wireframe User Flow
Key takeaway
Even though the deadline was tight, we followed a mental model based on other popular apps‘ patterns.
Knowing your current state helps implement a tight turnaround because you can reuse components and screens already created.
