UI/UX Design Case Study: Improving M-Tix Mobile App
Hello everyone, I would like to share to you my project that I did. This project is brought by the problems that faced by several users. As I look through to the google playstore (which is the platform to download an app), I saw several users with the same difficulty. From this stage, I was determined to redesign the app from the design itself to the testing.
Overview
M-tix is an app to order a film ticket that has 10 million of downloader. This app is made for users who frequently watch the film in XX1 and Cinema 21. People usually use the app in order to get earlier ticket without queue in the cinema. This sometimes helps users to get the ticket when popular film released without bothering to get no ticket.
Problem Hypothesis
As M-tix help its users to get a prior ticket, however, there are several difficulties that faced by users, such as:
- Minimum a 100k to top-up balance
- Admin charges when top-up the balance and buy the ticket
- Option when top-up the balance
- Rating feature
- Refund ticket
Objective
With the problem hypothesis constructed, several objectives needed to pinpoint:
- Understand users’ behavior when using the application
- Discover users’ pain point when using the application
- Acknowledge users’ needs that still not fulfilled
- Understand users’ expectation to the application
- Understand users’ behavior to other competitor application
Methodology
With the difficulty of users encountered, I use four methodologies with the expectation to bring solution for users’ pain points, such as:
· Survey: Obtain a related users who will be as my interviewee to understand more about users’ difficulties
· In-depth Interview: To obtain users’ pain points on particular difficulty in using M-tix
· Competitive Analysis: Do a benchmarking between one app to another app that help me to create better solution
· Usability Testing: Do a testing with respondents that I have interviewed with the expectation of gaining insightful feedback
Sample Specification
Through the sample specification, I am able to gather a required users that assist me to understand users’ pain points as well as solve the problem with a better. I made the sample specification with the criteria such as:
I divided into two different criteria of respondents as it helped me to understand users’ experience in different app to use. As they use different app, this really helped me to do a benchmarking between M-tix app and competitor app.
Key Information Areas and Research Guideline
The key information and research guideline is contained of the topics that will be discussed during the interview session. This includes such as:
- User profile
- Users’ general behavior
- Users’ behavior when top-up balance
- Users’ behavior and expectation to the admin charges
- Users’ behavior and expectation to the top-up balance option\
- Users’ opinion with the rating feature
- Users’ opinion with the refund ticket
The topics helped me a lot to do an interviewee session with related users and understand in-depth regarding the users’ pain points when using the application.
The Timeline
This is the timeline that I have went through during the project. It took around 2–3 months to finish the project.
Research Process
This is the research process that I have done. I used design thinking framework during the project as it helped me a lot to run the project smoothly.
Empathize
During this stage, I tried to understand users’ difficulty when using the app. I mostly put myself in users’ shoes. This helped me to obtain the data of users’ pain points.
Analysis
To acknowledge what users’ difficulty, I do some of research and analysis. Therefore, in order to know users’ pain points, I looked through in-depth to the review and feedback within Playstore. As M-tix has 10 million+ downloaders, there are variety reviews and feedbacks from users who mostly from Indonesia. After I dive in deeper to the reviews and feedbacks of its users, they definitely have similar users such as a minimum a 100k top-up balance, admin charges when top-up the balance and purchase the ticket, the option to top-up the balance, rating feature, and refund ticket. These difficulties that I found is from the reviews and feedbacks of related users within Play store.
Survey
Before I conducted the interview session with related users, I did the survey to obtain respondents. I did the screening to the right candidates who will be as my users to be interviewed. The questions were about the user profile, general behavior when using the M-tix app, and the invitation to interview.
Define
In this stage, I have found the difficulties or pain points encountered by mostly related users.
In-depth Interview
After I did a survey, I conducted an interview with 6 related users that have met with the required of criteria. The interview session is held around 10–15 minutes. The interview mostly held by via call in Instagram and meet physically with the corresponding users. The candidates were an M-tix users and from competitor users (Tix.id). Through the interview session, it helped me a lot since it gave me an insight. This insight will assist me to provide better solution that improve users’ experience.
Main Findings
Affinity Diagram
After the interview session conducted, I tried to summarize the insight that I obtained.
User Persona
I tried to create the user persona between M-tix users and competitor users (Tix.id)
Competitive Analysis
I did the competitor benchmarking between M-tix app and Tix.id app. Below is the comparison between M-tix app and tix.id app.
Users Journey
I also made a M-tix user persona. I made the journey from user enter the M-tix app to when users decide to do a transaction. This flow really helped me to find what users’ experienced when using the app. Besides, I also found what users’ difficulties as well as the opportunity to solve those problems.]
The Takeout
After I have conducted interview with corresponding users, I realized that I’m not capable to decrease the minimum top-up as well as admin charges when users were trying to top-up balance and purchase the ticket. It is because those aspects are company’s privilege. As such, this condition has led me to take out the variable.
Way Forward
From the interview session that has been conducted there are several aspects that will improve app’ users’ experience, such as:
· First, M-tix should improve its UI Design. This will help the app to obtain more downloaders or users.
· Second, M-tix should add more option to top-up the balance. This situation will improve its users’ experience.
·Third, M-tix should add rating feature with the recommended film feature. It helps users to assess whether the film is worth to watch or not. Besides, users able to rate and recommend the film to other users whether the film is worth to watch or not.
·Fourth, M-tix should add refund ticket feature. This will benefit users who sometime get sudden meetings or matters.
Ideate
The previous stage (define) has led me to create users flow, information architecture (IA), design system, wireframe, and mockup (25%).
Actionable insight
User Flow
This is the user flow that I have made to bring better solution to M-tix users.
Information Architecture
This is the information architecture that I’ve made.
Design System
After created User Flow as well as Information Architecture (IA), design system is also created. The design system helped me to determine from the color, typography, to the UI kit elements that I will be used during the creation of the product.
Existing App
To built the wireframe and mockup, I do basic research of existing M-tix app. This is the current design of M-tix app.
Wireframe
This is the wireframe I’ve made that helped me to build mockup as well as prototype. The wireframe build is expected to improve users’ experience.
Mock Up
After built the wireframe, I created low fidelity mockup. This helped me to build the product.
Prototype
Want to know more? Click here
Test
After the prototype built, I tested my prototype to the 6 corresponding users. As the actionable insight, there are three main areas that I improved such as:
Solution 1: Add more option to top-up the balance
As the options to top up balance is still deficient, I added more an option to top-up the balance. As I saw through the reviews within Google Playstore, several users have complained that they experienced difficulties when top-up the balance as the option is still deficient. They need mor options to top-up their balance. By depending users that I have interviewed, they need Gopay and Shopeepay to be added in the options. As such, I have designed the product based on the insight obtained from users.
Solution 2: Add rating feature with recommended film feature
I also added the rating feature with recommended film feature. This idea is came up by the reviews of users within the Google Playstore. I also have interviewed with 6 corresponding users, and the majority of them said that rating feature is very important as it helped them to decide whether the film is worth to watch or not. Subsequently, I built the product based on the insight acquired from users who I’ve interviewed.
Solution 3: Refund ticket
Besides, I also added refund ticket. Some of users may sometimes couldn’t watch the film in the same date because of particular sudden matters. With the pain points faced by users, I also built product based on the insight obtained from the users.
Process
I asked to the 6 corresponding users to firstly use the M-tix app with the existing design, afterward they test the current product that I’ve redesigned. I asked to do several action based on the scenario I’ve made.
Feedback and Insight
From the testing process, I received several feedback and insight. I summarized those insight and feedback.
Insight 1
Insight 2
Insight 3
What they said?
I summarized the feedback of 6 corresponding users regarding the current design I’ve made. Most of them said that the design I’ve made is better than the existing app. They said that the design is more understandable dan easy to use than the previous one.
Iteration
What I have learned from the project?
M-tix is a booking film ticket app that encourage users to buy the ticket earlier than other audience. Since the app is under XX1 and Cinema 21, some of people may order the ticket priorly to avoid the unwanted event. However, there are a lot of users who experienced difficulties when using the app. From the difficulties encountered by users, this situation has led me to improve M-tix users’ experience by providing solutions.
During the project, I have learnt so many things especially how to put myself in users’ shoes. The empathy is the fundamental is the fundamental of UI/UX design that I adhere to during run the project. Besides, the duration that required me to finish the project is also not easy, as there are some obstacles during run the project. However, through the project conducted, it really benefits me once I have heavier project.
