UI / UX Case Study : Redesign Tiketux App

Shafira Annisa
6 min readFeb 7, 2022

Disclaimer : This project is the part of UX Bootcamp held by ProductZilla for the purpose of my final project. This project doesn’t liaise with Tiketux company at all.

Introduction

Hi good people! I am Shafira Annisa Ridmadhani and I am taking my early steps in learning UI / UX field. I am seeking an opportunity to gain more insight in the field of UI / UX Design. So, here I share my final project — and also my first case study making.

Overview

Tiketux is an online booking and payment service for travel tickets in Indonesia. Tiketux ​​was created to be able to serve travel users in making transactions easily and quickly, according to the needs of the Indonesian people today. Tiketux ​​provides convenience in payment in several ways, either through ATMs, Internet Banking, or other banking services at more than 50 banks. Tiketux was created to understand the busyness and needs of the Indonesian people, with the hope of providing maximum convenience for the customers — in accordance with its tagline “Just click and go”.

Design Process

In making this project, I went through design thinking approach for systematically identifying the user needs in order to ideate the solution that given lasting value for the customer.

Image Source : playroom.rocks

Empathize

The first thing to do at this phase is looking for any problems regarding Tiketux usage experience by reading its reviews. Also, I’ve conducted a quantitative research by distributing the questionnaire for gaining more insight and gathered the user’s background.

Tiketux is only available on Play Store. Hence, I’ve put the problems together only based on Play Store review section.

Tiketux’s Review on PlayStore

And below is the result of questionnaire that I’ve distributed.

Questionnaire Result from Google Form

Problem Definition

Based on the background that collected from questionnaire, I defined the user’s type to identify their problems, needs and a slight of their behavior.

After I dive deep into what’s going on in the actual process, I put every problems on the notes and organized them into the relevant groups — or it could be called “Affinity Diagram”.

Affinity Diagram

Ideation

I’ve came up with the problems on hand. Next is how to get the amount of possibilities solutions to solve the problems. In this phase, I conducted ‘How Might We’ method to bring out a lot of solution that might be opportune to execute (meet the needs).

HMW Notes

Prototyping

In this phase, I make a deliverable solution, started by conducting Information Architecture, User Flow, and a high fidelity prototype of Tiketux based on the result of ideation process.

Below is the Information Architecture. The architecture is quite different from current architecture. Some additional information are applied, according to suggested solution.

Information Architecture

Here is the suggested user flow. It’s not much different from the current flow.

User Flow

And here is the prototype of new design. The changes before & after

Onboard Screen. Redesign just as additional, not related to the problem exist
Login Screen. Redesign just as additional, not related to the problem exist
Home Screen. Promo in banner was removed and last trip list is added
Promotion Screen. Instead of having unclicked banner in homescreen and having trip deals in one menu, just put them together in one menu
Booking Order Screen. The copy VA number feature is added in the new design
Pick a departure screen. In the current app, the zero available seat would be appear. And the price is a lil bit confusing (in the fact, only a price applied)
Choose a seat screen. Redesign just as additional, not related to the problem exist
Payment method screen. Redesign just as additional, not related to the problem exist
Booked Order Screen. OTP was shown in app directly
History Screen. New menu added based on the solution from ideation process

Prototype you might try on.

Testing

For testing the experience of new design that I’ve made, I conducted Usability Test (UT) method. The UT was conducted to evaluate new design on activities to order a ticket, view upcoming trip, and view history of order. The testing activity was carried out online using Zoom, participants share their screens when using the prototype. The tasks are :

  1. Order a ticket from Jakarta to Bandung
  2. View the upcoming trip / booked order
  3. View the history of order
  4. View the current promo

UT document is attached in the link below :

https://docs.google.com/spreadsheets/d/1blkEtKJc8i2r0e8TPXIrhLUaW8gFiHjQjlAhMSHxTBo/edit?usp=sharing

The testers successfully passed all the cases. However, there are some notes to improve.

  1. OTP should have a security to show (maybe passcode)
  2. The pool name in Upcoming Trip screen is way too small
  3. Instead of put payment date, just put Payment Status in Upcoming Trip
  4. The navbar would be more informative if it has label of menu
  5. Merge the upcoming trip screen with the history screen and just make it 2 different section (by tab or whatever)

As the testing result given, all the testers were successfully finished the tasks. The satisfaction that scored by SEQ showed that the level of convenience is very high (average 7–8).

Conclusion

There are some problems that exists in the current app — since I use the app too. Quantitative method was chosen to collect and investigate the problem. From the survey that have been distributed and tracking the reviews from Play Store, 80% said that they have problem in copying virtual account number. Another 10% complaint that they need to see order history. While the rest is complaint about OTP that they can’t directly get through the app and promo banner that can’t be clicked.

After the problem was collected, I did the grouping of problem by relevance. Next is put the solving priority for each group. The simplicity comes first after clarity. So, I dig the possible solution for each pain point by doing HMW. Actually, the pain point tends to have implicit solution (can’t do more about that). Therefore, I just brought that implicit solution to the table.

Afterward, I set the solution for the pain points. Started from arranging the structure of information (how would the information is deliver to the user), then continued by arranging the user flow.

The plan was already mapped out. Then, I put it into deliverable solution, called Prototype. To make sure that my design would release the pain points, I did Usability Testing. It was tested by 4 participants. All participants could pass all the tasks with the satisfaction level that reached the high score.

With the simplicity concept, Tiketux is a compromising platform for those who wants to order travel ticket fast in the middle of hectic schedule. Hopefully, this project can be referenced as a solution for helping the existing problems.

Thanks to Productzilla Academy for the superb experience and guidance in my early steps in UI / UX!

--

--