Case Study: A ticketing solution for movie lovers
This movie ticketing app provides an intuitive user experience for purchasing tickets. With a clean, minimal interface, the app puts the focus on finding and buying tickets easily. It offers a streamlined design that is easy for all users to navigate, whether they are familiar with the app or using it for the first time. The cohesive visual style creates a seamless experience across the app. Overall, this app aims to improve the movie ticketing process through thoughtful design that prioritizes simplicity and usability.
Project Vision
NT is a mobile and web app that allows users to conveniently purchase movie tickets. It was developed using a goal-directed design approach focused on understanding and fulfilling the needs of movie enthusiasts. Core features were designed around enabling users to easily browse movies and showtimes, select seats, and complete ticket purchases. The minimalist interface puts the movie and theater information front and center. NT aims to provide an intuitive ticketing experience across mobile and desktop platforms. The initial MVP demonstrates capabilities for responsive web design and native mobile development.
Challenges
- Design a cohesive interface for familiar and unfamiliar users
My Role and Responsibilities
Role: UX Designer
Responsibilities:
- Conducted user research through interviews to inform design
- Created paper and digital wireframes to explore and iterate on layout and flow
- Developed interactive low-fidelity and high-fidelity prototypes for usability testing
- Incorporated accessibility standards and considerations into all stages of design
- Iteratively improved designs based on usability study feedback and testing results
- Delivered final user interface and experience design for a new movie ticketing app
Overall, I owned the full user experience design process from research to final delivery as the sole UX designer on this project. My role encompassed qualitative and quantitative research, ideation, interaction design, visual design, prototyping, usability, and iteration.
Kickoff
Contextual Interviews
In this project, I took a goal-directed design approach that proved to be quite effective in our design efforts. I started with qualitative research. Made a few hypotheses and started by asking a few initial questions:
- Do you go to the movies?
- How many times per month?
- When you go, where do you buy tickets?
- How far in advance do you buy your tickets?
- How many cinemas/theatres apps do you have?
- Do you usually check the rating of a movie before making a purchase?
- Should there be a notification feature when the movie is playing in your local cinema?
- Should there be a combo deal that provides free parking and some drinks?
- Should there be combo deals for the family?
Data, Data and Data
User research revealed significant frustration with current movie ticketing apps. The majority of users surveyed reported issues navigating cluttered interfaces, getting stuck when zooming to select seats, problems locating the payment button, and difficulty searching for movie tickets. This feedback highlighted opportunities to improve the user experience by streamlining the interface, optimizing interactive elements like seating charts, and simplifying flows for key tasks like ticket purchases. The research provided valuable insights into user pain points to address in the design of a new, more intuitive movie ticketing app.
User Research Summary
User research was conducted through interviews and surveys with frequent moviegoers to understand their needs and motivations. Empathy mapping and customer persona creation uncovered that users desire a convenient way to discover and purchase movie tickets.
Key insights revealed users want a centralized app containing all theaters and movies nationwide, with features like ratings, discussion forums, trailers, simplified checkout, and security. The ability to seamlessly share purchased tickets with friends also emerged as an important need.
This research provided a strong foundation for designing an intuitive, user-centric mobile ticketing app tailored to movie enthusiasts’ wants and needs for an improved booking experience. The findings directly informed the development of key features and functionality.
Pain points from User Research
To address key user needs identified in research:
- Streamlined checkout with guest options reduces booking time and friction
- Discussion forums, user stories, and multiple rating features provide venues for movie engagement
- Combo ticket+parking deals simplify the parking component of the moviegoing experience
- Post-purchase digital tickets enable users to easily download to their device and share with friends via email
These capabilities aim to enhance convenience, community, and flexibility for users — allowing swift ticket purchases, connecting with fellow fans, alleviating parking challenges, and facilitating group movie outings.
Focus has been placed on optimizing key tasks and pain points to create an improved, user-centric ticketing experience.
User Journey
The user journey optimizes ticket buying through a streamlined process informed by research insights. Users can easily browse movies and showtimes. Details like reviews and trailers aid decision-making. Secure account login or guest checkout enables fast purchases. Intuitive seating selection and combo deal options simplify booking. Users receive sharable digital tickets post-purchase. For returning users, payment and preferences are saved for even faster transactions. The focused interface allows users to smoothly book tickets and satisfy moviegoing needs.
User Map
The user map depicts the ticket purchase journey from start to finish. Users can browse movies and showtimes or search for specific titles. Details like reviews and trailers help finalize movie selection. Users pick showtime, seats, any combo deals, then complete payment. Upon successful ticket purchase, users obtain sharable digital tickets — the end goal. The linear map streamlines key tasks to enable a seamless ticket buying experience.
Affinity Diagram
Customer Persona
Product Definition
Leveraging insights from the developed personas, user journey map, affinity diagram, and user flow, the product was designed with a focus on usability, friendliness, clarity, and simplicity.
The research highlighted core user needs for a straightforward, intuitive ticket purchasing process. This directly informed the streamlined information architecture and minimalist visual style to allow users to easily navigate and complete key tasks.
Low Fidelity Wireframes
Initial paper wireframing and workflow mapping informed the core IA. This led to a low-fidelity wireframe focusing on key user tasks. The lo-fi prototype visualized interaction flow to iterate on essential vs. non-essential elements. This enabled streamlining the most important content and journeys. Rapidly testing info hierarchy and flow with a lo-fi prototype laid the groundwork for the hi-fi visual design system and interactive prototype.
Usability Studies
After developing a low-fidelity prototype, usability testing was conducted with 20 participants drawn from the same sample as the initial research. Leveraging these participants allowed me to gather direct comparative feedback on the extent to which their previously identified needs and pain points were addressed in the new design. The goal of this round of usability studies was to identify areas for design refinement and optimization based on user testing and feedback.
Findings
- The user requires a streamlined and efficient guest checkout process.
2. The user seeks detailed insights into combo deals.
3. The user is looking for upfront information that clarifies the content and purpose.
4. The user desires a prominent checkout icon to confirm their position at the final checkout stage.
5. The inclusion of a small information icon would be greatly beneficial.
“This app has everything inside it and saves a lot of time, also delivers a good experience” — Anthony
Style Guide
This style guide represents only the initial phase in shaping the brand’s future reference, as it does not encompass all the components subsequently integrated into the website. This helped other designers, stakeholders, and developers to ensure consistency and coherence in the interactive element.
High Fidelity wireframes
Through an iterative design process that incorporated continuous user feedback, a high-fidelity interactive prototype was developed.
Multiple rounds of usability testing and refinement were conducted, with each version improving upon the last based on participant feedback and observations. The visual style guide provided stylistic guidelines and UI element libraries to maintain a consistent look and feel throughout iterations.
Accessibility Considerations
Accessibility was incorporated throughout the design process to create an inclusive user experience:
- Alt text was provided for all images to enable screen readers to convey visual information to visually impaired users
- Icons from Material Design were leveraged to enhance intuitive navigation through clear, familiar visual cues
- Detailed imagery was included to support user comprehension and engagement
- Colors were tested using WebAIM’s contrast checker to ensure sufficient contrast ratios for text/background combinations, meeting WCAG standards
Additional accessibility considerations:
- Content structured for logical reading order
- Ample spacing in layouts for ease of interaction
- Simple, readable font chosen and properly sized
Key Takeaways and Learning
1. Conducting in-depth user research is critical to uncovering pain points and designing an intuitive, user-centric solution. Interviews and surveys provided valuable insights.
2. Streamlining information architecture and interaction flows based on research findings simplifies the user journey. Removing complexity improves usability.
3. Iterative prototyping and usability testing is key. Low-fidelity prototypes focus on tasks before visual design. High-fidelity prototypes incorporate feedback.
4. Cross-functional collaboration between design and development ensures technical considerations are incorporated.
5. Accessibility best practices should be integrated upfront to avoid excluding users. Simple content and color contrast help.
Key learnings are the importance of keeping the user at the center and continually testing with them, collaborating across disciplines, and always considering inclusive design.
Future plans would be to conduct longitudinal studies after launch to gather insights to further optimize the experience. Exploring additional accessibility and localization features would also be beneficial.
Mobile Version Prototype
You can see the full functioning prototype by clicking the link below:
