KAI Acces Redesign

Bachelor Final Project

UI / UX / PROTOTYPING / USABILITY TESTING /

ILLUSTRATOR / PHOTOSHOP / JUSTINMIND

2017 - 2018

Vertical Line 2

As part of my bachelor’s degree, I undertook a project about UX and wrote a Thesis about Evaluation and Improvement of KAI Access App using Usability Testing.

KAI Access is the Official Mobile Application from PT. Kereta Api Indonesia to make it easier for people to get information and order train tickets online. KAI Access competes with other train ticket booking apps such as Traveloka, Tiket.com, and others. One of the advantages of KAI Access is the E-Boarding pass feature to perform online check-in without the need to go to a boarding pass printing machine.

I did an application evaluation using Usability Testing and made a proposed improvement by making it into a high-fidelity prototype.

Cover Page 2
Design Process

User Interviews

To understand the problems that exist within KAI Access, I did an observation by reading the comments section in the Google Play Store page of the KAI Access App.  Other than reading the comments section, I also did interviews with some of its users.

Usability Testing

In order to, fully grasp the user’s needs and insight a little more, I used Usability Testing on five users with tasks based on the features that exist on the KAI Access app. It is from this Usability Testing that I also measure the UX Metrics for the task completion rate and the time completion rate.

Kompilasi-Usability-Testing

Some of recordings of screen activity during usability testing

Results

  • None of the users could find the button to save passenger data. The button is located within the account menu and is hard to find.
  • None of the users unselected the assigned seat before changing their seat number. Users have to unselect the seat number that’s assigned before selecting their preferred seat number.
  • In one of the tasks, some of the users chose the wrong e-ticket rather than the one told to do in the task scenario.
  • Users could not find the location of the payment method information. Its actual location is below the e-ticket page, and some of the users did not scroll down to the bottom of the e-ticket page so they could not find it.
  • Users couldn’t find the e-boarding pass menu. Some users thought that the barcode of the e-ticket was the same as the e-boarding pass. The menu itself is located on the bottom of the e-ticket page.
  • On the promo and e-magazine pages, users find it hard to open said pages because of the limited tap area.

Questionnaire

Other than Usability Testing, I also did more evaluations using the System Usability Scale (SUS) to see the users’ rating subjectively regarding the satisfaction and learnability of the KAI Access app. In addition, I sent out Technology Acceptance Model (TAM) questionnaires (Developed by Davis) that measures technology acceptance to measure usefulness of KAI Access app.

Pain Points

Pain Point 1:  Saving Passengers Data

  • Users often thought that adding passengers has to be done when booking a ticket.
  • The location of the button is hard to find and the shape of the button doesn’t portray its function.

Pain Point 2: Selecting Passenger Seat

  • No heads up to the users that says that they have to unselect a seat number to select their preferred seat numbers
  • When choosing a seat number, there is a pop up information that shows they cannot choose the seat and they have to unselect a seat first. Users have to find the location of the system-assigned seat and railway coach, and unselect it.

Pain Point 3: E-ticket list are confusingly mixed together.

  • After booking a train ticket, the corresponding e-ticket is on the top part of the My Trips page and is on the same page with previously bought e-tickets.
  • On the My Trips page there are a bunch of e-tickets mixed in that consists of unpaid, paid, and completed trips e-tickets.

Pain Point 4: Opening Payment Information

  • The payment information page will pop up after the user has finished booking a train ticket. However, users found it hard to re-open the page.
  • Users could not find the location of the button because it was located below the e-ticket and users did not scroll down to the bottom of the e-ticket page.

Pain Point 5: Showing E-boarding Pass

  • Users could not find the location of the button because it was located below the e-ticket and users did not scroll down to the bottom of the e-ticket page.
  • Users could not tell the difference between the number and the barcode of the e-ticket and the number and QR-Code of the e-boarding pass.
  • The E-boarding pass was very useful for users that were in a hurry.

Pain Point 6: Searching for Promo Information

  • The tap area on the promo information page was only on the title of the promo information. Meanwhile the picture of promo couldn’t be pressed

Pain Point 7: Opening E-magazine

  • On the E-magazine page, there is a list of each E-magazine where the button to open an E-magazine is small and is located on the right of each E-magazine.
  • Users often tap on the picture or the box on the list of E-magazines but those were not tap areas.
  • The shape to open an e-magazine looks like a download button.

Ideate

I explored a few early ideas in a low-fidelity wireframes, which were sketches on paper to generate ideas on screens that require a redesign in order to develop solutions on KAI Access problems.

Wireframes KAI Access

Prototyping

By far the best part and the most fun I’ve had in this project. So much so that I had too much fun exploring the many UI and Interactive designs,  I didn’t realize the deadline of my thesis was actually just a few days away. I used Photoshop, illustrator and Justinmind to make the high-fidelity prototype. I made the User Interface from redesigning the app on Photoshop, and sent it to Justinmind. For the visuals on the User Interface of the app, I tried to follow the initial designs of the KAI Access app and followed the Android Material Design Guidelines.

Proposed Redesign

Solution 1:  Passenger Menu Button Placement

UP-1-GIF

Moving the passenger menu button placement from “Account” to the “More” page so that it could be more accessible and shorten the number of pages users have to go through to add passenger data.

Before

flow up 1 2.1-100

After

flow up1 perbaikan-100

Solution 2:  Pop-up Message

Users always forgot or never knew to unselect the current seat number before selecting a new one as there was no notice to unselect the assigned seat. A pop-up message will now show to let the users know to unselect the current seat before changing to their new seat.

Solution-2

Before

My Trips lama

After

My Trips 2

Solution 3: Tabs Menu

A messy e-ticket list. I separated e-tickets into two groups, “active” (paid/unpaid) e-tickets and “past” e-tickets (used) in the My Trips page in order to be more organized.

Awal

Current E-boarding pass button placement below the E-ticket page. 

Solution 4:  Payment Button Placement

Sol 3-100

Users found it hard to locate the payment information menu. So, the payment information menu placement was moved to the unpaid e-ticket list to make it more accessible for users.

Solution 5: E-boarding Pass Button Placement

eboarding-pass

Moving the e-boarding pass menu button placement to the top of the e-ticket page so users could immediately see it when they open the e-ticket page. Also, users can now tell the difference between the e-ticket number and barcode.

Filter-Deal-GIF

Solution 6: Promo Informations Filter

A Filtering option on the deals page to narrow down the many choices to let users have what they want faster.

Solution 7: Button Redesign and Resizing Tap Area

Magazine-100

Changing the default icon into the read more button to stand out and be more visible to users. Making the picture and the title of an e-magazine as tap areas to make it easier for users to access e-magazines.

Validation

To validate the redesign of the KAI Access app, the usability testing was again used on 5 new participants with the same tasks as before. A high-fidelity prototype was made on the Justinmind software which can then be opened on the Justinmind smartphone app. Usability testing was done with the participants performing the tasks on the high-fidelity prototype on a smartphone.


Overall, participants could do the tasks easily. From quantitative data, it can be seen that overall the redesign of the KAI Access app has a higher metrics value than before.

Graph Percentage-100
Graph SUS-100

Final Thoughts

As an industrial engineer, I’ve learned that there is always a better way. This app redesign could still be improved and there could still be many more design iterations to get the KAI Access app to best suit its users.