Movie Ticket Booking App
User Experience Design and Prototyping Process
This project shows our steps to designing user experience for the app for easy movie ticket booking. We used methods of Design Thinking, iterative process of Rapid Prototyping, Design Sprint techniques, utilized HADI cycle methodology, and applied our hackers’ mindset: knowledge and creative problem solving skills.
The project is made for the "Movie Ticket Challenge" on UpLabs.
Final result — an InVision prototype designed in Figma.
Hypothesis — Problem
Finding a movie, booking tickets, paying for them takes time and some research.
Action — User Research (Interviews)
Youth like to watch movies a lot, so we decided to make them our target audience. We asked students some questions about their experience in going to the cinema and watching movies.
Data
Insights
- Students don’t have money to go to the cinema often.
- Students don’t book tickets if they don’t profit or because they go to the cinema spontaneously.
- Decisions are made spontaneously, unless it’s a long-awaited movie.
- People don’t go to the theatres far away from where they are.
- Students go to the cinema mostly with their friends.
- A single person pays for the whole group before the session — most common payment model.
- Cinema-goers prefer watching movies on specific day only when they don’t have a specific movie in mind.
- People love to go to the cinema, but some of them don’t have enough time.
- Someone is more likely to go to the movie everyone around talks about.
- Some cinema visits are roughly planned one month prior to them.
- People want to be able to choose the best possible places before they are gone.
- If the tickets are booked, and one of the attendees can’t come — tickets should be cancellable.
- Nobody wants to be notified about new movies, as they get information from other people.
Short persona description on paper
Persona
Based on the data from the interviews, we created a persona which describes the typical student (we are based in Russia, so it’s a Russian student).
• Bio
- 18 years old
- Male
- Russian
- Student
- Lives in dormitory
- Has no income (doesn't work)
- Cheerful and friendly
• Cinema experience
- Loves to watch popular movies with friends
- His friends like movies too
- Prefers movies with a lot of action
- Shares his opinion about the movies he watched
- Watches movies on dates with girls sometimes
• Goals when booking tickets
- Having an intention to watch a movie — be able to easily find the necessary information.
For example: if he wants to watch a specific movie on specific date — he should be able to obtain information about theatres and showtimes; if he wants to watch something now — he should be able to find the closest movie in the closest theatre.
• Problems regarding ticket booking
- Group payments are somewhat difficult
- It’s difficult to book tickets for specific time of the day
- There are a lot of theatres, but he is interested in a few only
- Difficult ticket cancelling when many people come
- 18 years old
- Male
- Russian
- Student
- Lives in dormitory
- Has no income (doesn't work)
- Cheerful and friendly
• Cinema experience
- Loves to watch popular movies with friends
- His friends like movies too
- Prefers movies with a lot of action
- Shares his opinion about the movies he watched
- Watches movies on dates with girls sometimes
• Goals when booking tickets
- Having an intention to watch a movie — be able to easily find the necessary information.
For example: if he wants to watch a specific movie on specific date — he should be able to obtain information about theatres and showtimes; if he wants to watch something now — he should be able to find the closest movie in the closest theatre.
• Problems regarding ticket booking
- Group payments are somewhat difficult
- It’s difficult to book tickets for specific time of the day
- There are a lot of theatres, but he is interested in a few only
- Difficult ticket cancelling when many people come
Goal
Create a simple flow for movie ticket booking mobile application. Necessary tickets could be booked in as few actions as possible. It will offer discounts and best prices if possible.
Examples
- Google Showtimes (now in Search)
- Google Assistant ("What movies are playing?")
- BookMyShow
- TicketNew
- TixDo
- MovieTickets.com
- FarPost Kino
User journey map — one of the early sketches
User Journey Map
To better understand when users interact with the app and their emotions at that moments we created a user journey map. It also shows that there is a possibility to expand the app functionality, it is possible to add a couple of touchpoints to user’s experience.
App features
We decided that general search will be easiest to use for users with different prerequisites. There are tags with most popular search keywords, so instead of typing, user might click on a tag, and it will automatically be added to the form. There should be a date picker for simpler date selection and visualisation.
• Search
- Text field
- Tags
- Suggestions
- Voice
• Booking
- Movie, description
- Theatre
- Date
- Seats
- Payment method
- Price
• Tags
- Movies
• Most popular
• Similar to previously watched
• Upcoming
• Features (not necessary if movies are suggested personally)
- Popularity
- Genre
- Actors
- Age restrictions
- Dates
• Today
• Tomorrow
• This weekend
• Other dates (date picker)
- Theatres
• In the user’s city
• Sort by closest
- Text field
- Tags
- Suggestions
- Voice
• Booking
- Movie, description
- Theatre
- Date
- Seats
- Payment method
- Price
• Tags
- Movies
• Most popular
• Similar to previously watched
• Upcoming
• Features (not necessary if movies are suggested personally)
- Popularity
- Genre
- Actors
- Age restrictions
- Dates
• Today
• Tomorrow
• This weekend
• Other dates (date picker)
- Theatres
• In the user’s city
• Sort by closest
A couple of many UI sketches
App prototype
When the app opens, search can be done immediately. There are personal suggestions for a user, so he might not even use the search field. User research suggests that people plan going to the cinema several days prior to the session, and they mostly go there on weekends, so the most common tags are present. Those who want to go to the cinema on a different day can use date picker menu or just enter the date manually into the field.
User can type in a title of the movie or select one of the suggested ones. The suggestions list is horizontally scrollable. When the movie is selected — the list of available showtimes appears. If there are too many available showtimes and the user doesn’t care about the theatre — the list of times is condensed into times of the day.
After the movie, date and time in the theatre are selected — the user can choose the best seats available. The seats' prices and the total sum will be shown immediately after selecting at least one seat.
Returning user can choose the card he used before, and the new user will be asked to enter the new payment method details. Card photo can be used instead of typing the information in, this feature saves time and reduces the number of necessary taps. When choosing to pay with PayPal, the user will be redirected to PayPal, and back to the app when finished.
Booked tickets appear on the main screen below the tags. When the card is scrolled up, the tags menu collapses. There is a collapsable QR code which should be shown to the check-taker before entering the hall. It is easy to cancel the tickets on this screen if necessary, the user should receive a full refund.
Here is a final result.
Credits
Gleb Sabirzyanov — User Experience Design, User Research, Rapid Prototyping, Content Strategy, Interactive Design, User Interface Design, User Journey Map Illustration
Olesya Chernyavskaya — User Experience Design, User Testing, Rapid Prototyping, Content Strategy, Interactive Design, User Interface Design, Competitive Analysis
Behance: Wersatiles Twitter: @Wersatiles
Thank you!
