UIUX Case Study: KAI Access App Redesign

7 min readFeb 21, 2023

Overview

Kereta Api Indonesia Access is a train ticket booking application developed and published by PT Kereta Api Indonesia since 2014. KAI Access is an official application from PT KAI, and was released to meet the needs of passengers on long-distance, medium and local/commuter trains. However, as time went on there were several complaints that were deemed necessary to be resolved for the convenience of the user. after doing some research and also looking at reviews from playstore. Some of the reviews that have the most complaints include: order and payment flows. In this project, I tried to examine the problem more closely and elaborate on the approach, outputs and outcomes that were carried out throughout the refinement.

**Disclaimer**

Mixed languages (English and Bahasa Indonesia) and this is an exercise I do as an aspiring UI/UX enthusiast who likes to solve problems and address suitable solutions.

Details

Here are the details for this case study:

Product Name: Kereta Api Indonesia Access is a train ticket booking application.

Methods: Emphatize, Define, Ideate, Userflow, High Fidelity Design, and Prototype.

Timeline: Januari — Februari 2023

Tools: Figma, Figjam

Version Used: KAI Access 5.1.0

Objective

This case study focuses on:

Fix the KAI Access usability issues as best as possible
Increase application flexibility
Create a simpler look
Added an ewallet that didn’t exist before

Design Process

In terms of designing a product, there are several stages that need to be done. In this case study, the steps taken follow the basic stages in the Design Thinking process.

In this case I choose to use Design Thinking as design process approach. I believe with Design Thinking, I can focus on user experience and also can be useful to create innovations in product design. The Design Thinking Process consists of:

1 — Empathize

In this step, I delved deeper into KAI Access goals, user behavior, and user research to discover customers’ pain points. Due to time constraints, user research was conducted via user feedbacks from the play store and personal testing.

User Reviews

User Feedback From The Play Store:

While reading the reviews, I noticed that many people had issues with how cluttered each page is, particularly the registration page and payment process.

Personal Testing

For this approach, I am focusing on trying out the purchasing and payment flow and see how the current app handling this process. Then, I began by listing hypotheses of the problems based on my personal testing:

Payment Process. Payment processes often fail, especially the OVO & LinkAja! application frequent errors.
Payment Method. The choice of payment methods has a few options.
Time Out System. There is a time out system which makes the process more complicated because the user must enter data repeatedly when the network is bad.

2 — Define

In this step, I formulated the results of research that has been done in the empathize step into List of Pain Points and How Might We.

After defining pain points, I have to think about potential solution for them. There are several solution that I have created but I only need to choose one of them for next process. Normally, this potential solution are defined and get voted by other members of the project. But for this case, I choose it by myself. This potential solution called ‘How Might We’.

3 — Ideate

After defining potential solution for user’s pain point, I have to describe more details about the potential solution that I chose. This phase called solution idea. In this phase, I think about how to implement the solution as a feature on the mobile app that I designed.

Then, I created a Prioritization Idea Diagram based on priority needs that use scale from low to high in terms of user value and effort.

In the last phase of Ideate process, I have to make flowchart about how user could use this mobile app design. Simply known with Userflow. Userflow imitate the user action from the opening the app until the user task is done.

4 — Prototyping

After brainstorming ideas, created solution ideas, prioritizing ideas and user flow next is prototyping. In this step, I created Wireframe, Mockup, UI Style Guide and Prototype.

Wireframe

Before making a mockup, I made a wireframe first to get an idea of the basic outline of the design that I would be working on. The following is a wireframe of the redesign of the KAI Access application:

And then I will explain one by one the page of my design.

Ilustration image, describe this application for booking travel especially train.
Login, button to login page.
Regist, button to regist page.

Button back, button to return to previous page.
Button help, button to ask for help.
User phone number, phone number of the application user.
Button next, button for next page.

Button back, button to return to previous page.
Button help, button to ask for help.
OTP Code Option, Option to send OTP code.

Button back, button to return to previous page.
Button help, button to ask for help.
OTP Code, Fill in the OTP code that has been received.

Search Bar, Tell the user what activity was done recently.
Payment Order, Selected order.
Notification, Tell the user what activity was done recently.
Promotions, Information about promotions.
Ticket Reservation, To fill in tickets with the destination desired by the user.
Service Option, Available service options.
Latest Order, Quick access to the latest ticket orders.
Recommended destination, Recommendations for the most visited destinations by passengers.
Information, Information about KAI.
Nav Bar, Transition to another section.

Filter, Help users find search details of past transactions.
Previous Order, Previous order.

Order Detail, Shows the destination, the number of passengers and the date of departure.
Edit Detail, To edit destination details, number of passengers and departure date.
Filter, Helps users find the most appropriate search for trains.
Schedule Available, Available schedule options.

Detail Schedule, To show train details, departure schedules and destinations booked.
Passenger details, To show the passenger details of that train.
Detail Order, To display prices.
CTA, Button for next step.

Color info, To differentiate available seats, selected seats, available seats, and reserved seats.
Seats Available, Passenger seat layout.
CTA, Button for next step.

Departure Detail, Details of the train departure schedule.
Passenger Detail, Train Passenger Details.
CTA, Button for next step.

Destination, Shows the intended destination.
Detail Order, Show order details.
Payment Method, Available payment method options
CTA, Button for next step.

Ilustration Image, Illustrate a successful payment
CTA, Button for next step.

Detail Order, Shows details of train ticket payment.
Ticket Details, Show train order ticket.
Detail Passenger, Shows details of train passengers.

Mockup

Mock-up is a high-level representation of a product design. At this stage, we create a combination of styles, typography, colors, and others. After going through several stages of research and ideation, here is a mockup design for the redesign of the KAI Access application:

UI Style Guide

Here is the UI style guide that I created and used on the high-fidelity interface of this application.

Interactive Prototype

After doing Emphatize, Define, Ideate and create a mockup, Time for link every screen into a prototype in Figma, Prototype is the important things to do, every single detail transition makes memories to another, Concerning a lot of screen that must be upload, I just put down the link of prototype below:

Lesson Learned

I hope this design can solve the problem and can help users more easily use the KAI Access Application.

Thank you for taking the time to read this study case, I learned a lot while working on this case study! Of course, this case study is far from perfect, so feel free for all of you to provide input and comments for me so that I can become better. Connect with me on LinkedIn and Behance!