Problem
The current moviegoing experience is fraught with friction, including difficulty finding convenient showtimes, discovering new theaters, and ensuring optimal seating availability. These pain points deter potential customers, negatively impacting box office revenue, and failing to restore pre-pandemic levels of engagement in the cinematic experience.
Business Goal
Design a solution that reduces user frustration in the moviegoing process. thus increasing theater attendance.
Solution
Develop a comprehensive, user-friendly movie ticketing app that combines intuitive planning tools, integrated maps for localized convenience, and complete showtime listings across all theater chains in a single, streamlined platform.
Testing & Optimization
To validate and optimize MovieMate's design, test users were given the task of organizing a movie outing for a large group of friends, each with their own preferences.
Throughout the development of MovieMate, gathered feedback on wireframes, low-fidelity prototypes, and high-fidelity prototypes through multiple iterative rounds.
Conducted unmoderated usability testing to continuously identify user pain points and validate the app's features.
All test users expressed that they have had trouble finding showtimes before.
All test users expressed that they usually go to a handful of common theaters.
All test users have faced the issue of packed seating for an anticipated movie.
Using personas helps in focusing on a specific target audience. The fictional personas below were created to give a solid general feeling about the lives of MovieMate’s potential users, and to see how MovieMate can help alleviate their problems.
Mapping out the user flow is a crucial part in the design process. The user flow refines the boundaries of the product, stating what is possible and what is currently not. Any adjustments / added features to the product would have to fit into this user flow. Some information I specifically gained from the user flow is: what screens I needed, potential pain points, and number of actions possible on any given screen. With the user flow defined, I can begin wireframing.
To create a good layout of the app, I utilized Crazy Eights to get a general sense of where the buttons, text, icons, and images belong. I also asked my interviewees which aspect of each wireframe they liked the most, and tried to bring it forward into further designs to create a unique layout.
Key takeaways were:
Interviewees reacted well to the Gmail-esque filter button being located constantly in the bottom right corner.
Interviewees specifically liked the implementation of a button to show a map of the theater’s area.
Interviewees preferred a simple menu bar at the top of the screen rather than at the bottom.
Creating a style guide was crucial in establishing a cohesive visual identity to MovieMate. A cohesive visual identity is important to a product because it establishes brand recognition, instills trust and credibility to users, and helps a product stand out from its competitors. Visual identity for MovieMate consisted of the following: a defined typography, color palette, and iconography.
With the style guide created and wireframes established, it was time to create early prototypes and have the test users interact with MovieMate for the first of many times. Observing the eight test users navigate through early prototypes, it was clear to see that there was major work to do on the theater showtime screen. Test users cited in interviews after, that the theater showtime screen was too visually cluttered and that the showtime buttons were too small.
Problem
The Theater Showtime screen was too visually cluttered.
Too much text
Solution
Replace text of "xx/xx seats left" to "xx% Full"
Opted to change messaging to an alternative that used less characters and numbers, while still conveying the same information
Problem
The Theater Showtime screen was difficult to navigate
The buttons were too small to easily tap/click
Solution
Replaced original 4 showtime viewing as seen in wireframes to 3 showtimes
Increased remaining showtime buttons size by 22% (width) and 45% (height)
Increased font size for legibility
In the end, a total of three usability tests were held. These usability tests were used to validate the final designs, with each usability test ending with the simple question of "On a scale of 1-10, rate your experience with the following screen."
Screens that had an average rating of 8.5 or above were deemed fine to leave as is before launch of the product as we had a relatively small sample size to work with. Specific problems would be better represented with a larger sample size after launch. But there was one screen that interestingly rated just below our pass rating of 8.5, the review order screen.
Problem
"That screen looks a little weird to me"
"I think the map is a little too low, I should have a bigger space to tap it and open it"
"I feel like while food being a separate charge is nice, why do I care if I didn't purchase any food?
"That screen really forces me to slow down and read line by line my order"
"There should be a line there confirming my email address so I know where to check for the receipt."
Context
The review order screen should look visually different than the order completed screen so the user is aware that they are progressing through their journey.
The order completed screen already uses text alongside the poster to free up space and offer a clear visual change signifying that this is a new step of the journey.
Earlier tests did not highlight that there was no visible email attached to the order.
Solution
Combined relevant lines of information.
Movie, seat , and time can easily sit together in the same line instead of being spread over 3 different lines.
Added a field to display user's email address made to finish the order.
With the freed up space from combining lines of information, the size of the map can now be increased without intruding on the order details.
After conducting interviews and doing research, three key features stood out to test users that would encourage them to go to the theater more.
Being my third major UX project, the opportunity to design MovieMate was the culmination of everything I have learned. Incorporating concepts formally acquired through the Google UX Design Certificate and skills gained as a UX/UI design intern at IFYK, my approach to this project was radically different. Allowing the project to simmer, I conducted multiple rounds of iterative work on wireframes, lo-fi prototypes, and hi-fi prototypes.
I learned the value of having a larger sample size. Expanding my sample size from two test users in Voluntize! to eight for MovieMate revealed how much untapped knowledge test users have to offer. Having a larger sample size made it easier to validate certain features and decisions, and brought forward issues that I would not have encountered otherwise.
I learned the value of not taking what the test users say as absolute. Though the final wireframes were designed and shown to test users after completion to satisfactory, this did not mean the wireframes were perfect. A wireframe is only a quick imagining of what the product will look like, once all the colors and visual design decisions are made, the core frame might get muddled, resulting in a confusing user experience. This is precisely what happened with the theater showtime screen.
I learned the value of a style sheet. Having a style sheet that I updated during development of MovieMate made it easy to build the actual prototype as I had all the tools I needed right at my disposal. Especially when going back to do revisions, having a style sheet meant I did not have to waste any time on thinking how to implement new features.
Monitor user activity for data-backed decisions. It is necessary to analyze how a large sample of users use the application to guide the future of the application and make the product more efficient. Two specific categories to look under are the usage of location services and time spent scrolling on the movie list view.
Design filters to help users find movies that appeal to them. While MovieMate encourages users to go to the movies by making it an easier task, test users indicated that there is further work to be done for those who don’t have a specific movie in mind. Given time limitations, this feature was not fully developed but is the top priority.
Refining seat maps for theaters. Due to MovieMate’s comprehensive theater coverage, it is important to remember that no two theater rooms are laid out the same. This calls for the creation of a seat map that is dynamic and highly scalable. Movie theaters that house 30 people and theaters that house 300 people need to be accurate for user satisfaction.