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
- 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. 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?
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
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.
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
- 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.
As the initial design phase continued, all designs were created & based on the research & findings from the user interviews.
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.
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.
- High-fidelity prototype
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.
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.
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.
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.