UX case study: E-toll App Indonesia for Indonesian Toll Road Users (English version)
Disclaimer: I am not affiliated or working at PT Jasa Marga, the use of PT Jasa Marga’s logo and colors is only to give an authentic impression to the EAI application design to make it look like a real application.
Like the previous case study, this design is also a remake of my first design and the purpose of making this design is purely as a portfolio to start a career as a UI/UX designer. The writing that I made is my experience from the beginning of making the design to testing.
I. Background
E-toll App Indonesia (EAI) is a toll road service application developed by PT Jasa Marga, a state-owned company responsible for the development of toll infrastructure in Indonesia. EAI aims to facilitate toll road users in their journey and this application is equipped with features needed by toll road users such as emergency services, toll rate calculator, electronic toll card, etc.
Before the design of this application was made, PT Jasa Marga had launched an application with a similar function called Travoy and this is where the inspiration to design EAI came from. However, Travoy application is lacking in providing the services needed by toll road users and there are many bugs in this application that make it less convenient to use.
II. Goal
- Create an easy-to-use toll road service application
III. Research
In the research stage, I looked for what was in the Travoy application but could be improved or enhanced. Then, I brainstormed by noting what toll road users usually need on the way based on personal experience in using toll roads for a trip. From the brainstorming results, there are several things that are very useful for toll road users:
- Toll payment feature using QR code, considering the current way of making toll payment by sticking the toll card on the card scanner. The idea is, there will be a feature to register the toll card that has been owned to the application. After that, the application will create a QR code that contains information on the toll card such as the number and balance on the card.
- A feature to calculate the total toll tariff from one region to another. Actually, this feature exists in Google Maps, but it does not cover all classes of vehicles (only the calculation of the total toll tariff for class 1 vehicles).
- Toll road service features consisting of ambulance, towing, firefighting, etc.
- Live feed of Jasa Marga’s CCTV and live chat of toll road users that contain developments that occur along certain toll roads.
I collected the results of this brainstorming and sorted them from the main features in EAI to the supporting features in this application, then continued by creating a user flow.
Link to user flow: https://www.figma.com/file/DfhlmNQMQvbXImWkWJoota/PROJECT-E.A.I.-v2?node-id=0%3A1
IV. Design & Prototyping
Wireframe
Entering the design stage, the first thing that is created is a wireframe. This wireframe is very useful for forming an overview of the application being created, while the content of this wireframe is a representation of the attributes that will be included in the design.
Lo-fi Design
After wireframing, I turned the wireframe into a lo-fi design. Lo-fi design, or low fidelity design, is a design that is based on wireframes but has no colors. There are only places to place images, text, buttons, headers, footers, etc.
Hi-fi Design
After the lo-fi design is completed, I move on to create a hi-fi design or high-fidelity prototype. Hi-fi design is a prototype that shows the desired result, where all the attributes have been added along with the colors. Before I could proceed to the hi-fi design, I was looking for color and font ideas that would be used as the brand identity.
In the process of creating the hi-fi design, I added the selected colors to the design. In addition, I also add image attributes, logos, etc. At this stage, the number of frames looks much more than before. This is due to the addition of frames for features that have a long flow, such as the login process, toll road services, new toll card registration, etc.
Prototyping
After the hi-fi design was completed, I continued the design process to the prototyping stage. At this stage, each design frame is connected to the other frames to form a flow.
In the picture above, each element in the design is connected to one another. So that during testing, the prototype can be run like a real application. To try the prototype, please click the following link: https://www.figma.com/proto/M8xhILsuYpQqC4F4LdmgH3/Aplikasi-EAI-(remake)?page-id=114%3A3970&node-id=881%3A3034&viewport=960%2C339%2C0.07&scaling=scale-down&starting-point-node-id=881%3A3034
V. Testing
Testing is done to find out the user experience when trying the prototype application in real situations, and look for things in the design that can still be improved. For the testing stage, I created 5 main tasks as follows:
- Account registration and login
- Calculating toll rates that must be paid on the way (case study: a trip from Boyolali to Madiun)
- Checking the balance of the registered toll card and registering a new toll card in the EAI application
- Contacting Jasa Marga emergency services (case study: Jasa Marga towing service)
- Checking the meaning of an observed traffic sign.
To perform each task, I asked 3 people to be testers in testing the application prototype. The following are the testing results from the three testers, where the results of the testing can be seen based on time on task and task completion.
Testing of this application prototype has only been carried out by 3 people, from the originally planned 5 people. You, as a reader of the case study, can participate as a tester so that more data and more input are given. Please leave your contact information in the respond column.
For your information, in testing the prototype application, there were obstacles in the internet connection which caused the task process to be slightly hampered and made the processing time longer.
Task 1 analysis
List of each step in task 1:
- Click on Registration (Registrasi)
- Enter name, email, password, and phone number
- Verify
- Login to enter the Home page
Green: step can be done without any obstacles
Yellow: step can be done and there are obstacles
Red: step cannot be completed
From the results of task 1, all testers were able to complete the task from the beginning of registration to logging into the EAI main page. Obstacles appeared when tester 2 (Hayu) filled in the data needed for registration, this was due to a poor internet connection and made the observation process via Zoom a little hampered. Pain points were aimed at users (testers) who immediately clicked login even though the command given was account registration in order to log into EAI. This can be represented as the nature of users in using an application or web, especially in registering themselves as users of one of these systems. There are 2 solutions to this problem:
- Option 1: EAI directs the user to the login page when the user opens EAI for the first time.
- Option 2: simply display 1 login function button on the first page of the application, when the user enters the login page there will be an option to create an account if the user does not already have an EAI account.
Task 2 analysis
List of each step in task 2:
- Click Plan a Trip (Rencanakan Perjalanan)
- Select Boyolali as starting point
- Select Madiun as destination
- Select vehicle class 1
- Click Search to find out the overall toll tariff
- Return to Home page
From the results of task 2, all testers were able to complete the task from entering ‘Plan Trip’ to getting toll tariff information. Here there are no obstacles at all like the previous task. Pain points are aimed at users (testers) who do not understand the classification of vehicles regulated by the Toll Road Regulatory Agency (BPJT). The solution that can be made so that users can understand about vehicle classes is to add a question mark icon (?), where when the icon is clicked, information about vehicle classes that can use toll roads will appear.
Task 3 analysis
List of each step in task 3:
- Click on e-toll Card (Kartu e-toll)
- Check existing toll card
- Add new toll card
- Choose Mandiri e-money
- Enter card number
- Confirm toll card registration
- Return to Home page
From the results of task 3, all testers can complete the task from entering the ‘e-Toll Card’ to finish registering the toll card, as well as checking the balance of the toll card that has been owned. Pain points are the naming of the toll card and the color of the card which is almost the same as the registered card. These two things can be improved to make the experience of other users much better:
- For the card name, the name and brand of the card should be written, for example ‘BCA Flazz’.
- The color of the card is made different from one brand to another to avoid the same card design.
Task 4 analysis
List of each step in task 4:
- Click Toll Road Service (Layanan Jalan Tol)
- Select Tow (Derek)
- Fill in vehicle data and location
- Fill in complaint
- Send information
- Return to Home page
From the results of task 4, all testers can complete the task from entering ‘Toll Road Services’ to finish calling Jasa Marga towing services. Pain points are aimed at user location information when requiring toll road services, where filling in the information is still manual or typed. This pain point can be overcome by creating a Share Location feature like in WhatsApp, where the user’s position will be tracked automatically by the system.
Task 5 analysis
List of each step in task 5:
- Click Traffic Guide (Panduan Lalu Lintas)
- Select Traffic Signs
- Search for the meaning of the sign shown
- Return to the Home page
From the results of task 5, all testers were able to complete the task from entering the ‘Traffic Guide’ to finding the observed traffic signs. There were no pain points emphasized in this task because all testers were able to do the task without any obstacles, but tester 3 (Henny) felt a little hampered in doing this task because her internet connection was not good, and the image did not appear. Luckily, the tester understood the traffic signs that I showed them to find their meaning.
VI. Closure
After the testers completed the test, I asked them about their experience when testing the prototype application via zoom call and overall, the EAI application can be used easily. The testers liked the ease of using this application and the features in the application, but there are some things that can still be improved or added to make the user experience in using this application even better, such as completing the ‘Others’ (‘Lainnya’) section, adding rest area information, and the things that have been mentioned in each analysis above. All of these inputs are very useful for user convenience when the prototype application has been converted into a real application.
Thank you to all of you who have read the E-toll App Indonesia case study. Please leave a ‘clap’ if you like this case study and also write in the respond column be it comments, feedback or questions. Thank you and keep learning!
