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
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
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. 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!"
Note taking from the interview sessions allowed me to develop an affinity map to guide me in my design process
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.
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.
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.
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.
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.
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.
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.
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
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.
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.
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.
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
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
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.
- 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.
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.
Provided access to users who are visually impaired through adding alt text to images for screen readers.
The Munch & Watch app has slow animations for transitions 200ms - 350ms between screens while being mindful of accessibility issues.
