Featured

Encouraging safety in movie theaters

“launched contactless ordering in 190 select theaters for social distancing efforts, generating 22K+ 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.

My 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

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)

Design Intent

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)

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 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

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.

Guiding the user through the ordering process.

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.

In-app concession ordering

Adding convenience for cinema enthusiasts

Project summary

Create a workflow in the app for Unlimited. The subscription plan exists but was only available for registration at the box office or over the phone with customer support.


Business goal

The business goal is to develop an Unlimited in-app workflow so users can signup and then book tickets in a sequential order.

Having the signup seamless with purchasing tickets will increase ticket sales, loyalty memberships, Unlimited subscriptions, and encourage app downloads.


Role

Lead designer: UX/UI focused on various design and research methods, including brainstorming techniques, feedback from surveys, user testing, iterative designs, and workflows.

Project required working closely with:

  • Business Analyst
  • Product Owner
  • Stakeholders
  • Developers (iOS and android)

Insight and findings

The understanding of the current state of an application and its current behaviors and workflows is key before doing anything else. An audit of the app’s current workflows, as well as screengrabs of the current state in both mobile platforms, was documented.

This activity helped the team understand what we currently have and what we have to work with. It may be that an ask in the MVP can not be completed because of the additional development work of technology not currently on the app.

Current State: Android Current State

Current state - Android

Journey mapping

Another exploration was to document the workflow for booking a ticket since this activity was a KPI for the business. It also helps understand any current issues users have now within the app and their frustrations.

Scenario: John opted his Regal app for the first time on his hone, he wants to find a movie and look tickets. John is not a RCC loyalty member, nor does he have a Regal account.

Booking a Ticket – User Journey Map

Journey map - Booking a ticket

Competitive analysis

AMC, Cinemark, and Atom are among the competitors for subscription services.

Each competitor offered an on-boarding workflow with multiple screens.

Our goal was to guide as needed throughout the workflow, eliminating several introductory screens all at once.

Consider cognitive load; if guides present themselves when the task is at hand, it becomes useful to the user than at the beginning of the journey.

Loyalty and Subscription Programs: Regal, AMC, Cinemark

Competitive analysis

Mapping compeitiors emotions

AMC’s workflow is smooth but seems like a lot of steps. It’s smooth because the steps drop-down; therefore, we feel like there are fewer steps. But the information visually feels heavy in weight.

After having reviewed the workflow and capturing the current state, comments noted to the side dictate emotions towards the experience.

Subscription Workflow: AMC

Mapping emotions

Conditional workflows

Before requirements are flushed out, a rough workflow and conditional behaviors are mapped out based on assumption.

The workflow becomes a guide we use to understand better the users’ journey—each card below lists out content on each screen and actions the user can take.

Workflow – Sign Up or Sign In as a Regal Crown Club Member

User workflow

Designing for different scenarios

Capturing different scenarios help with edge cases, system and app errors, and additional requirements missed.

In the scenario below, the user has already signed up for unlimited and logged in. They complete the following tasks:

  • login
  • book a ticket
  • redeem a ticket

Once scenarios are defined, design can work on screens. It helps designers to provide a context of use, patterns, and conditional behaviors.

Scenario: User is Unlimited member, but not logged in.

Scenario #2 – Workflow

Task flow - booking but not logged in

Usability Sessions

We scheduled two sets of testing. Initially we proposed three, but leadership shortened the timeline due to MVP deadlines.

Each day consisted of two participants, one in the morning and one after lunch—gift cards given to candidates showed appreciation for participating.

“continuous iterations with in-between testing sessions helped quickly evolve the design”

Each candidate is a Regal Crown Club Member (RCC). Data pulled from a Loyalty member list. The ages spanned from 18-60 years old.

  • motivation – saving money because they loved to watch movies
  • needs – transparency in how much money they are spending
  • desires – to share the movie experience with their friends and family
  • frustrations – input of information

Recruiting and testing

Calling and recruiting RCC members; criteria varied by way users experience booking from:

  • box office
  • website
  • app

Usability Testing with an IPEVO Camera

Testing session

One thing we heard over and over again during testing was transparency. That was the most important takeaway.

Users want to know cost upfront first before they go to the trouble of signing up for something.

Letting the users know the pricing and terms early, helped motivate them to complete the signup process.


Design Intent

Setting expectations and guiding users for a successful registration is our goal.

Below are a few onboarding screens, which link off to further information early on in the workflow.

Walking the user through the process using iterative steps is critical. Because it is a lot of information to enter, the incremental steps allow for chunking of information so the user will not feel overwhelmed.

“keep the user engaged and motivated to by having short sequential tasks”

Lo-fi wireframes
Workflow - Sign up

Ethnography Research

Following the launch, we went to the theatre to watch moviegoers use the app. Unlimited subscribers can enter the show using the QR code on the back of their digital card.

Observing users was terrific; the use of the unlimited card for discounts on concessions appeared seamless.

By scanning the card, the purchase is faster, promotes special perks, makes the user feel good, and adds personalization to the experience.

Digital card

Theatre – Field Research

Field research

Takeaway

In the beginning, requirements were long for MVP, but it could have broken down to allow for a faster design process.

The biggest takeaways are the UX findings during the usability sessions. Transparency was the number one thing we heard. Transparency builds trust, which encourages users to continue the signup process.