Case Study : Design a Mobile Ticketing App for a Movie Theater

Rivaldy Naiborhu
10 min readNov 27, 2022

--

My-TIX App Design

Introduction

Hi everyone! Before that, let me introduce myself. My name is Rivaldy Naiborhu and I am a graduate from Information Engineering Universitas Gadjah Mada. I am very interested in the field of UX Design, especially in the field of UX Research. I have now completed my course on the Google UX Design Certificate and I want to share my case study!

Design Process

Design Process

Understanding The User — Research

Background

Indonesia is a country with a fairly high internet penetration rate of 77.02% in 2022 (Zulfadly Syam). This happened in line with the increasing number of smartphones which reached 86.6% for Java Island. This has increased the number of smartphone users for ordering tickets, including ordering cinema tickets.

Amount of smartphone use by island in Indonesia | Source : GoodStats

This research aims to find out how user behavior is in using existing ticket booking applications to be further optimized according to user needs.

Research Goals

1. Understand users behavior
2. Understand users pain points
3. Get new insights from users to build a new interface

Research Question

There are 12 interview questions which contain questions about introductions, user behavior when using the application, pain points from users, and insights from users. For more details, you can view the transcript here.

Methodology

1. Moderated Usability Study
I chose the moderated usability study because by using this method, I can ask specific questions to users and carry out with follow-up questions based on the questions that have been planned. In addition, this method has advantages such as the establishment of a raport between myself (as a researcher) and the participant.

Research will be conducted in Indonesia especially Yogyakarta on November 19, 2022. Participants will answer the questions that have been prepared one by one with additional follow-up questions. Each session will last for 15–25 minutes. Interviews were conducted via WhatsApp calls and also in direct interview.

2. Audit Competitive
Competitive audits are conducted to identify key competitors as well as review the products offered by competitors. With a competitive audit we also know how competitors are positioning themselves in the market

Participants

  • Male/Female
  • Age range from 18–25
  • Students and workers categories
  • Anyone who has ever made a purchase through the app like M-TIX, TIX-ID, Go-Tix, etc

Data Synthesis

Affinity Diagram

Affinity Diagram (Written in Indonesia)

The results of the interview are then made into a transcript on a spreadsheet. Answers from respondents are made into an Affinity Diagram to get strong quality insights. By making an Affinity diagram, we get 4 themes that can be used as insights. Besides that, as a result of this interview, I found several products that are major competitors such as TIX ID and M-TIX.

Likes

Likes (Written in Indonesian)

Most users like TIX ID because the process is very easy and it also has many choices of cinemas with digital payments that make it easy for them. They can also see information about the movies they will watch. In addition, a user who uses M-TIX thinks that M-TIX has the most updated ordering service compared to other applications

Pain Points

User pain point (Written in Indonesia)

Users also experience several problems, such as users sometimes having difficulty logging in using a phone number, they prefer to use an email account rather than a phone number which is considered private. Some users also feel that the location on the application does not change automatically when ordering tickets in certain areas (outside the city). Expensive admin fees also make them think twice about ordering tickets in large quantities. One of the participants sometimes felt dazzled because the screen was too bright

User Interface

User Interface (Written in Indonesia)

3 out of 5 participants who were interviewed talked about the interface appearance of the 2 products. According to them, M TIX has an ugly interface and is quite difficult to use. Meanwhile, TIX ID has a more pleasing interface than M-TIX

Needs

Needs (Written in Indonesia)

Users inform their needs in using the application, such as to always provide the earliest ticket updates every day so they can order earlier. In addition, users need a variety of payment methods to make it easier to pay for tickets.

Conclusion of the Affinity Diagram

  1. Users want user flow with an easy process, with a large selection of cinemas, information about films, seat selection and digital payments. Users also need an application that is updated every day so that tickets can be ordered earlier
  2. The admin fee paid per ticket is too expensive if the user orders a large number of tickets, the user also has difficulty determining the location when moving to a new place. Users sometimes find it difficult to log in because the method offered is only by using a phone number. The bright interface also sometimes dazzles the user’s eyes
  3. According to users, the interface like TIX ID is very easy to use compared to M-TIX
  4. Users need a ticket ordering application with many payment methods, users also want the application to have a ticket update schedule earlier every day

User Persona

User personas are fictitious users whose goals and characteristics represent the needs of a larger group of users. The reason for creating user personas is to understand the needs and expectations of users. User persona also helps to describe research results and provide information before making decisions

User Journey Map

User journey maps are consumer journeys or experiences when interacting with a product or brand. The benefits of the Journey map are helps UX Designer create obstacle free path for users, reduces impact of designer bias, highlight new pain points and identify improvement opportunities.

User Journey map

Audit Competitive

The next step is to conduct a competitive audit. Competitive audits are conducted to identify key competitors and review the features and products offered. Competitive audits are also useful for solving usability problems. In this use case, I compared 3 competitors, namely, TIX ID, M-TIX, and Go-TIX. You can see the analysis process here.

based on the competitive audit conducted, the following information was obtained are

  1. All competitors use phone numbers to register and login. Making a login feature using an email address will be a new breakthrough for the company
  2. Applications such as MTIX only serve purchases for one type of cinema, while TIX ID serves inter-cinema purchases which of course can expand the market
  3. All applications are still unable to perform location detection when moving
  4. All applications do not provide a variety of payment methods, for TIX ID only 1 payment method is provided, namely DANA. It’s the same with Go-TIX which offers payment only via Gopay. In contrast, M-TIX offers 2 payment methods, namely Sakuku and Gopay

Research Conclusions

  1. Add another login feature to make it easier for users to access the application for the first time and to make it easier for users who no longer have access to their phone numbers
  2. Add an automatic location search feature to make it easier to find locations for users who frequently move between cities
  3. Added a dark mode feature to make it easier for users with accessibility needs

Starting The Design

User flow

User flow is the path that users usually take to access applications so they can complete tasks from start to finish. It aims to map how users achieve certain goals when they use the product.

User flow

Paper Wireframes & Digital Wireframes

The design phase was initially validated by wireframes on paper. It aims to be able to write down many ideas in a short time. After doing the paper wireframe, the idea that has been drawn is then made into a Digital Wireframe as shown below

Paper Wireframe & Digital Wireframe

Refining The Design

Login Menu

According to the conclusions that have been drawn, a login feature was created using Google and also Facebook

Login/Regisiter Menu Design

Automatic Location Search Feature

An automatic location search feature is also created which will be activated automatically when the user leaves a city. This aims to make it easier for users to get a location according to their whereabouts at that time

Automatic Location Feature

Main menu

The main menu is made very practical by highlighting which films are currently showing and will be shown. This page also displays movie category filters according to their individual preferences. Also made additional navigation bar which aims for users to navigate to other pages

Homepage

Movie Information

In the film information section, I would like to highlight information about the film, rating and a brief synopsis of the film and its cast. Also in this section, I am still adapting the ordering style that is commonly used in the TIX ID application because users think that ordering methods like TIX ID are very easy to use.

Movie information

Select Seat

In the seat selection section, the user does not need to fill in the number of tickets, so the user only needs to directly choose a seat in the cinema. The estimated price will immediately appear on the screen

Ticket Section

Payment method

Based on complaints from users, users want to get more payment methods. So that various payment methods are made so that users can more easily make payments according to their wishes

Payments Option Section

Accessibility

In the accessibility section, a darkmode mode and a language change service are also added. This was created based on a complaint from one of the users who needed this accessibility mode. Modes that are easy to access and found in the my profile menu make it easy for users to access this mode. This accessibility mode is designed to be enjoyed by all users, not just certain users.

Accesibility Option

Prototyping

Prototype Image

The interface that has been designed is then made a prototype for usability testing

Testing

Usability testing was carried out with unmoderated method by targeting 5 users in the same category when the initial research was conducted, students and workers. The key performance indicator used is the System Usability Scale by giving 10 questions to the 5 respondents. The results of the usability scale system get a score of 89 in the excellent category (limit score of 68), this indicates that the design is acceptable to the user.

Source : https://medium.com/thinking-design/the-system-usability-scale-how-its-used-in-ux-b823045270b7

The usability scale results can be seen here. You can also try using prototype here.

The conclusions obtained from this testing are :

  1. 1. It’s easier for users to log
  2. Users feel more comfortable using the current design using the new
  3. Users find it easier to find a location when moving
  4. Dark Mode is easy to find but still not dark enough for
  5. Users feel comfortable with the flow of purchases and payment methods provided.

Improvements

From the last test that was carried out, I found several entries like

  1. I recommend that Section Coming Soon be replaced with the most trending film at that time with a carrousel view
  2. The dark mode color display is not so dark that a color palette change is needed to complete this input

Thank you very much for reading this to the end! I’m very open to receiving input on my case study! You can reach me on my LinkedIn, or my Instagram!

--

--

No responses yet