Case Study: How to Give Maximal Experience with Minimal Effort for Access to Public Transportation in Indonesia? | by Vidya Rahma Hanifa | Sep, 2021


Disclaimer: This project is a collaboration between Product Management Team with UI/UX Designer & Research Team. Starting by receiving Product Requirements Document (PRD) from PM team to research, design, validate, and iteration. Here’s DigiTranz!

Role: My role here as facilitator as well as part of Digitranz UI/UX Designer & Research team. I’m planning and executing research, composing sitemaps, wireframing, designing UI, usability testing, doing design iteration as well as manage my team to make sure we meet goals of this project according our timeline.


By 2029, The Government of Indonesia wants 60 percent of Jabodetabek Residents to Take Mass Public Transportation. The government even planning on massive development on infrastructure. But how did user’s opinions toward the current public transportation system? Does good infrastructure the only thing that makes them choosing public transportation over private transportation? How do they feel about the current public transportation system? Let’s ask our current public transportation user!


On one fine Friday morning, Kim is excited to go to her office since today is the day she is going to present the project she’s been working on to her colleagues. By 7 a.m Kim is already in the station, ready to take the train to her office. Ouch! when she tap in she just found out that she has insufficient balance. She goes straight to the top-up counter only to find out the queue is crowded (sigh). She then goes to the ATM machine which is outside the station to top-up. Oh no! she missed her train 🙁

TGIF! Later after work, Kim decided to go on a date with her boyfriend. They are going to meet up at one of the new hottest cafes in town. As a public transportation user, Kim needs to check the transportation schedule so that she could determine at what time they are supposed to meet and since it’s her first time going to that cafe, she needs help on finding public transportation which could take her to the place. Ugh! turns out it’s kind of hard to get real-time transportation schedules. Kim needs to go to the bus stop or station first to found out and don’t forget that she needs to find the route too! Hmm… So much effort to meet your loved one.

Have you ever been in Kim’s situation too? Sadly, this happened to other 55 public transportation too, or maybe more!

Problems — Based on a survey conducted by the PM team on 55 public transportation users and interviews.

As a UI/UX Designer&Researcher, how could we help to tackle this problem?

Let’s make a transportation app! But, what kind of transportation app which our user really needs? what kind of transportation app meets the business needs of our PM team? In order to solve this, we got through this design process

Design Process

In this stage, we try to empathize with our users in order to get a deep understanding of who are people we designing for. According to PRD from the PM team, we compose UX Canvas, User Persona, Point of View, User Journey, and How Might We to get to know our user’s persona, needs, and thoughts. Oh! We use Figma Jam as our “work field” during this stage.

UX Canvas

UX Canvas helps us to understand better on understanding the relationship between user needs and business scenarios so that we could have a shared understanding between the team.

UX Canvas

User Persona

From User Persona, we get to know user’s needs, frustrations, behaviors, and goals better. This becomes our guide on who is our users during the ideation and validation process.

User Persona

Point of View

Defining POV helps us to focus during ideation to solve users’ problems. POV becomes our guide focus on what problem we are trying to solve.

Point Of View (POV)

User Journey

User journey makes us empathize on the journey which our users should take to get done what they need. This helps us find out their pain point during interaction between users and products.

User Journey

How Might We (HMW)

From the user journey earlier, we get to know our opportunities to help our user and frame it into How Might We? How might we help us generates opportunity and solution to help our users.

How Might We?

In this stage, we do research to find the best solution to solve the user’s problem.


Competitive Analysis

Before we come to ideation, we found out that there are some products that help to solve similar problems. We analyzing Trafi, Moovit, and Gojek. So we explore these apps to get to know which area we could apply and improve to our product based on our own user’s needs.

Gorilla Testing

The purpose of this testing is to decide which concept should we pull based on the user’s preferences. We conduct this testing by interviewing 3 users to choose between Concept A and Concept B.

Concept A: There will be no cross transportation for route guide (For Example: If from the start you choose KRL, the route guide will always be recommending KRL only)

Concept B: There will be cross transportation for route guide (For Example: If your departure point is nearer to a station while your arrival point nearer to a bus stop, the route guide will recommend KRL and Transjakarta)

Based on the Gorilla Testing, 3 of 3 users prefer Concept B because they prefer public transportation nearer to their stops. The insight from the competitive analysis and gorilla testing helps us in the ideation stage.

To answer the HMW questions, we do a brainwriting session for 3 minutes for each question. Here are some solutions which come up to solve each how might we question.


After gathering the ideas, we put them into an affinity diagram based on importance and urgency. This helps us to choose which ideas or solutions we could make it to the MVP.

Affinity Diagram

Based on our research, ideation, and discussion with PM team, our solution comes up as MVP product which consist of:

1. DigiPay: An E-Wallet so that users could make transactions for public transportation easily (payment, top-up, balance checking)

2. Schedule: Fiture to check transportation departure time

3. Route: Fiture to guide and giving recommendations for user to arrive at their destination


This logo should be simple but related to transportation. So we come up with D to represent our name Digitranz and inside it, there is a train-bus vector inside.

DigiTranz Logo

Sitemap & Flow Chart

Based on solutions from the ideation and research, the next step is creating a sitemap. From Sitemap and Flow Chart, we could arrange features and navigation of our apps


Wireframe & Wireflow

The next step is sketching on how our apps will look like. The key is to keep it simple, clean, with an easy-to-understand flow. With the help of Whimsical, we could get Mid-Fi so we could get a picture of how our products would look like.


User Interface

Enjoy our main features!

Design System


Try it yourself the experience with Digitranz

Source link

Leave a reply

Please enter your comment!
Please enter your name here