“launched contactless ordering in 190 select theaters for social distancing efforts, generating 22K+ mobile transactions on go-live weekend”

Convenience with in-app food purchases

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:

Design insight

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

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.

Food menu – mental models

The menu levels and food tiers are essential because they define the hierarchy of the menu. Taxonomy is key.

Due to resource constraints during the pandemic, the MVP menu did not include images for all menu items and concessions. Instead, the menu was prioritized based on popularity and inventory, with categories organized from broad to detailed for a streamlined user experience.

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.

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.

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.

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.

User scenarios

Scenarios use the paradigm and mental modal McDonalds and Chick-fil-a have; using a familiar pattern, the user will adapt more quickly.

Takeaways

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.