Munch & Watch

A B2C mobile interface concept to  redesign the current app of PVG cinemas, increase user engagement, sell movie tickets along with their snacks through their mobile app

Project overview

The problem:

Users have to stand in line for a long time to order snacks. Users are frustrated as they are missing the movie to pick up snacks.

The goal:

Design an app that will allow users to book a movie ticket and order snacks in fast, efficient & easy way while saving money.

My role:

I am the lead UX designer for redesigning the Munch & Watch app for PVG Cinemas.

Responsibilities:

My responsibilities included conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, and iterating on designs.

Understanding the user

  • Talking with moviegoers
  • Following the movie map
  • User pain points
  • User persona
  • Problem statement 
  • User journey map

Talking with Moviegoers

I asked questions to 6 moviegoers. 20-30 minute session revealed a lot of information that helped guide my design process.

These were the questions that gave me direction regarding the user flow and the features to include in the redesign.

  1. Why do you like or dislike going to movie theatres?
  2. Why do you like or dislike ordering snacks while you are at a movie theatre?
  3. How often do you watch movies in a theatre?
  4. How often do you order snacks while watching a lovie in a theatre? If you do, what is your motivation in doing so?
  5. 5. What challenges do you face in the ordering process? how does this make you feel?

  6. Is there a way in which you feel these challenges could be resolved?

"I don't want to feel rushed just because I want a snack during my movie."

"I love it when I don't have to miss my movie to get my snacks!"

"My movie on the big screen, good audio & popcorn - that's all I need to make an evening good!"

"I hate disturbing other movie watchers to get my snacks."

"Oh my!!! The movie snacks are too expensive! But my kids love the popcorn!"

Following the Movie Map

Note taking from the interview sessions allowed me to develop an affinity map to guide me in my design process

Turn on the insight lights... (User Research Summary)

I conducted interviews for my user research and was able to take notes from individuals about their user journeys & their frustrations. It gave me a new perspective on user challenges in the real world and it allowed me to focus on their pain points. I was pleasantly surprised by how my interviews were able to help me create an empathy map for my users and gave me a clear picture of what the user thinks, does, and feels.

This user group confirmed initial assumptions and gave new insights regarding user pain points like expensive snacks, anxiety about missing out on the movie, avoiding long wait line to procure the snacks and not wanting to disturb other audience members while getting their snacks.

User Pain Points

Created by potrace 1.15, written by Peter Selinger 2001-2017

Long wait lines

Users wanted to avoid long wait lines to get snacks. This inspired me to include a a pick up an go feature in my app where the user can pay ahead through the app and will be able to pick up the snacks upon arrival to the theater.

Created by potrace 1.15, written by Peter Selinger 2001-2017

Missing the movie

I observed that my users did not want to miss out on the movie while in the theatre. So I was able to come up with a feature where snacks will be delivered to the user’s seat while they are watching the movie.

Created by potrace 1.15, written by Peter Selinger 2001-2017

Different munchies

I noticed that some users liked their snacks in the beginning of the movie but some users wanted their snacks in the middle of the movie. This was resolved by providing the user ability to choose a time slot for snacks to be delivered to their seat.

Created by potrace 1.15, written by Peter Selinger 2001-2017

Expensive snacks

The users in my research also did not want to pay too much for the snack. This inspired me to include a reward and coupon feature in my app where frequent users could use their membership benefits and get rewards for purchases.

User Pool

The users in my user group had to be Moviegoers – an individual who goes to the movies, especially regularly or at least once a week. Single or with a family and preferably lives locally. After close assessment of my user pool, I came up with persona that most closely resembles the majority of my app users.

User Persona

Note taking from the interview sessions allowed me to develop an affinity map to guide me in my design process

Problem Statement

Suhan is a busy software manager with a family who needs a faster and easy way to order snacks in the theatre since his family is always late & he doesn’t want to miss his movie.

User journey map

I was able to define the user journey by walking in Suhan’s shoes during each action. This gave me an insight about his feelings and the improvement opportunities that I could implement in my app to improve his user experience

Starting the design

  • Paper wireframes
  • Digital wireframes
  • Low-fidelity prototype
  • Usability studies

Paper wireframes

I took the time to draft multiple versions of each screen to determine which draft iterations will make it to the digital wireframes & will be best suited to address the pain points of the users. For the home screen, I prioritized a quick and easy ordering process to help users choose either movies or snacks and complete the checkout process. 

I placed red stars besides the elements that addressed the user pain points most effectively and included those elements in my final draft.

Digital wireframes

01.

As the initial design phase continued, all designs were created & based on the research & findings from the user interviews.

02.

My goal was to create an app that was easy to navigate while also addressing accessibility to make sure the app would work with assistive technologies.

Low-fidelity prototype

The low-fidelity prototype connected the primary user flow of choosing a movie, snack option and the checkout process.

This way the prototype could be used in a usability study with users.

Usability study: findings

After conducting a usability study with sample size of 6 individuals from my user pool, I observed the following findings.

Round 1 findings

  1. Users want an indication that snack has been added to cart.
  2. Users want an indication that snack has been added to cart.
  3. Users want an indication that snack has been added to cart.

Round 2 findings

  1. After completing purchase, users want to know the status of the order prior to pick up.
  2. After completing purchase, users want to know the status of the order prior to pick up.
  3. Users would like a reminder prior to
    movie time or pick up order.

Refining the design

  • Mockups
  • High-fidelity prototype
  • Accessibility

Mockups

01.

In the earlier design, the home screen had 4 clickable elements, this was simplified after the usability study and 2 separate screens with multiple sign-in options and a separate flow for each, was created to enhance and personalize the user experience.

02.

Early designs had a pop-up after completion of the order. After usability study, this was changed to a full screen with complete details of the order to prevent accidental closing of the pop-up and to reassure user of the completion of the core tasks.

03.

Early designs had a pop-up for delivery option prior to choosing the snack option. After second usability study, the process was simplified to allow users to choose the delivery option on the same screen to make the process faster and more efficient.

Final Mockups

High-fidelity prototype

The final high-fidelity prototype presented cleaner user flows for browsing movies & snacks prior to completing checkout. It also met user needs for pickup at snack kiosk, express pickup & delivery to seat option. Users were also able to customize their snacks according to the dietary preferences.

To prepare for developer handoff

  • I maintained effective communication and ongoing collaboration, understanding that a less thorough design handoff can keep a designer very busy throughout the development phase, unnecessarily. 
  • I made sure I named my files and had only the necessary screens to help me write simpler filenames.
  • I put all my mockups together to help understand how the user journey pans out.
  • I discussed with my developer, the fidelity and planned accordingly.
  • I specified the type of copy, the situation and context of the copy and the actual message.
  • I refined my visual vocabulary, created a sharable style guid and properly organized layers and groups in my Figma file.
  • I communicated with the developer, the Grid System that I used in my designs.
  • I maintained a checklist of all the cases and features that need to be designed, created and managed by me.

Accessibility considerations

Created by potrace 1.15, written by Peter Selinger 2001-2017

Included WCAG 2.0 level AA contrast ratio of 5.31:1 for the headlines & 6.58:1 for the body text. This allows individuals with limited visual abilities to view the content of the Munch & Watch app with less difficulty.

Created by potrace 1.15, written by Peter Selinger 2001-2017

Provided access to users who are visually impaired through adding alt text to images for screen readers.

Created by potrace 1.15, written by Peter Selinger 2001-2017

The Munch & Watch app has slow animations for transitions 200ms - 350ms between screens while being mindful of accessibility issues.

Takeaways

Impact

The Munch & Watch app takes a user centric approach for booking movie tickets, saving money & having a clear user flow. 87% of users in the usability study stated that the app is easy to use and would use it frequently. SUS found that 100% of the users stated that most people would learn to use the app quickly & is easy to navigate.

What I learned

When designing an app, you have to be flexible and adapt your design as you progress through the various design stages. Your usability studies will influence your iterations and will make your app simple, better, more usable, more efficient & improve the user experience. Also, the most important thing I learned is good design is little design & you won’t notice it till it’s done wrong.

Next steps

1. Conduct more research to see if there are more areas that could be targeted to simplify the user experience.

2. Conduct another round of usability study to confirm if all user pain points have been addressed.

3. Share the high fidelity prototype in the design community to get peer review to improve on the user experience within the app.