Hi There
Ticket-Lab is a student project that I completed for Google UX Professional Certificate. Even this is not an existing app in the market however, research is real, and the design was also created based on actual users and fellow student voices. I’m proud of this project, but I just wanted to be upfront with that.
Okay, Let's continue ↓
Role :
UX researcher / UI・UX designer
Project duration :
SEP 2021
Create a better and more convenient cinema experience for every movie lovers
Time is precious in today's busy world. The services offered by traditional movie theaters take too much time and steps until the actual movie starts. In addition, because of the streaming services, the number of moviegoers visiting theaters is on the decline. Therefore, this app was developed to help movie lovers discover and enjoy their favorite movies in the theater.
Problem
- Ticket purchase process is time-consuming
- Payment method is very limited
- Language limitation
Goal
- Develop a product that allows users purchase a ticket and check in so that they can save more time
- Product should have simple navigation
Research
Goals
-
Understand the user's journey from purchasing the ticket to see the movie in the theater
-
Discover what makes people hesitate to see movies in the theater
-
Understand the user's pain point
-
Identify the demand for movie theater app to save user's time and improve their experience
Research Components
-
User interviews
-
User personas
-
User jouney map
The primary group is represented by young workers who love movies however, their busy life makes it difficult to go to the theater. This user group confirmed our initial hypothesis about Ticket-lab customers. The research shows that time was not the only factor that stopped people from going to the movie theaters. Other user issues include uniformity in payment methods, lack of movie selection factors, and language barriers.
Insights #1
Seeing movie @ theater is time consuming
The majority of participants tend to buy their tickets at the counter however, sometimes there is a long queue so they have to arrive early to make it to the show time.
Insights #2
Very limited payment methods
Some young users (Late 10s - 20s) don't have a credit card even if it is the only method allowed to pay in the thater app.
Insights #3
Time management could be improved?
"If an app lets users to check-in, we don't even have to wait in line to get into the theater."
Contestant, 30s
Insights #5
I'm just a little picky so I prefer streaming platform
Some users especially in 10s, are used to see movies through streaming services, and it allows them to see whatever and whenever they want
Insights #4
Language limitation affects
"As a foreigner who just arrive here, some apps and websites don't let me use them in English. Even if they have English option, confusing UI makes me lose in the process. If there is an app that has seamless flow as in the native language could be a game-changer for someone like me.
Contestant, 20s
Insights from survey and interview
User Persona
As a result of the research, I could create a user persona that defines the user's pain points and goals.
Persona
Jake is a busy young worker who needs a quick and easy option for movie booking because he has very limited time.
User Jouney Map
By mapping Jake’s user journey, it shows how convenient for the users to have Ticket-Lab app to avoid wasting time at the movie theater.
Ideation
I tried to create different patterns for the home screen as much as possible. As a result, 5 differrent patterns were created. Then, I got feedback from other designers (Google UX alumni) and put RED STAR on the design seems efficient for each contents.
By drawing each screen of the app on paper repeatedly, it could ensure that the elements incorporated into the digital wireframe were suitable for solving the user's pain points. For the home screen, I prioritized a simple and quick way to allow users to book a movie in a short time.
Design
Digital Wireframe
At the initial design phase, I created digital lo-fi wireframe based on user research and feedback. As a designer, user is always first and design has to guide them to their goals without confusion or frustration. Here, I attempted to minimize the time to spend on the process of booking tickets and checking in, as well as providing the essential information for the user.
In addition to a list of currently released or upcoming movies, a ranking format allows users to see trends. In addition, theater ticket sales status can be checked in real-time by displaying icons , allowing for smooth reservations.
By adding a measurable icon on the right upper side of the screen, users can see how far they come and remain for the booking process.
User- Centered design
Low fidelity prototype
I created a low-fidelity prototype. The primary design I created was to reduce the number of the booking steps so that user can easily complete their tasks.
Usability study and refine the design
I conducted usability studies for 2 rounds. Findings from the first study allowed me to design wireframes. The second study utilized a hi-fi prototype and after the study, I refined the design that was needed to be fixed.
Findings from the First study
Insights #1
Simple UI is required to save time
"Apps interface needs to be simple so that I can make reservation much easier"
Contestant, 20s
Insights #2
Users need to know the remain process
At the very beginning, there was no measurable scale to know how far they come in the purchasing process so I added a measurable icon on the upper right side.
Findings from the Second studies
Insights #1
Organize the information
Some parts of the design seem to lack space and it causes low readability. Therefore, I adjust UI to be more aesthetic but also clean to scan the information.
Insights #2
Improve text to be more A11y friendly
Some texts were hard to read, so I changed not only the size but also the UI itself to make it user-friendly.
Insights #3
Variety payment method required
Since many apps in the market only allows credit cards as a payment method, I tried to add more options.
BEFORE
AFTER
Refine the design
In the early design, the color contrast was weak so the users got lost easily. Then I added a black rectangle in the background to make the time schedule stand out.
BEFORE
Users are required to confirm the booking information to move forward in the process but the previous ver. of the UI wasn't enough to make necessary information stand out. Therefore, I added sections and images to make them much clear.
AFTER
High fidelity prototype
High fidelity prototype
The final hi-fi prototype presented simple user flows for booking and check-in. Moreover, it met users’ needs for simple and quick way to make a movie theater booking.
Mockups
Accessibility considerations
A11y matters
The colot palette has high contrast which is considered to help low vision users.
Icon helps users' experience
Icons help users to complete their task successfully and easier.
Remove language barrier
In the movie review section, it allows users to use translation so that more users could see various opinions no matter what the original language was written.
Takeaways
Impact
What I learned
Conducting usability studies makes it possible to understand how the app could offer users to achieve their goals and needs.
At the beginning of design phrases, some elements and compoonents had low color contrast which could be very difficult for some users who have low vision. It could be seem like a simple problem however, it might change whole experience for some users and designer should not have forgot about that.