The project is to create a workflow in the app for contactless ordering of concessions.
In-app ordering is a new feature to encourage safety as moviegoers go back to theatres post the COVID-19 outbreak.
The new feature encourages safety as movie goers go back to theatres post COVID-19 outbreak.
The business goal was to implement contactless ordering during the first phase of the shutdown so the development team could have time to complete before reopening 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.
Having contactless ordering will help with social distancing and safety measures but will also encourage app downloads.
UX/UI focused on various design and research methods, including brainstorming techniques, competitive analysis, and iterative workflows in a testing environment.
This project required working closely with:
- Business Analyst
- Product Owner
- API Developers
- Front-End Developers
- Food and Beverage
UX Insight and Findings
Competitive analysis and a rough prototype completed in a week showed stakeholders an early concept.
We could gauge the stakeholder’s reaction to the design, expectations, and desires not communicated before by doing quick and dirty early on.
The quick prototype allowed the business to view something tangible. Either a workflow to review for feedback or an opportunity to speak more clearly on their ask.
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.
The three screens below show:
- intro screen
- option to turn on-location services
- edit and save location
These are good examples and happen to be part of the requirement for contactless ordering.
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.
The menu levels or 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.
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
- a 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.
Chick-fil-a Food Menu (Hierarchy)
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.
Concession Food Menu (Hierarchy)
Workflow 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 journey from a big picture helps identify:
- missing scenarios
- current state
- current state reworked
- new screens
- conditional behaviors
- error messages
- edge cases
Knowing the current state and where you want to go helps with repurposing existing screens.
The workflow helps with implementation and development and consistency with components.
Expectations – Limitations
Workflow and Wireframes
The workflow uses the paradigm and mental modal McDonald and Chick-fil-a have; using a familiar pattern, the user will adapt more quickly.
Concessions workflow – Guiding the user through the ordering process.
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.