UX Case Study — Redesigning M-Tix Ticket Ordering and Payment Flow
Disclaimer: We are not a part of the M-Tix development team. This study is conducted in collaboration with Binar Bootcamp Product Management Team.
Overview
Since July 2022, I have participated in the UI/UX Research and Design Bootcamp by Binar Academy. With the Bootcamp period approaching its end, allow me to introduce you to one of my first UI/UX case studies that was done in collaboration with my fellow UI/UX student peers and also my fellow Product Management Team members.
We were assigned to redesign an application of our own choosing where through a discussion session between the 3 Product Managers (PMs) and 3 UI/UX Designers we decided to re-design the M-Tix application, specifically in the ticket ordering and payment flow. M-Tix is an online ticketing application developed by Cinema XXI, one of the biggest Cinema stakeholders in Indonesia.
We implement 2-week design sprints with the first week focusing on understanding our users through research and the ideation of solutions based on the interview results. Then, we focused on the implementation of our ideas through prototyping and testing in the second week period. During the sprint, other than doing UI and UX Design, I was given the responsibility to be a facilitator in formulating the research questions and building the Google Forms and also facilitates the ideation process in Miro using the Affinity diagram.
Team members:
- UI/UX Research and Design: Jayson Wilbert, Encik Muhammad Faizul Nizam, Rafael Aldo.
- Product Management Team: Eurlich Allan, Ibrahim Hanif, Mei Lusiana Lubis.
- Mentors and Supervisors: Dienabillah Putri, Ariel Liauw
Brief Background
Who doesn’t love to watch movies?
Movies are a staple in today’s society with the rise of media and the internet, especially in Indonesia. People tend to get a much better experience watching movies in the cinema with the over-the-top speaker and large screens. And ticket bookings are also easy with the rise of online ticketing applications such as Tix-Id, M-Tix, Go-Tix, and many more.
M-Tix, as an application developed by the biggest Cinema stakeholder in Indonesia, has fallen behind its competitors, suffering a low rating in the Google Play Store and iOS App Store of 3.5, and 2.4 in that order.
Even with the low rating, people still use M-Tix as their main online ticketing app especially in the eastern side of Indonesia due to Cinema XXI owning the majority of the market there. However, with the current rise and expansion of other cinema competitors such as CGV and Cinepolis, this may prove to be a critical point for Cinema XXI to reconsider improving their online ticketing experience to compete and maintain the market in their favor. Hence through this study, we as a team in Cinema XXI were tasked to redesign the online ticketing application M-Tix.
UNDERSTANDING THE BUSINESS
Before we started to redesign the M-Tix application, first we would like to understand how M-Tix and Cinema XXI worked as a business. We tried to understand what are the key activities, their revenues, and who are their targeted customer segments. We compiled our findings into the business model canvas below.
Based on the BMC we have built, we are able to identify the presence of the M-Tix application in the revenue streams of Cinema XXI and their targeted customer segments.
Design Process
EMPATHIZE
So… What’s the Problem? Why the low rating?
We decided to read some of the lower-rated reviews by M-Tix users and label each review with its core pain points.
We found 4 different core problems that users had when using the M-Tix application. These problems include:
- The user had a bad UX experience.
- The user couldn’t check the movie schedule in advance.
- M-Tix’s wallet had a large top-up fee.
- Money inside M-Tix’s wallet cannot be retrieved.
Through this method, we hypothesized that the users had encountered problems with the payment system when using M-Tix and had a bad experience when ordering tickets online (Through the bad UX experience point). Since the data we had is still a hypothesis, we decided to do user research on some of M-Tix users to validate our hypothesis.
RESEARCH! RESEARCH! RESEARCH!!
We devised a research plan to help guide us during the research process. The research plan includes:
Research Objectives: to validate our hypothesis on M-Tix problems
Research Methodologies: Surveys and Interviews on selected survey respondents (minimal: 5 respondents)
Participants Criteria: Working people(?) aged 20–30 years old.
Research Period: 13–18 September 2022 (5 Days: 3 days of survey and 2 days of interviews)
Used Tools:
- Google Form: conducting surveys
- Whatsapp and Discord: to contact the selected respondents for further interview
- Zoom: to conduct the interview
- Miro: to analyze the result of the interview.
SURVEY QUESTIONS
The survey questions we formulated were focused on the user’s experience using M-Tix specifically in finding movie schedules, booking tickets online, and M-Tix’s payment process.
INTERVIEW PROCESS
We selected 5 respondents from the surveys for further interview to have a deeper understanding of their problems using the M-Tix application. The criteria used to select the respondents includes:
- Users that have used M-Tix
- Relatively dissatisfied with minimal one of M-Tix services asked in the survey
- Users that volunteered to be interviewed
The interview process is done in two days period (17–18 September 2022) using Zoom as the interview platform. Each respondent was given a task to operate the current M-Tix application specifically on the three main features of M-Tix (Movie schedule, ordering tickets, and payment). During the process, the interviewers will ask about the main problems each user had during each task and identify their pain points while also highlighting their answers on the survey. We conducted the interview this way to have a more clear understanding of the users while they operate the M-Tix application while keeping the users feeling involved in the process.
DEFINE
RESEARCH INSIGHTS
We collected data from the surveys and interview sessions using an affinity diagram as our main tool.
SURVEYS
We collected 21 responses from the survey. Through the surveys we found the majority of our users (81%) preferred to order tickets online. With 66,7% of the respondents used Tix-id as their main application to book a ticket.
One of the unique insights we find is that 14 out of 21 respondents have used M-Tix to book a ticket and we assumed some said users bounced and used other apps instead.
We then chose 5 respondents based on the criteria we have set before and their responses during the interview were compiled into the affinity diagram.
AFFINITY DIAGRAMS
We compiled every response from each user and categorize all of them into related groups to define some of the problems that happened when they used the M-Tix app.
Some of the initial hypotheses were right on the spot which includes ‘bad UX’ and ‘limited payment methods.’ We noticed there are 2 other core problems that the user encountered that we didn’t obtain from the initial hypothesis which include ‘Hard to find purchased tickets’ and ‘Long booking and payment flow’
With the main problems identified, we made a diagram to understand our users' struggles by thinking through their Point of View (POV). This will help us to properly define our main problem and help us in future development
USER PERSONA
We also created a user persona as a guide for us to pinpoint and specify our target user. Meet Charles a tech company employee that loved to watch movies in the cinema during his free time.
USER JOURNEY MAP
Of course, we also devised Charles’ Journey in using M-Tix as his main online ticketing app and pinpoint his pain point during the booking process. Based on the User Journey Map, we would like to improve specifically on the booking process as Charles seems to have a large problem with the booking and payment process while using M-Tix.
HOW MIGHT WE (HMW)
With the understanding of our users and problems, we give rise to several questions through the How Might We framework
IDEATION
We ideated the solution together based on the 4 main problem categories in the affinity diagram.
Then we used the Eisenhower matrix to decide which of the ideated solutions will be used as our main priority. We decided to not move with any modifications in administration fees during payment and M-Tix wallet top-up or any related to the modifications of M-Tix wallet systems as these modifications will affect the business effect of M-Tix specifically in the loss of one of the revenue streams of M-Tix through administration fees.
ADDITION: THE PROBLEM WITH THE ADDITION OF OTHER PAYMENT METHODS.
After the final mockup and prototype design has been done and fully tested, we started another iteration of the design sprint and during the ideation process, one thing was stuck in our heads regarding the addition of e-wallets and virtual accounts as alternative payment methods. The addition of these payment methods may provide an immediate benefit for the users as easy options are more available for them. However, these changes may have their downsides as they may lower the M-Tix wallet usage number which is one of the main revenues of the M-Tix application. Hence, to tackle this problem, we had an ideation session together with the team to increase the usage of the M-Tix wallet.
The initial problem with the M-Tix wallet is that it has a large minimum top-up requirement with little to no value in the wallet itself other than to pay for movie tickets and food. One M-Tix wallet top-up may cover 2 to 3 movie tickets which actually hurts the users if they only just want to book one ticket. However, changing the minimum top-up requirements or administration fees as we have said before may actually affect the revenues of the company. So, with this consideration in mind, the result of this session is to give more benefits for the users to drive the usage of the M-Tix wallet through promotions and vouchers exclusively for M-Tix wallet usage. People will get more benefits and advantages if they use the M-Tix wallet to pay for their tickets. Some benefits may include a buy 1 get 1 free promo, free drinks, and other benefits.
EPICS AND USER STORIES
With the formulated HMW questions we the Product management team devised Epics and user stories to guide us UI/UX designers
SITEMAPS AND USER FLOWS
Moving on to designing the product, we used the epics and user stories as our basis for the sitemaps and user flows. Here, the UI/UX teams divided tasks to design them and I took part in making the sitemaps, user flows, wireframes, mockups, and prototypes.
With the old structure of M-Tix’s sitemap, users can’t access their tickets from the main homepage or dashboard. Users need to access their profile and then select purchase history to access their already-bought tickets. The process to access the bought tickets was proven hard to find and may generate problems with the users. Hence, with our newly modified flow, we decided to add ‘My ticket’ to the homepage’s bottom navigation bar to help the user access their tickets easily and help the process to move faster.
USER FLOWS
We decided to modify the booking flow by shortening it. The original flow demands the user to navigate through three screens to find the movie schedule, venue, and option to select a time to watch the movie. We did it by combining the three steps into one screen where the user can find the movie’s schedule, and venue while also being able to select the watch time right away. In addition, users are now able to access their ticket information right away after they finished their ticket purchase process.
PROTOTYPES
WIREFRAMES AND WIREFLOW
With the newly agreed sitemap and user flow, we created wireframes and wire flow for the new M-Tix layout.
HI-FI MOCKUP DESIGN
Before we move to mockup design, a UI Kit was needed to make sure the designs are consistent.
UI KIT
We decided to use the original green color to maintain the brand identity of M-Tix with our own addition of gold secondary color. This color was generated from the original Cinema XXI logo as it fits with the primary color.
The typespace that we have selected is Poppins. We wanted to maintain the ‘clean, minimal, and modern feel of a cinema with the use of Sans Serif fonts such as Poppins.
The icons that were used originated from the feather icon kit. With the addition of icons generated from Iconify.
MOCKUP DESIGNS
Each mockup design was done with consideration to improve and solve the problem from the old M-Tix app design. For more clear interaction between each screen, you may find it in the prototype.
PROTOTYPING
Finished Mockup designs were then connected into a working prototype that you can access below!
There are 2 main functions that you may access in this prototype starting with:
- Order One Piece: Red movie ticket.
- Find booked tickets from the My-Ticket menu on the homepage.
- Apply vouchers and read payment details when ordering movie ticket
EVALUATION
To evaluate the prototype that we have made, a usability study plan is made. With this study, we want to make sure the functionality and idea of the prototype are tested.
USABILITY STUDY PLAN
Research Objective: to test the already made prototype and analyze directly how a user interacts with the prototype.
Research methodology: unmoderated usability study utilizing Maze as the main tool to conduct the study.
Research Period: 24–25 September 2022
Participant criteria: Working people aging 20–30 years old (ideally the users that have been interviewed before)
Research Tool: Maze
Performance indicator: System Usability Scale score of >70
STUDY DESIGN
Users will be given three tasks to operate the M-Tix prototype. The tasks include:
- Order the One Piece Movie: Red ticket (Book 2 seats)
- Pay for the ordered movie ticket using the OVO e-wallet option as the payment method.
- Find the purchased QR Code from my ticket section.
SUCCESS INDICATOR
We measured three main indicators for the usability study which include:
- Time on task (time the user spent to do the task)
- SUS Score (A quantitative parameter for the prototype usability)
- Conversion rate (User success rate on doing the task)
STUDY RESULTS
We successfully collected 5 responses from different users for the study.
Each task’s conversion rate was recorded in the image below. Most tasks were successfully done by the users with tasks 1 and 2 having an indirect success recorded by Maze. This indirect success was recorded because some of the users were exploring and interacting with the available components in the study. This made Maze misread it as a misclick done by the users.
DETECTED BOUNCE RATE
The first task had 1 user bouncing from the process. Based on Maze’s recording, it was detected that the user had difficulties choosing a seat in the cinemas.
When the user was asked why they didn’t finish the task, they said that it was due to the ‘lack of images and abundance of text’ in the process which didn’t make too much sense to us.
Based on our findings we analyzed two reasoning that made the user bounce off the task.
- The flow to choose the seat is done in sequence from selecting ‘E5’ first and then ‘E6’.
- The task was not presented clearly to the user which made them stuck on the screen.
As to prevent things like this to happen in the future, we decided to have clearer feedback for the users by considering each possible flow in the prototype like giving feedback for the user when they select the ‘E6’ seat.
MAZE RECORDED USABILITY SCORES
Maze also provides usability scores on each of the tasks that were given with each score given to each screen used in a flow. Some low scores given by Maze were analyzed to determine the reasoning behind the lower scores given.
SYSTEM USABILITY SCALE (SUS) SCORE
We also collected each task’s usability scores to be calculated and totaled where we obtained a total of 93% Usability Score which proved that each intended function and feature of the prototype worked properly.
Now! What can we improve?
Overall, the application we designed was successful. Users were satisfied based on the usability studies we conducted. There were minor improvements that we believe can be made to ease the booking and payment process. The current improvement process that can be done were actually pretty minor as it only affects how the usability studies will perform.
With the design process finished, the redesigned product will be processed to be launched in the market. We hope that the design will be able to improve the experience of the users of M-Tix to book movie tickets easily. The launched design will be evaluated further at the later stage of development where we will identify what went well and what that didn’t work.
The design process will be done in the iteration process as there will be a lot of things that we can still improve on.
Retrospective….
Finally! It’s the end of the case study. We noticed that the study itself is far from perfect as there are a lot of things to improve on. Here are some of the feedback that we have obtained from the meeting with the PM and UI/UX team together.
What worked
- Communication between the PM team and UI/UX team members was done clearly
- The brainstorming process is done quickly
- We managed to finish all the required documents at the set deadline.
What didn’t work well
- It’s quite hard to obtain a specific user that fit our criteria
- We didn’t really consider the impact on the business aspect of the company with some of our ideas which we just noticed during the iteration process.
What can be improved
- Further communication can be improved between each member of the team
- Optimizing the research process and increasing our reach to more specific user segments
- Familiarize ourselves with using Figma tools to help design effectively
Closing Statements
Thank you so much for reading this case study! I hope you gained something from reading the study. Should you have anything you wanted to discuss together with me, feel free to do so!
