Immersive Cinemas
Maneesha Krishnan
The product:
The Immersive Cinemas website finds movies and theaters nearby. It allows users to watch movie trailers and read details about the film to help them decide which to watch, buy tickets, and order food and drinks. The typical user is between 18 and 65 years old, and most users are between 18 and 34. Immersive Cinemas' goal is to make booking movie tickets and ordering food fast and easy for all types of users.
My role:
This individual project allowed me to plan and direct each step of the design thinking process as a UX strategic design student with mobile and web UI design experience.
The Problem:
While convenient in some ways, movie theater websites often have cluttered designs, confusing layouts, and a lack of features. Some websites need options like food ordering, making the overall experience less than ideal. Fewer features on the website will increase the movie theater crowd for ticket and food purchases.
Project Duration:
2 Months
Responsibilities:
Conduct interviews, defining the problem and providing insight to inform the ideation phase, defining personas, user journeys, empathy maps, and user flow, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.
The Goal:
Design a user-friendly movie theater website by providing straightforward navigation, helping the user make movie-choosing decisions, and offering a fast checkout process. This website will decrease the crowd at the movie theater for getting tickets, ordering food, and checking in for showtime.
Understanding the User
●User research
●Personas
●Problem statements
●User journey maps
User research
I chose primary, qualitative, and interview methods to do the research. I conducted user interviews, which I then turned into empathy maps to understand the target user and their needs better. I discovered that many users need help choosing a movie to watch and like food ordering features. I assumed I would get only the answers to my questions from the interview. However, I got many suggestions for improving my project design. These interviews helped me think of many ways to improve the design. Many movie theater websites are overwhelming and confusing, frustrating many target users. This caused them to avoid the websites, increasing the crowd in the theater to get movie tickets and food.
Pain Points
-
1. Less features
Tickets and snacks may not be available immediately, especially if you go with a larger group. The websites does not offer a food order option.
-
2. Theater Crowd
Busy people rush to the theater just before the movie starts; they must wait in queue to get tickets and don’t have much time to order snacks.
-
3. Decision-making
People want to select movies by watching trailers and analyzing the reviews.
-
4. Information
Users like to know the details of their food before ordering and sometimes want to cancel their plans; they like to see the cancellation information.
Persona: Josh
34
Master of Computer Engineer
Illinois
Wife and two kids
Senior research programmer
Problem statement:
Josh is a senior research programmer who needs to find an easy way to order many movie tickets and snacks and choose many seats. He loves to watch movies with friends and family in a large group.
“I always value people’s time. I don’t like to make them wait, and I don’t like to waste my time.”
Goals
I don’t like others to think we’re making them wait in a queue for a long time.
I like to go to movies with my friends in a large group, and I enjoy watching movies with snacks.
Like to take some time to order tickets and snacks to choose perfect the options.
I always want to follow the calories that I am having.
I like to view movie reviews and trailers before watching the movie.
Frustrations
I like to go with friends and family as a large group, and getting tickets and snacks will take longer.
I couldn’t get enough time to choose the perfect snack.
I need to follow the calories for the diet, and I likes to order customized quantity of snack.
Sometimes, it is difficult to cancel the plan before 15 minutes.
Josh is a senior research programmer. He loves to go to movies with family and their friends as a large group. Since they are going with a large group, they always take more time to order movie tickets and snacks. He does not like to make the other people wait so long because of his delay in ordering. He tried to do the ordering fast, but he couldn’t order the perfect snacks due to the hurry. He really wished he could do the ordering part slowly without making others wait. He always looks for the calories that he takes. He wishes he could plan everything early, and if he can’t, he wants to cancel the plan before 30 minutes.
Persona: Kevin
46
Computer engineer
Illinois
Project manager
Problem statement:
Kevin is a Busy computer engineer and family man who needs to order movie tickets and snacks without waiting in line for so long because he has a tight schedule, even during the weekends, and wants to save time.
Goals
I have a busy schedule even on the weekends, and I would be happy to save any time.
I love to spend time with my family.
I enjoy watching movies with my family, and we like to have popcorn while watching movies.
“I love to spend time with my family and we’re all busy together”
Frustrations
Sometimes, with a busy schedule, it is difficult to be at the movie theater on time, and we must hurry to get tickets and snacks so we do not miss the beginning of the movie.
I couldn’t get enough time to order snacks.
I do not like to wait in the queue since I have leg pain.
Kevin is a computer engineer and works as a project manager. He is a busy man. Even during the weekends, he needs to take his kids to games and extra classes and do shopping. So, every day is a busy day. He loves to spend time with his family, and they love to watch movies together and love movie time snacks. Sometimes, he hates that he can’t get enough time to order popcorn before the movie starts. Since he is very busy, he likes to do anything to save time, including the time they wait in the queue to order tickets and snacks. He also has leg pain and couldn't stand in a line for long.
User Journey Map
User Story
As a person who loves to watch movies with friends and family in a large group, I want to book movie tickets and order various snacks without waiting in the queue to choose the tickets and snacks for all my friends without rushing.
Persona: Josh
Goal: Easily order movie tickets and snacks for large groups of people
UX Design Storyboard: Big picture
Scenario: A website to help users book movie tickets, seats, and online check-in and order snacks and drinks.
Sitemap
Users' primary pain points were fewer features, so I used that knowledge to create a sitemap.
I aimed to make strategic information architecture decisions to create easy app navigation and meet user needs. I want to design an app that is simple, easy to use, and has all the features.
Paper wireframes
My process of creating paper wireframes for each screen in my book was guided by a deep understanding of the users' pain points and needs. The homepage wireframe is focused on users' browsing experience and easy answers to the user's needs.
User Story
As a very busy person who loves to watch movies with family and mostly reaches the theater just before the movie starts, I want to book movie tickets and order snacks easily using an app so that I don’t want to get worse my leg pain by waiting in the queue and I can save the ordering time.
Persona: Kevin
Goal: Get the movie tickets and snacks easily without waiting in the queue and choose the perfect seats
If/Then Statement
If Josh uses the movie theater website to get movie tickets, choose seats, order snacks, and do online check-in, then he can easily make a large order, choose the variety of snacks for everyone, select the perfect seats for his friends, and make the showtime check-in without waiting in line.
If Kevin uses the movie theater website to book movie tickets and snacks, he doesn’t want to wait in line, hurt his injured leg, or waste time when he has a busy schedule.
Competitors Audit
Starting the Design
●Paper wireframes
●Digital wireframes
●Low-fidelity prototype
●Usability studies
Digital Wireframes
I transferred all the paper wireframes into digital wireframes. Creating digital wireframes helped me understand how to arrange the elements to solve the users' pain points.
List of the essential category movies on the main page. Users can easily slide and see all the movies in that category.
Easy access to the important pages through the icons.
Low-Fidelity Prototype
I created the low-fidelity prototype by adding the connections and making the user flow of choosing a movie, choosing seats, ordering food and drinks, adding payment details, and getting a barcode for easy check-in. I did user research to get feedback from others and iterated the design to solve the pain points.
Usability Study
●Study Details
●Themes
●Insights & Recommendations
Usability Study
-
Research Questions
How long does it take for a user to book movie tickets, choose seats, and order snacks?
What can we learn from the user flow or the steps users take to choose movies, book tickets, and order snacks?
Does the app help users easily book tickets and order snacks and save waiting time at the theater?
-
Participants
5 Participants
3 Female 2 Male (Age between 21 to 60)
-
Methodology
20 minutes
United States, Remote
Unmoderated usability study
Users were asked to perform tasks in a low-fidelity prototype
Recommendations
• Add a page with all the show times so the user can choose the show time and see the barcode by adding text or an image.
• Adjust the font size for the taskbar writing and make sure it is visible to everyone.
• Add the snack pickup times instead of the default time just before the movie starts. You can add 5 minutes before the movie starts, 10 minutes before the movie starts, and so on.
• Add text to the food timer to understand why that timer is.
• Add a feature to order food while watching the movie with the delivery option or “ready to pick” text for quick pick up.
• Add a feature to rearrange the seat number if the user likes to sit in a different seat.
Refining the Design Study
●Mockups
●High-fidelity prototype
●Accessibility
Mockups
I created the mockups after considering all the insights from the user research. I chose the colors, created the buttons and components, and created the design sheet.
High-fidelity Prototype
https://www.figma.com/proto/icr91jnyg49BEZ18EXEojo/Movie-Theater-App?node-id=2889-2085&t=TEYDn7quqGzrrtok-1&scaling=scale-down&page-id=2889%3A1671&starting-point-node-id=2889%3A2085
Mockups: Screen size variations
Based on the wireframes, I created mockups of different screen sizes. Many users use the websites on different screens, especially those who do not want to download the app.
Mobile
Ipad
MacBook
Accessibility Considerations
-
I used different-sized text for the headings for visual hierarchy and labeled the headings depending on the size.
-
I ensure that all elements are correctly labeled to ensure the interaction with the interface is effective.
-
I used landmarks to provide clear and structured navigation points that can help the accessibility and usability of the website.
Going Forward
●Takeaways
●Next steps
Takeaways
Impact:
Conducting the research study deepened my understanding of how user experience can influence a user’s emotions and choices. My target users shared that the design user flow was straightforward, details helped with decision-making, and images were clear and engaging.
What I learned:
I learned that I must consider giving all users the same experience at each step of the UX design process and always consider the users' needs and pain points when designing.
Next steps
-
Conduct follow-up usability testing on the new website.
-
Ideate new features to improve the user’s experience.
-
Identify any additional areas that need to be improved in accessibility.
Credits
Maneesha Krishnan
UX Designer