Overview
As part of my UX design certificate program from Coursera, I designed a ticketing flow for a responsive movie theater website that helps friends plan trips to the movies.
My Role
UX Research, UI Design
Duration
November, 2022 - December, 2022 (2 months)
Tools
Figma, FigJam
The challenge
People planning trips to the movies with family and friends are often stuck buying tickets for the whole group, and having to collect payments later. This makes going to the movies a hassle, further contributing to shrinking audiences.
My goals
Design a feature for a responsive movie theater website that lets users save and share seats with friends and family, streamlining the ticketing process and simplifying trips to the cinema.
Approach
I used the design thinking process to guide my project.
Methods
Quantitative Research: Surveys
A survey of 10 participants revealed room for improvement in the online ticketing experience:
Empathy maps
I conducted five user interviews and organized the data gathered into two empathy maps representing two distinct segments within the research group — frequent moviegoers who use websites and apps to buy advanced tickets, and users who go to the movies less often, preferring independent and arthouse films, and more flexibility when seeing movies.
Qualitative Research: Interviews
Findings from the interviews helped clarify specific areas for improvement:
Competitive analysis
Gaps Identified
Pain points and solutions
After reviewing the biggest pain points, I decided to focus on designing a feature allowing users to hold and share seats with their friends, since this solution seemed most aligned with the needs of frequent moviegoers.
Major Pain Points
Proposed Solutions
User journey
Mapping out the steps users would take while interacting with the feature helped identify areas for improvement.
Personas
Two personas representing different user types within the research group.
User flow
Diagramming the user flow helped prepare for the user interface design stage.
Paper wireframes
I chose a card UI design to help organize content and create a responsive experience. User testing of the low-fidelity prototype proved this to be a successful layout option. Instead of navigating to a new screen (which users found to be too clunky), I used modals with dialogue boxes overlayed on the home screen for the feature.
High-fidelity designs
A seat picker modal and contacts modal allow users to select seats to hold, and text them to friends through a simple, efficient task flow.
Creating a design system
I developed a design system including color, typography and other visual elements to ensure consistency across screens.
After completing checkout, users can hold up to six seats to share with friends, who have 48 hours to purchase them. This feature is responsive and can be used on a computer, tablet or mobile device.
The power of design systems
This project showed me the value of utilizing scalable and reusable design systems, particularly for responsive design. I learned about atomic design principles and best practices for building various parts of a user interface, from the smallest elements to the largest. It was fun designing a product that could bring people together in real life, and imagining ways that movie theaters might adapt for the future.