MovieGo
Case Study: A Mobile Ticketing App
MovieGo is a 3rd party ticket aggregator that enables people to find showtimes and purchase tickets ahead of time.
Heading 1
Project Overview
MovieGo is a national aggregator of movie theaters and showtimes. MovieGo strives to make it easy for its users to quickly find showtimes near them, purchase tickets and easily access tickets after point of purchase.
Project duration - Fall 2021
The problem - Movie-goers quickly become impatient when trying to find showtimes near their current location and become frustrated when pressured to create an account before establishing trust with the product.
The goal - Design an app that enables users to find showtimes easily and purchase a ticket and then create an account on their own terms after establishing a sense of trust with the product.
My role - UX Researcher and UI/UX Designer
My responsibilities - Conducting interviews, competitive analysis, ideation, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility and iterating on designs.
Tools - Figma, Miro, JamBoards, Google Suite, pencil and paper
Scope and Constraints - For this iteration, the main function of the app is finding showtimes and purchasing tickets. Additional features like preordering refreshments, rewards, reviews and referrals were not in scope for this iteration.
Process
1. Empathizing with Users
I started by interviewing users to better understand their movie going experience. I wanted to learn more about what’s enjoyable about going to the movies and dig deeper into the frustrations to set the stage for future design decisions.
i. User Research Interviews
-
6 people between the ages of 25 - 65
-
Participants lived throughout the continental United States
-
4 participants were female-identifying, 2 were male-identifying
-
1 participant is deaf
I heard consistent feedback that going to the movie theater is viewed as a time to relax and “escape reality.” Most people value the immersive experience of being at the theaters, where there’s limited distractions (phones are frowned upon, the lighting is dim and there’s surround sound) and a sense of relief and relaxation upon getting to their seat.
There’s also a sense of relief users expressed once they were finally in their seats. I heard that there’s a number of environmental and technical stressors that impact movie-going. I was hearing enough consistent feedback to consolidate my findings into a 2 user personas: Sam and Donna.
Personas
ii: Journey Mapping
After developing these personas, I wanted to break down the user journey: from installing the app to sitting in their seat. I identified the main actions and tasks that the users would take and thought through the different feelings associated with the task and how that could translate into improvements made through my designs.
Journey Mapping Insights
The pain points were starting to become more clear to me, especially as I started to think through the specific feelings associated with the task at hand. I realized that certain frustrations would be outside of anyone's control (theater layouts, noisy neighbors, available movies) and that trying to solve for these frustrations exactly as the users asked wouldn't scale.
I became more and more fascinated with the idea of complimenting the physical aspect of movie-going with my designs. I knew that navigation within the app would be crucial to its success, but what about navigation within the theater?
iii: Competitive Audit
At this point, I needed to learn more about my competitors to identify what they're doing well and what may be frustrating given the context of my personas and their user journey.
I made a list of direct and indirect competitors and dove deep into the UI and UX of their web and mobile experiences. (My experience as a QA Engineer was helpful during this part of the process as I tried to "break" user flows and picked up on small details that could be improved).
This exercise was helpful in starting to identify useful patterns in the overall user flow, and experiencing the same frustrations I heard during user interviews.
I evaluated each competitor experience based off of a set of fixed criteria such as: competitor type (direct or indirection), first impressions, value propositions, interactions, visual design and brand tone. I found it interesting that some competitors focus on the quality of the films they offer, while others focus on the quality of the theater experience. Both of these value props were important to my personas, and I knew that designing for both pillars would be crucial for my project.
The biggest gaps I noticed during my competitive audit were that payment options are confusing and it was not always clear what was needed from me to continue.
Fandango includes a lot of important information on the checkout page, but the cognitive load of distilling the information and determining the next step is pretty high. This was something I wanted to account for in my designs.
.jpg)
.jpg)
AMC allows multiple entry points to finding a showtime by selecting a movie from the home page or searching for a theater. However, when I realized my default location was no longer correct, I had trouble figuring out where I could update it.
2. Define the Problem
The research phase revealed pain points across the different phases of going to the movies. I found it interesting to find that their frustrations broke down further into items that users can control (where they pick their seat, their showtime selection) and items that are outside of their control (loud neighbors, forced account creation).
Problem Statement:
Users need a quick and easy way to find a variety of showtimes, view available seats and checkout easily because they are frustrated by tedious tasks and skeptical of creating accounts without first establishing trust in the product.
3. Ideation
After completing my research and defining pain points and problems, I was ready to start the ideation process.
To start, I explored different “How might we” statements to push the limits of what might be realistic by challenging status quos, questioning assumptions, making the task as difficult as possible and even using unexpected resources. This proved to be helpful in letting ideas flow freely on how to address the pain points I had previously defined.
After warming up with “How Might We” I completed a round of Crazy 8s. Setting a strict timebox of 8 minutes to sketch 8 ideas, I came up with some conventional and not so conventional solutions to the defined pain points.
I quickly realized that some of my ideas from these exercises challenged the resources and scope of my project prompt (example: “how might we engineer theater seats to light up at the touch of a button to assist users in finding their seats?”). However, these exercises started to expose solutions to the defined pain points and focus on the main user flows and supplemental feature enhancements, like helping users finding their seats once inside the theater.
Before moving forward, I wanted to make sure that I knew which screens I’d need to design and also started to think through app navigation. I mapped out the main user flow using Miro to help me visualize the happy path.
.jpg)
4a. Prototype: Wireframes
After prioritizing the main screens I would need, I sketched out paper wireframes as a quick and inexpensive way to explore multiple ideas. I started each screen by listing out the essential core elements I knew I would need (ex: navigation bar, text fields, images).
Next, I started to experiment with visual hierarchy as a way to help guide users through the process. For example, on the home screen I experimented with different sizes of movie thumbnails and interactions to make a selection.
At this point in the process, I started to explore improvements which would address some of the common pain points that I found during research. Thinking through the showtime selection process took some time, I knew that the showtime results would be constrained based off of the user's location, desired time and accessibility considerations. I knew it would be crucial to establish clear flows to choose showtimes.
I also used this time time start learning more about accessible movie going and the different experiences that people with hearing and vision loss have when going to the movie theaters so I could account for it in my designs.
I sketched out about 5 variations per screen and starred elements that I liked from each sketch. At the end, I combined the starred elements into single screens that I would continue to build off of in Figma.
Digital Wireframes
Knowing that I wanted to get user feedback early in the design process, I started to move my wireframes into Figma, which would eventually become a low-fidelity prototype for user testing.
Link to low fidelity prototype
My wireframes represented the main user flow of finding a showtime and purchasing a ticket through the app. I also designed the first iteration of a new feature called "Find my seat" to guide users to their seat after checking in as a way to compliment the physical experience of going to the theaters within a mobile app.
5a. Test: User Testing
To get the most valuable feedback, I knew that I would need to get my early designs in front of people who go to the movies at least once a month, use smartphones and were willing to participate. With that in mind, I posted a recruiting survey across my personal and professional networks to recruit participants.
The goal of the study was to determine how easy it to find a showtime and purchase a movie ticket. To better quantify my research, I focused on KPIs to help inform which areas of my designs needed more refinement. The main KPIs I focused on were:
-
Time on Task
-
Conversion Rate
-
Drop off Rates
-
Qualitative feedback on the Find My Seat feature
User Testing Results
The results were promising, but there was still a lot of room for improvement.
The good news 🎉
-
0% abandonment rate: 5 out of 5 users were able to purchase a ticket
-
Find my Seat validation: 4 out of 5 users mentioned the feature would be helpful in finding their seat.
The improvement opportunities 🥉
I still wanted to use my KPIs to inform my design decisions, specifically time on task. Each user spent a lot of time on each screen (upwards of a minute) and they were hesitant to take any action without confirming if it was correct.
Part of the hesitation may have been tied to the low fidelity nature of the screens. However, the time on task, especially in the filtering flow, led me to believe that I needed to iterate on that part of the UX.
Users also noted that additional landmarks within the theater would be helpful (aisles, entrances and exits) when choosing and finding their seat. I accounted for this in future iterations while also realizing that there may be technical limitations and engineering pushback during development, since accurately identifying some of these landmarks in theaters with varying layouts may lead to technical complexities that could result in scope creep.
-
"Sometimes when I don't see it, I feel like I'm not doing it [adding accessibility filtering to their search] right."
-
"It didn't occur to me until later to check that dropdown filter thing."
-
"Most of the time I don't know how to find my seat other than pulling out my paper ticket again."
Insights
💡 Insight: Users need more explicit directions and feedback for guidance. Based on the theme that most users were unsure of how to filter for available showtimes, I knew I would need to spend some more time refining this part of the design.
💡 Insight: Accessible movie going varies based off of location. I also used this time to do a bit more discovery on accessible movie going. I learned that there are some experiences that are required by law at each theater (several assistive devices) and newer technologies and experiences that are optional and more common in higher-populated areas (e.g. open captioning, subtitle glasses). I also learned that these experiences are managed at the theater level, which meant that the available locations would be dependent on advanced filtering options.
Based off of these learnings, I made some changes to the showtime filtering process that would end up being one of many different iterations for this part of the user flow.
Iterate 🔁
Before
To show the most relevant showtimes to people, we would need to collect their location and the date that they would like to see the movie up front.
I also wanted to learn more about accessible movie going and find a way to use it as a constraint when searching for showtimes.
After
The next iteration moved the date filtering to the selected theater's showtime selection page, which defaulted to today.
I also adjusted the size and shape of the filtering controls to make them easier to see. I replaced the advanced filtering icon with a "How?" button, which gives users the option to constrain their search by theater experiences.
4b. Prototype: High-Fidelity Mockups
Now that I had made updates based off of user feedback, I was in a better position to start to think through the visual design that would eventually transform my wireframes into high-fidelity mockups.
Color
Initial research revealed that most people go to the theater to relax and escape every day life. With that in mind, I chose to use blue as my primary brand color since it is symbolizes peace and calm. I also chose to use a background color that mimics the night time feel of being inside a theater.
Typography
I wanted to maintain a readability, so I opted for clean sans serif fonts for text body and CTA buttons. For the company logo, I chose a more playful and bold serif font.
Iconography
Icons came from Google Fonts free icon library.
Buttons
I started off by creating my own buttons, which was a helpful exercise in becoming more comfortable in Figma. However, as I continued to learn about visual design and design libraries, I referenced Material UI's component library for FABs, buttons and text fields for added consistency.
Accessibility Considerations
Color contrast between foreground text and the background for buttons is 7.68:1 and 12.31:1 between foreground text and the main screen background.
Sticker Sheet
Before
After
I continued to iterate on the showtime filtering options by making the theater experience filter first, since it's a constraint set at the theater level. I also abbreviated date selection to be 2 weeks out since showtimes rotate quickly.
During research, I found that most people value routine with their movie-going experience and prefer to visit the same theater and sit in the same areas. I wanted to give users an easy way to "favorite" their most loved theaters for easy access to future showtimes by way of a "favorites" icon at the bottom navigation (I used the same bottom navigation bar component during each iteration of my final mocks and it was eventually removed, which is why it's not showing in the images above. More to come on that later, though!)
I also continued to refine the "guest" user experience so that users can build trust with the product before committing to creating an account.
5b. Test: User Testing
I asked 5 people to complete the same set of tasks with my high fidelity prototype. The goal was to determine how easy it was for users to find a showtime, select a set and provide payment. I also wanted to leave room for additional qualitative feedback as it came up.
The feedback was promising and exposed insights that unblocked some stale ideas.
💡 Insight: Users feel like they're clicking too much
Users were surprised that they didn't see showtimes upon selecting a movie from the home screen or clicking the "Find Showtimes" FAB. At first, I thought a simple CTA copy update might better set expectations, but then realized that we can leverage user's locations and native iOS or Android functionality to predetermine their location, thus saving a step.
💡 Insight: Users don't find the "Favorite" feature helpful
Most users were confused by the "favorite" feature and were not sure what favoriting a theater would mean for them. While helper text or quick popups may help guide users along with this feature, I wanted to keep the app simple for v1. I also wanted to continue to think through using location to reduce the number of clicks. (Remember the favorite icon I mentioned earlier? This was the beginning of its end.)
💡 Insight: Users expect multiple opportunities for account creation
Another interesting finding was that users wanted to see more touch points for account creation. At this point in time, users could only create an account upon app launch or right before checkout. Both touch points may cause friction, so I started to think through how to invite users to create an account after conversion.
💡 Insight: Users expect explicit instructions
I realized I had made some incorrect assumptions about users on the Ticket Confirmation Screen. Users weren't sure what the purpose of the QR code was. I knew that I would need to update the copy on this screen and experiment with the layout to make it more clear to the user the purpose of that screen.
Final Iteration
I went back to Figma to update my designs based off of the insights above and made some key changes across the main user flow.
Showtime selection filtering
I updated the home screen to ask the user if they'd like to allow location services to help find showtimes nearby. I also stripped the 3 step process of filtering for showtimes. Users were confused by this and the logic needed reworking. Instead, I added an optional "Advanced" filtering option to encompass Accessible Viewing needs and Theater Experiences.
By updating the default settings to current location and showtime dates to "today" I was able to display showtimes with fewer clicks, while also giving users the option to constrain or expand the results to fit their needs.
I also experimented with the design principle of variety on the home screen and used shorter and wider carousel thumbnails to display available movies. This created more room on the home screen to show multiple theaters based off of the user's current location.
Seat Selection Flow
I replaced the ticket type popover with a modal to select quantity and ticket type. Initially I thought that the modal could save users from viewing another screen and reduce friction, but usability studies debunked that assumption. Users were unsure why they were being asked to provide that information upon choosing a seat and it seemed to interrupt the flow. Now, users set the number and types of tickets they'd like to purchase before picking a seat.
I also removed the alternative showtime selection bar from my final designs. Users were skeptical of its value given that they can easily navigate backwards to select a different time. I'd still like to return to this part of the UX for a v2 and explore selecting different dates as well as different times as users mentioned that their showtime selection can be influenced by the capacity of the theater.
"Continue as Guest" flow
I added another touch point to create an account by replacing the "Find my seat" feature with a CTA to create an account. While the "Find my seat" feature's usefulness was validated during user testing, I updated it to be a feature that's activated upon account creation. Account holders will also be able to store and access their purchased tickets within the app via the Tickets icon on the bottom navigation bar and their payment information would be securely saved for a quicker checkout experience.
I cleaned up the UI of the credit card entry modal by making it a page instead of a modal. This resulted in a cleaner look and less room for error when implementing across devices of varying screen sizes. I also updated the ticket confirmation screen with more explicit instructions to the user for what they should do with it.
I updated the "Find my seat" feature to be a sheet rather than it's own screen. This update seemed to formalize the "end" of the main user flow of buying a ticket and simplified navigation by suggesting that this feature is an optional.
Link to high fidelity prototype
Next Steps
Before app launch, I would establish some success metrics with the rest of my product team. For this app I want to collect data on the following events:
📊 Conversion rate: This will help inform the bottom line of the business and will be a helpful benchmark to reference as the company scales.
📊 Account creation conversion rate: How many "guest users" end up creating an account after purchase out of the total number of guest users who bought a ticket?
📊 Repeat guest users: Are the same people checking out as guests multiple times? This will inform our team on user acquisition and retention.
📊 Abandonment: By tracking which screens people are abandoning the app, we will have better insights into potential points of friction to help inform decisions on any additional discovery or product changes that may need to happen.
📊 More qualitative research: The data points above will help inform when and which parts of the app we should conduct more usability testing on. If we're finding that guest users aren't creating accounts after purchasing a ticket then we can do more research to find insights as to why users choose not to create an account. Additionally, as the user base and business scales, there will undoubtedly be more use cases that we can address through design.
🔍 I'd also like to do additional discovery work on a more effective way to incorporate the concept of "favorite theaters." I found it very interesting that users appear to be creatures of habit in some circumstances and would like to explore that more as a feature in a future iteration when the appropriate amount of time can be dedicated to further defining that feature.
Thanks for reading! If you'd like to get in touch, please send me an email at shaw.leah.d@gmail.com
.png)
.png)
.png)
.png)