Movie Ticket App Case Study
Understanding the User
User Research Summary
I conducted interviews to discover user needs and pain points connected with the ticket purchase experience. One of the user groups I found was busy professionals with children who want to see a movie as a family.These individuals have a hard time fitting a movie into their schedule, and need a ticket purchase process that is fast and easy. They also need options to filter by rating and special pricing.
User Pain Points
Persona and User Journey Map
I created a persona named Ben to represent the summary of my user research. Ben's primary struggle is fitting seeing a movie with his spouse and child into his schedule.
Starting the Design
Competitive Audit
I completed an competitive audit and identified what competitors did well or poorly with their similar products. My findings suggested that clear navigation, built-in accessibility capabilities, and avoiding locking features behind location or login requirements would most benefits users.User Flow Diagram
Making a user flow diagram helped me understand what screens, decisions, and actions Ben will encounter while purchasing a movie ticket.
Paper Wireframes
With the flow of screens decided, I turned to paper to begin to sketch out ideas for the design of the home screen. I wanted the user to be presented with a list of movies right away, so they can jump into exploring available options immediately. I also wanted the search and filtering options to be prominent on the screen, so users who prefer to search instead of browsing can find exactly what they need. I played with the arrangement of these features to find out what would be easiest for users.
Digital Wireframes
Next I turned the paper wireframes for the screens into digital wireframes in Figma.
I made the new movies, search, and filter options prominent on the home screen. User research showed that some users like to browse, while others know what they want to search for, or want to filter for specific results. I wanted the design to support each of these movie selection processes equally well.
Multiple steps for seat selection can add confusion for users, and make the purchase process too complicated. I designed a seat selection screen that allows users to select seats and ticket type on one screen and review the price immediately. Arrows at the top allow users to navigate to other show times, to check if better seating is available.
Many users stressed that they didn't like spending much time purchasing tickets. To reduce the number of steps and time investment to purchase tickets, I placed the ticket summary, add-on selection (for items like popcorn, etc), and payment option all on one screen.
Low-Fidelity Prototype
I connected the views with interactions in Figma, based on the user flow from earlier, to create a working low-fidelity prototype.
View Prototype
Testing
Usability Study 1
I conducted a usability study with the low-fidelity prototype, to discover if my design decisions were solving user problems successfully. I wanted to understand if buying tickets in the app was easy for users, and any roadblocks they ran into along the way.I sought themes in the usability study feedback, and used an affinity diagram to do so.
Round 1 Findings
Refining the Design
Mockups
Users found the order summary too brief with unclear edit options, so I removed the add-on and payment options in favor of a clearer summary.
I added a devoted add-on view so purchasing add-ons will be simpler for users.
Users wanted more payment options. This new check out screen has options for entering a credit card, or using a saved card or rewards card.
Prototype Changes Post Study
High-Fidelity Prototype
After adding visual style with font, color, and iconography, the design came to life a bit more.
View Prototype
Testing
Usability Study 2
After making changes following the first usability study, I ran a second usability study with a high-fidelity prototype of the app.I used an affinity diagram again, to discover the themes in the user feedback.
Round 2 Findings
Refining the Design
Mockups
Users weren't sure what symbols and colors on the seating chart meant, so I added a seating map key that can be opened by hitting a question mark symbol.
The location of the cancel button was unintuitive for users, so I moved it to the bottom of the Review Order screen. I made it easier to remove an add-on here and added clarifying text for users who like their add-on choices, but have changed their mind about which movie to see.
I added an add-on summary to the add-ons screen so users can easily check their add-ons and remove selections before moving on.
View Prototype
Accessibility Considerations
One accessibility consideration I included in the app is the use of both symbols and texture to indicate seat selection status. Using color on its own to indicate meaning has poor accessibility, so this distinction was important. I tested the color scheme I came up with (which is inspired by the moviegoing experience) for contrast, to ensure it meets Web Contrast Accessibility Guidelines. Another accessibility consideration I made is the inclusion of notations of available accessibility technologies for each movie, and filter options to select movies based on these technologies.Going Forward
Takeaways
Next Steps
Thank you for reviewing my case study!
If you would like to get in contact with me, please use the information listed in the footer below.Back to UX