Ticket Pilot
Taejun Kwak
The product:
Ticket Pilot is a mobile app allowing users to pre-purchase their movie tickets and snacks before heading to the theatre.
Project overview
Project duration:
Sept 2022 - Dec 2022
The problem:
The current solution to purchasing movie tickets on an app is not user-friendly for all user groups and is tailored towards tech savvys.
Project overview
The goal:
The goal of this project is to design an app that is accessible for all users and focuses on the user journey with a streamlined workflow.
My role:
Lead UX Designer, UX Researcher
Project overview
Responsibilities:
User research, wireframing, prototyping, and user testing
Understanding
the user
User research: summary
User interviews were conducted to understand the target audience and their needs. The goal was to identify why users choose to purchase tickets at the theatre or on a desktop instead of an app. A primary user group identified through research was working adults who are unfamiliar with the process of navigating through an app due to inexperience.
This user group confirmed the initial assumptions about Ticket Pilot’s customers, but further research revealed that inexperience was not the only factor limiting users from ordering a movie ticket. Other user problems included disability, interests, or lack of user engagement by existing apps.
User research: pain points
Ads
Platforms for ordering movie tickets rudely interrupt users with a paywall or an ad.
Process
Some apps have a difficult workflow and users often find themselves lost in the process without being able to go forward or backward.
Accessibility
Users with disabilities have a difficult time reading or noticing certain features which takes away the user experience.
Help
When an app experiences a bug or system failure, users need to know where to search for the solution.
1
2
3
4
Persona: Jessica Parker
Problem statement:
Jessica is a working mom who needs an intuitive app with an easy workflow due to her lack of knowledge and understanding in technology.
User Story:
As a single, working mom with little time to spend with my son, I want to quickly and easily purchase movie tickets so that I can spend less time planning activities and devote more time to my son.
Persona: John Patterson
Problem statement:
John is a retired elderly who needs an app that is accessible to those who have difficulty reading texts because of his dyslexia.
User Story:
As a retired elder who struggles to read due to dyslexia, I want to purchase movie tickets from an app using intuitive photos and icons so that I can successfully make an online purchase without texts being a barrier for me.
User journey map
Mapping the user journey revealed how crucial it is to streamline processes and design for accessibility for a better user experience.
Starting
the design
Paper wireframes
Taking the time to draft iterations of each screen of the app on paper and a tablet ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. For the landing page, I prioritized a quick and easy selection process to help users save time.
Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.
Digital wireframes
The user is met with a login page once they open the app. They may login if they already have an account or sign up for a new account.
Login Information
Login Page
Sign up for a new account
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. The digital wireframes are not an exact replica of the paper wireframes as improvements have been made.
Simple and intuitive header to select key information when booking a ticket
Landing Page
Large posters of the movies for noticeability
Footer with menus for quick and easy access to other views
Digital wireframes
This screen holds all the information a user may need. Users want all movie details on the app instead of having to change platforms. The left side of the screen is movie details and the right side is selections that users must make to move to the next page.
Users can watch trailer, read descriptions, and look at reviews
Selection of tickets and time is straightforward.
Select Movie Time
Digital wireframes
This page is unique compared to competitors since it shows the screen position and utilizes seat icons instead of boring squares.
Labels to indicate what each color means to avoid any confusion.
Select Your Seat
Digital wireframes
The main focus of the food/drinks page is ensuring that it displays as many items in an organized manner. The titles help users find the right item and all choices such as size and protein are on one screen. Users can check their cart and they have the option to skip.
Item picture, description, and price is all displayed.
Select Your Food/Drinks
Users can select options right on this screen.
Considers users who wish to not order any food/drinks.
Digital wireframes
A simple and clean design is used to display the items in the shopping cart.
List of Items user has selected along with prices.
Shopping Cart
Users can choose to finish and move on or go back to keep adding.
Digital wireframes
The purchase overview screen contains every order details the user has selected so far. It also calculates the total price of the purchase. There is an option for users to pre-order food and drinks so that they do not have to show up early and wait in line for eatery.
Full overview of all the details of the movie ticket and price allowing users to double check if the had made any mistake.
Purchase Overview
Option to skip line and pick up food / drinks order.
Shows the grand total so users know exactly how much they are paying.
Digital wireframes
The payment information page is the industry standard interface. All elements required to make a purchase online is present.
Personal information section such that users can receive confirmation through email and SMS.
Payment Information
Users can select their method of payment (visa, mastercard, etc) and save it for next time.
Friendly reminder of their grand total.
Digital wireframes
Most users are sensitive about making an online purchase. There are times when users make a purchase on accident. To prevent this, a confirmation message protects users from making that mistake.
Payment Confirmation
User is prompted a confirmation message.
Digital wireframes
The user is met with a confirmation page ensuring that their purchase is successful. It contains the necessary information to access their tickets.
Message containing order number and how to access tickets.
Confirmation
Return to the main menu.
Option to see the tickets right away.
Digital wireframes
One menu option is “My Tickets”. Users can immediately jump to their tickets once they are at the theatre and scan themselves in. It contains their seat information as well for convenience.
Simple instruction on how to use the tickets.
My Tickets
Unique movie ticket design with relevant details on each ticket.
Users can swipe to view other tickets
Digital wireframes
My profile is another menu option to view user history. It contains their time spent in the cinema, most visited cinema, and a list of all the movies they have watched.
Personalizable banner and profile picture.
My Profile
History of the user in case they are interested in looking back.
Fun facts about the user for entertainment.
Digital wireframes
The settings page can be accessed through the profile page by clicking on the gear icon. Users can adjust their information and preferences on this page as well as read up on the legal information associated with the app.
Users can adjust information and preferences to meet their needs.
Settings
Legal information for any legal reasons.
Users can log out if they need to switch to a different user.
Low-fidelity prototype
The low-fidelity prototype connected the primary user flow of purchasing movie tickets and eatery such that it could be used in a usability study with users.
View the TicketPilot
View the TicketPilot�Low-fidelity wireframe.
Usability study: findings
Upon conducting usability studies on 5 participants (each round) with various backgrounds, I was able to gain insights to improve upon the low-fidelity prototype.
Round 1 findings
Food selection needs to be simplified with button highlights
1
Shopping cart should hold more information about the order
2
Round 2 findings
Add receipts for snack order
3
Users wants movie description on the app
1
Users want to delete items from the shopping cart
2
Wants multiple methods of signing up
3
Refining
the design
Mockups
There was nothing fundamentally wrong with the old login screen. However, it can be improved by integrating third party tools such as Google and Facebook to signup and login.
Image of selected screen before usability study
Before usability study
After usability study
Image of selected screen after usability study
Mockups
The usability study proved multiple flaws in the original design. The biggest mistake was the absent edit and delete function while browsing the shopping cart.
Before usability study
After usability study
Image of selected screen before usability study
Image of selected screen after usability study
Mockups
Main mockup screen for display
Main mockup screen for display
Main mockup screen for display
Main mockup screen for display
View the full mockup here
High-fidelity�prototype
View the high-fidelity prototype here
Screenshot of prototype with connections or prototype GIF
Accessibility considerations
Used icons to to help make navigation easier.
Used detailed images and descriptions to help users better understand the design.
The settings page allows for customization such as language to accommodate those from different backgrounds.
1
2
3
Going forward
Takeaways
Impact:
Ticket Pilot is an app that considers the user needs and ensures an intuitive process to purchasing movie tickets.
What I learned:
Next steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine any new areas of need.
Gather a team of engineers and see if this can be developed into a real app
1
2
3
Let’s connect!
Insert a few sentences summarizing the next steps you would take with this project and why. Feel free to organize next steps in a bullet point list.
Thank you for your time reviewing my work on the Ticket Pilot app! If you’d like to see more or get in touch, my contact information is provided below.
Email: taejunk31@gmail.com
Website: taejunkwak.com