UX Case Study — Redesigning Tokopedia App: Tiket Kereta Api

Mahardika
Mahardika
Nov 8 · 5 min read

Problem

Last month, I tried using both Tokopedia desktop and mobile versions to order train tickets. I noticed that it was easy to find a ticket on the desktop version, however, when using the mobile version it was significantly harder when searching the city or station and I feel uncomfortable with the appearance and experience. So I wanted to find a way to make the mobile app easier to use. A way to do this would be to research with the end-user to take action with data.

Tokopedia’s desktop version

User Type

I tried asking my friends at the office, boardinghouse, and college friends about their experience when bought train tickets. What the reason they are chooses to use a train as their accommodation? What is the purpose of traveling by train? Which application or website used to buy tickets? And what’s the reason?

From 6 users that I’ve asked, the answer is:

  1. Reason chooses train:
  • Faster than other transportation
  • Cheaper
  • Comfortable.

2. Destiny:

  • Back to hometown
  • Holiday/Vacation

3. Applications or web they usually use and what the reason?:

  • Traveloka -> User-friendly
  • Tiket.com -> A lot of Promos

From the interview result, I got some information about user type that will affect the design style I’d like to make.

Persona

First, I started to make a persona who has the potential to be a user of Tokopedia based on online research and also knowledge of some friends who use Tokopedia. The persona I made is only based on assumptions and makeshift research that aim to help direct decisions in designing.

Guerrilla Usability Testing

Based on my knowledge of the main functions of purchasing train tickets in Tokopedia, I made several scenarios for users.

  1. If you want to travel by train to a place that you want in “Pulau Jawa”. What would you do?
  2. You want a vacation by train, but don’t have a recommendation for a place and a price. What would you do?
  3. If you have set the time and destination where you want to go when on the search list page you want to change the destination. What would you do?
  4. If you have determined the time and destination where you want to go when on the search list page you want to change the train carriage. What would you do?

Identifying Problem

After I reviewed the results of the interview, I grouped the pain point the user into a post-it using Affinity Mapping to determine priorities for the user and Tokopedia.

Then I prioritized each pain point based on its importance to the user as well as its importance to Tokopedia. My assumptions of the importance to users were based on conversations with the existing and potential users.

2x2 Prioritization Matrix

Prototyping and Validation

I used Sketch to create Hi-Fi mockups, Marvel App to explore the prototype, and then for more usability testing, I used Usability Hub.

Desktop Version

1. Homepage

Homepage, some users feel uncomfortable with the look of the search area, which is too small and on the left side of the screen (not focus). And then to see recommendations, a user must scroll down which is rarely seen.

2. Search Result — Train List

On this page, the user is confused to change the search date or location, and also to filter trains (Argo) that are not visible because the filter is collapsed.

3. Change Passenger Seat

Users are confused to change passenger seats if he booked tickets more than one passenger.

Mobile Version

1. Search Stations / City

Grouping of popular stations and popular cities doesn’t stand out, hint text in the search bar is less informative.

2. Calendar

Move months on the calendar, the user feels the effort because they have to click and have enough interaction.

3. Train List

Some users have it difficult to reach the sort and filter buttons because of the size of their large mobile screens.

4. Select Carriage

Users feel the interaction to choose the carriage is less comfortable, not the mobile apps behavior.


Here’s an overview of the results of my design changes.

Results

Overall, the users enjoyed exploring recommended destinations and users feel more comfortable when choosing a calendar in the mobile app.

The current Tokopedia App is helpful with their features like a top-up pulsa, paket data, booking tiket kereta api, etc. However, some features are lacking in services such as the Train Ticket feature, which still uses the in-app browser on the mobile app version. There may be having technical reasons related to this decision, but some users feel uncomfortable with the experience.

In the future, I hope Tokopedia users have the same experience in all the features they use, especially the mobile app version.

Mahardika

Written by

Mahardika

Product Designer @MedigoIndonesia

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade