Dani Alief M
Dani Alief M

Revamp KAI Access - Ordering tickets and Reimbursement to Company journey

UX Case Studies

Revamp KAI Access - Ordering tickets and Reimbursement to Company journey

UX Case Studies

Project Overview

Project Overview

This project is an update to the KAI Access application design a mobile application for trains in Indonesia which is currently used for ticket booking features. Our UI/UX design focus in this project was to overcome the obstacles that users faced during the ticket booking process. We have gone through the design stage using the double diamond method, starting from problem identification to developing potential solutions to improve the user experience in using the KAI Access application. This is a project resulting from team collaboration at the "DNA Portfolio Pro Batch 3" event organized by Vixturistic Studio and the VIX Heroes Design community.

This project is an update to the KAI Access application design a mobile application for trains in Indonesia which is currently used for ticket booking features. Our UI/UX design focus in this project was to overcome the obstacles that users faced during the ticket booking process. We have gone through the design stage using the double diamond method, starting from problem identification to developing potential solutions to improve the user experience in using the KAI Access application. This is a project resulting from team collaboration at the "DNA Portfolio Pro Batch 3" event organized by Vixturistic Studio and the VIX Heroes Design community.

My Role

My Role

UX Research & UI/UX Designer

UX Research &

UI/UX Designer

UX Research &

UI/UX Designer

Responbilities

Responbilities

I have responsibilities as user research in this project such as collecting data from KAI Access reviews on Google Play, conducting data from user interviews, conducting usability testing, and sometimes helping with the Hi-Fi design process and created style guide documentation.

I have responsibilities as user research in this project such as collecting data from KAI Access reviews on Google Play, conducting data from user interviews, conducting usability testing, and sometimes helping with the Hi-Fi design process and created style guide documentation.

Timeline

Timeline

December 2023 - January 2024

December 2023 - January 2024

Tools

Tools

Figma

Maze

Google Docs

Google Meet

Figma

Maze

Google Docs

Google Meet

Design Process

Design Process

Double Diamond source by Fares Farhan on Figma Community

Double Diamond source by Fares Farhan on Figma Community

01

01

Discover

Discover

User Problem

User Problem

Secondary Research - Feedback From Review on PlayStore

Secondary Research - Feedback From Review on PlayStore

Secondary research conducted by performing collecting user feedback from the PlayStore of KAI Access

Secondary research conducted by performing collecting user feedback from the PlayStore of KAI Access

NP

Novia N P

25/11/2023

Last Transaction Ticket History

Transaction history is hard to find, which is useful for reimbursement to the company

ZY

Zaenul Yasni

07/12/2023

Price Details Not One Frame, User Interface too Crowded

If you want to add other features, it's up to you, it's up to you. The new UI display is too busy and the name and price of the KAI ticket are not in one frame.

MU

M. Mulsichul Umam

23/11/2023

Cannot see tickets that have been purchased

Can't see tickets that have been purchased, logged out and can't even log in. I've reinstalled the application and I can't, even though I've already paid for the ticket.

HK

Hendi Kurniawan

01/12/2023

Ticket purchasing time is limited only 5 minutes

The purchase time is extended by at least 20 minutes more so that the ticket purchase process is not time limited.

NP

Novia N P

25/11/2023

Last Transaction Ticket History

Transaction history is hard to find, which is useful for reimbursement to the company

ZY

Zaenul Yasni

07/12/2023

Price Details Not One Frame, User Interface too Crowded

If you want to add other features, it's up to you, it's up to you. The new UI display is too busy and the name and price of the KAI ticket are not in one frame.

MU

M. Mulsichul Umam

23/11/2023

Cannot see tickets that have been purchased

Can't see tickets that have been purchased, logged out and can't even log in. I've reinstalled the application and I can't, even though I've already paid for the ticket.

HK

Hendi Kurniawan

01/12/2023

Ticket purchasing time is limited only 5 minutes

The purchase time is extended by at least 20 minutes more so that the ticket purchase process is not time limited.

Secondary Research - Interview User

Secondary Research - Interview User

User interview conducted by interviewing user from the experience of user who used KAI Access and user who has never used

User interview conducted by interviewing user from the experience of user who used KAI Access and user who has never used

View Full Question in here

Interview User Result

Interview User Result

Pain Point

Pain Point

We categorize pain point interviews based on the steps of booking train tickets from start to finish

We categorize pain point interviews based on the steps of booking train tickets from start to finish

Legend:

Legend:

KAI Access User

KAI Access User

Non KAI Access User

Non KAI Access User

choose schedule & ticket

choose schedule & ticket

complete passenger details

complete passenger details

Payment

Payment

After Payment

After Payment

Customer Service

Customer Service

Others

Others

Competitive Analysis

Competitive Analysis

We conducted competitive research on several applications, but the ones that we used as reference is Traveloka and Tiket.com

We conducted competitive research on several applications, but the ones that we used as reference is Traveloka and Tiket.com

Traveloka

Key Features

  1. Welcome Greetings

  1. Last Search

  1. Change Date when Selecting Ticket

  1. Easy Flow for Booking Ticket

  1. Displayed Tickets One by One

Drawbacks

  1. Difficult to Add Passengers

Can Be Borrowed

  1. Displayed Tickets One by One

  1. Change Date when Selecting Ticket

Tiket.com

Key Features

  1. Temporary Section in Home Page after Order Ticket

  1. Last Search

  1. One Click Add Passengers

  1. Easy Flow for Booking Ticket

  1. Displayed Tickets One by One

  1. Change Search (Station, Date, Passengers)

Drawbacks

  1. No Welcome Greetings

Can Be Borrowed

Temporary Section in Home Page after Order Ticket

  1. Temporary Section in Home Page after Order Ticket

  1. Last Search

  1. Last Search

  1. Displayed Tickets One by One

  1. Displayed Tickets One by One

  1. Change Search (Station, Date, Passengers)

  1. Change Search (Station, Date, Passengers)

Problem, Goals, & Success Metrics

Problem, Goals, & Success Metrics

After conducting secondary research, which involved exploring Google Play Store ratings and conducting user interviews, we identified the main issues and determining the goals

After conducting secondary research, which involved exploring Google Play Store ratings and conducting user interviews, we identified the main issues and determining the goals

Problem

  1. The many additional services besides ordering train tickets make users less focused on the main features and feel uncomfortable.

  2. Users find it difficult to distinguish between ticket class categories and the current display to choose tickets, which can be confusing. This makes users feel uncomfortable when ordering tickets.

  3. Users feel they need to go through several stages to find a ticket in the application, resulting in wasted time and less efficiency when exchanging train tickets at the station.

Goals

Creating the KAI Access application that ensures comfort for users from booking tickets until going on a trip with train (End-to-End Process).

Success Metrics

  1. Every assigned task results in a Average task completion rate between 70% - 100%.

  2. Final Usability score with Maze between 70 - 100.

Problem

  1. The many additional services besides ordering train tickets make users less focused on the main features and feel uncomfortable.

  2. Users find it difficult to distinguish between ticket class categories and the current display to choose tickets, which can be confusing. This makes users feel uncomfortable when ordering tickets.

  3. Users feel they need to go through several stages to find a ticket in the application, resulting in wasted time and less efficiency when exchanging train tickets at the station.

Goals

Creating the KAI Access application that ensures comfort for users from booking tickets until going on a trip with train (End-to-End Process).

Success Metrics

  1. Every assigned task results in a Average task completion rate between 70% - 100%.

  2. Final Usability score with Maze between 70 - 100.

02

02

Define

Define

Specific Problem to Solve

Specific Problem to Solve

User Persona

User Persona

Who will use this feature?

Who will use this feature?

This feature is used by office employees who often make business trips out of town by train and need an easy ticket booking feature that can be used to make reimbursements to their office after completing the trip.

This feature is used by office employees who often make business trips out of town by train and need an easy ticket booking feature that can be used to make reimbursements to their office after completing the trip.

Persona

Employee

Anna (28)

Extrovert Secretary

Anna works as a secretary at a company which requires her to schedule trips and purchase travel tickets for company employees for business/office matters.

Demographics

  1. Live in Indonesia [Pulau Jawa, Sumatera (Medan & Padang)]

  1. 20 - 35 years old

  1. Office Employees (Managerial & Employees)

Criteria

  1. Office employees who need to take the train for work purposes

Frustations

  1. Doesn't like complicated things when it comes to transportation trips

  2. Don't like the complicated process of ordering & paying for transportation

Main Goal

  1. Want to travel using transportation easily

  2. Want to order transportation tickets easily

Persona

Employee

Anna (28)

Extrovert Secretary

Anna works as a secretary at a company which requires her to schedule trips and purchase travel tickets for company employees for business/office matters.

Demographics

  1. Live in Indonesia [Pulau Jawa, Sumatera (Medan & Padang)]

  1. 20 - 35 years old

  1. Office Employees (Managerial & Employees)

Criteria

  1. Office employees who need to take the train for work purposes

Frustations

  1. Doesn't like complicated things when it comes to transportation trips

  2. Don't like the complicated process of ordering & paying for transportation

Main Goal

  1. Want to travel using transportation easily

  2. Want to order transportation tickets easily

Persona

Employee

Anna (28)

Extrovert Secretary

Anna works as a secretary at a company which requires her to schedule trips and purchase travel tickets for company employees for business/office matters.

Demographics

  1. Live in Indonesia [Pulau Jawa, Sumatera (Medan & Padang)]

  1. 20 - 35 years old

  1. Office Employees (Managerial & Employees)

Criteria

  1. Office employees who need to take the train for work purposes

Frustations

  1. Doesn't like complicated things when it comes to transportation trips

  2. Don't like the complicated process of ordering & paying for transportation

Main Goal

  1. Want to travel using transportation easily

  2. Want to order transportation tickets easily

User Journey Map

User Journey Map

We try to organize the stages that users go through into a user journey map and turn the problems found into challenges and actionable statements with HMW (How Might We) & Ideas. We use Anna as Persona to this Journey Map.

We try to organize the stages that users go through into a user journey map and turn the problems found into challenges and actionable statements with HMW (How Might We) & Ideas. We use Anna as Persona to this Journey Map.

Prioritization Matrix

Prioritization Matrix

The ideas created at the Scenario Mapping stage then used the Solution Matrix method to prioritize the ideas and group them based on their complexity.

The ideas created at the Scenario Mapping stage then used the Solution Matrix method to prioritize the ideas and group them based on their complexity.

03

03

Develop

Develop

Potential Solution & Approaches

Potential Solution & Approaches

Expected User Flow

Expected User Flow

User Flow is the steps by the user when using the KAI Access to complete a task. We created a user flow based on a prioritization matrix, and the results are divided into 3 main flows namely:

User Flow is the steps by the user when using the KAI Access to complete a task. We created a user flow based on a prioritization matrix, and the results are divided into 3 main flows namely:

  1. Order Train Ticket

  2. Exchange Tickets at the Station

  3. Download proof of transaction for reimbursement to the company

  1. Order Train Ticket

  2. Exchange Tickets at the Station

  3. Download proof of transaction for reimbursement to the company

  1. Order Train Ticket

  2. Exchange Tickets at the Station

  3. Download proof of transaction for reimbursement to the company

Flow 1 : Oder Train Tickets

Flow 1 : Oder Train Tickets

Flow 1 : Oder Train Tickets

Flow 2 : Exchange Tickets at the Station

Flow 2 : Exchange Tickets at the Station

Flow 2 : Exchange Tickets at the Station

Flow 3 : Download proof of transaction for reimbursement to the company

Flow 3 : Download proof of transaction for reimbursement to the company

Flow 3 : Download proof of transaction for reimbursement to the company

Wireframe

Wireframe

A Wireframe is a scheme or framework that can provide a rough (low-fidelity) description of each page contained in a KAI Access before entering the high fidelity stage

A Wireframe is a scheme or framework that can provide a rough (low-fidelity) description of each page contained in a KAI Access before entering the high fidelity stage

A Wireframe is a scheme or framework that can provide a rough (low-fidelity) description of each page contained in a KAI Access before entering the high fidelity stage

Style Guideline

Style Guideline

We create style guide to help us focus and consistent with the design

We create style guide to help us focus and consistent with the design

Style Guideline

Font

Inter

Title

Large Title

Semi Bold, 24/32px

Title

Semi Bold, 20/28px

Label

Regular

Regular, 16/24px

Semi Bold

Semi Bold, 16/24px

Texlink

Regular, 16/24px

Strike

Regular, 16/24px

Body

Regular

Regular, 14/20px

Semi Bold

Semi Bold, 14/20px

Texlink

Regular, 14/20px

Strike

Regular, 16/20px

Color

Primary

Secondary

Neutral

Success

Danger

Warning

Component

PRIMARY BUTTON

SECONDARY BUTTON

DISABLED BUTTON

PRIMARY BUTTON

SECONDARY BUTTON

DISABLED BUTTON

PRIMARY BUTTON

SECONDARY BUTTON

DISABLED BUTTON

PRIMARY BUTTON

SECONDARY BUTTON

DISABLED BUTTON

Icon

Solid

Outline

04

04

Deliver

Deliver

Feasible Solution

Feasible Solution

High-Fidelity Design

High-Fidelity Design

Try The Prototype

Try The Prototype

Usability Testing

Maze Usability Score (MAUS)

The method that we use to carry out usability testing this time is to use the MAUS (Maze Usability Testing) as an assessment benchmark

Respondent :

  1. 7 people (Criteria same as User Persona (Anna’s Persona)

  1. 4 Respondent who have used KAI Access

  1. 3 Respondent who have never used KAI Access

Task 1

Order train tickets

You are an office employee in the city of Surabaya. You have been assigned by your superior to make an official trip to the city of Jakarta using the train on the route from Surabaya Gubeng Station to Pasar Senen Station on December 14 2023. with an economy class ticket & a ticket price of no more than IDR 300,000 per person. You make payments using Bank Mandiri. How do you do this using the KAI Access application?

89

7

TESTER

44.0%

MISCLICK RATE

217.6S

AVG DURATION

100%

AVG SUCCESS

0.0%

AVG BOUNCE

Insight

In the prototype that we made, the user must click on the recommended station section. But based on Heatmap, users more often use the search bar to search for train stations.

Task 2

Exchange Tickets at the Station

You have successfully ordered a train ticket and want to exchange the ticket using the KAI Access app at the station. How are you going to do that?

95

7

TESTER

37.5%

MISCLICK RATE

13.1S

AVG DURATION

100.0%

AVG SUCCESS

0.0%

AVG BOUNCE

Insight

According to Heatmap, users check tickets more frequently in the “Transaksimu” Navigation bar

Task 3

Download transaction proof for reimbursement to the company

You have successfully ordered a train ticket and want to exchange the ticket using the KAI Access app at the station. How are you going to do that?

89

7

TESTER

36.4%

MISCLICK RATE

9.1S

AVG DURATION

100.0%

AVG SUCCESS

0.0%

AVG BOUNCE

Insight

The user experiences problems when exchanging/using train tickets at stations, because she is used to checking "Transaksimu", so she tries to click it. He didn't know that there was already a temporary "Transaksi terakhirmu" widget feature at home to make her task easier

91

Maze Usability Score

These are the reshold we use to measure the usability score :

High : 80 - 100

Medium : 50 - 80

Low : 0 - 50

We got a maze usability score of 91 from the average score of task 1 to task 3 which is the Maze Usability Score is High.

Feedback

This is feedback from the results of the usability testing that we have conducted :

  1. When I wanted to exchange or use a ticket at the airport, because I was used to checking in "Transaksimu", I tried clicking on it. As it turned out, I discovered that the information was already on the homepage.

  1. In the initial stages of choosing a station, my attention was mainly drawn to the name of the city. For example, the Surabaya station highlights "Surabaya" in its appearance, while the Pasar Senen station highlights "Pasar Senen". For the other parts, everything is easy to understand. It's just that when choosing a chair, I didn't focus enough.

  1. Just a little feedback for tickets that have been purchased (which are at home) to make them look like a card when the ticket has been used. Because before I thought about it, with a display like that, maybe I'm not used to it, but suggestions can be made the same as when the ticket has been used, just different from the badge. But overall it's really cool!!!!!!!!!

Usability Testing

Usability Testing

Maze Usability Score (MAUS)

Maze Usability Score (MAUS)

The method that we use to carry out usability testing this time is to use the MAUS (Maze Usability Testing) as an assessment benchmark

The method that we use to carry out usability testing this time is to use the MAUS (Maze Usability Testing) as an assessment benchmark

Respondent :

Respondent :

7 people (Criteria same as User Persona (Anna’s Persona)

  1. 7 people (Criteria same as User Persona (Anna’s Persona)

  1. 7 people (Criteria same as User Persona (Anna’s Persona)

4 Respondent who have used KAI Access

  1. 4 Respondent who have used KAI Access

  1. 4 Respondent who have used KAI Access

3 Respondent who have never used KAI Access

  1. 3 Respondent who have never used KAI Access

  1. 3 Respondent who have never used KAI Access

Feedback

Feedback

This is feedback from the results of the usability testing that we have conducted :

This is feedback from the results of the usability testing that we have conducted :

  1. When I wanted to exchange or use a ticket at the airport, because I was used to checking in "Transaksimu", I tried clicking on it. As it turned out, I discovered that the information was already on the homepage.

  1. When I wanted to exchange or use a ticket at the airport, because I was used to checking in "Transaksimu", I tried clicking on it. As it turned out, I discovered that the information was already on the homepage.

  1. In the initial stages of choosing a station, my attention was mainly drawn to the name of the city. For example, the Surabaya station highlights "Surabaya" in its appearance, while the Pasar Senen station highlights "Pasar Senen". For the other parts, everything is easy to understand. It's just that when choosing a chair, I didn't focus enough.

  1. In the initial stages of choosing a station, my attention was mainly drawn to the name of the city. For example, the Surabaya station highlights "Surabaya" in its appearance, while the Pasar Senen station highlights "Pasar Senen". For the other parts, everything is easy to understand. It's just that when choosing a chair, I didn't focus enough.

  1. Just a little feedback for tickets that have been purchased (which are at home) to make them look like a card when the ticket has been used. Because before I thought about it, with a display like that, maybe I'm not used to it, but suggestions can be made the same as when the ticket has been used, just different from the badge. But overall it's really cool!!!!!!!!!

  1. Just a little feedback for tickets that have been purchased (which are at home) to make them look like a card when the ticket has been used. Because before I thought about it, with a display like that, maybe I'm not used to it, but suggestions can be made the same as when the ticket has been used, just different from the badge. But overall it's really cool!!!!!!!!!

05

05

Iteration

Iteration

Problem & Solution

Problem & Solution

06

06

Conclusion

Conclusion

Result & Things we can learned

Result & Things we can learned

Result

Result

  1. From the usability testing using Maze, we obtained 100% average task completion rate for Task 1, Task 2, and Task 3

  1. From the usability testing using Maze, we obtained 100% average task completion rate for Task 1, Task 2, and Task 3

  1. From the usability testing using Maze, we obtained 100% average task completion rate for Task 1, Task 2, and Task 3

  1. From the result of the MAUS (Maze Usability Score) data that has been carried out on usability testing Revamp prototype KAI Access, we got a maze usability score of 91 from the average score of task 1 to task 3. Therefore, the KAI Access Revamp Maze Usability Score included in the category High.

  1. From the result of the MAUS (Maze Usability Score) data that has been carried out on usability testing Revamp prototype KAI Access, we got a maze usability score of 91 from the average score of task 1 to task 3. Therefore, the KAI Access Revamp Maze Usability Score included in the category High.

  1. From the result of the MAUS (Maze Usability Score) data that has been carried out on usability testing Revamp prototype KAI Access, we got a maze usability score of 91 from the average score of task 1 to task 3. Therefore, the KAI Access Revamp Maze Usability Score included in the category High.

  1. We also did some iterations from our proposed design

  1. We also did some iterations from our proposed design

  1. We also did some iterations from our proposed design

While redesigning the KAI Access revamp project, things we learned :

While redesigning the KAI Access revamp project, things we learned :

  1. Focus on the main problems that exist, by creating a proposed solution based on pain points that have been searched for based on user reviews in the application and obtained from users through user interviews, so that the solution we try to create can overcome the user's problems.

  1. Focus on the main problems that exist, by creating a proposed solution based on pain points that have been searched for based on user reviews in the application and obtained from users through user interviews, so that the solution we try to create can overcome the user's problems.

  1. Focus on the main problems that exist, by creating a proposed solution based on pain points that have been searched for based on user reviews in the application and obtained from users through user interviews, so that the solution we try to create can overcome the user's problems.

  1. A good product must have uniqueness and value that is different from similar applications and can solve user problems.

  1. A good product must have uniqueness and value that is different from similar applications and can solve user problems.

  1. A good product must have uniqueness and value that is different from similar applications and can solve user problems.

  1. Solving user issues doesn't always require removing existing features; it can also be achieved by simplifying or making them more straightforward.

  1. Solving user issues doesn't always require removing existing features; it can also be achieved by simplifying or making them more straightforward.

  1. Solving user issues doesn't always require removing existing features; it can also be achieved by simplifying or making them more straightforward.

  1. Conducting design iterations is necessary for the product to become even better than before

  1. Conducting design iterations is necessary for the product to become even better than before

  1. Conducting design iterations is necessary for the product to become even better than before

Need a project?

Let’s talk.

@ 2024 Copyright Dani Alief M. All rights reserved

Need a project?

Let’s talk.

@ 2024 Copyright Dani Alief M. All rights reserved

Need a project?

Let’s talk.

@ 2024 Copyright Dani Alief M. All rights reserved

Need a project?

Let’s talk.

@ 2024 Copyright Dani Alief M. All rights reserved