Case Study: Bux, Bus ticketing app

Published in

DOT Intern

9 min readJul 31, 2019

Hello there! I’m going to share the design process about this case study. This is my first time doing the design with design process like (Design thinking, Lean, Design sprint, etc.) so, sorry if bit messy and feel free to give your thought! enjoy my writing 🤪.

Introduction

I got this Study Case from my senior in the local community, so it’s more like a dummy case for practicing.

While I’m doing this study case I’ve learned many things about the design process, but for this case, I use Design thinking (DT) because it’s easy to understand and implement for a novice like me. Design thinking is more like a foundation of any other process, anyone can do it. Other process like Design sprint is just made it more systematical for better production.

Here, is a brief about DT cycle.

you can see the detail of every DT process below 😁.

1. Empathize

This stage is all about understanding your users, like their behavior, character, and habit. So to get very well understanding I created a user persona card. and for validating, I used the interview method.

This study case has one main stakeholder, His name is John Doe. Please take a look at his card below.

From this user persona I understand John Doe frustration, he can’t find train transportation in Sumatra hence the only solution for him is traveling by bus transportation.

To empathize John Doe, I tried to write some important fact from this persona:

John always uses train.
For the alternate, John needs to use the bus.

Based on that fact, I need to make sure how train & bus user habits, and behaves. It is important for me to create a design with the best user experience. Like what is the facility that bus user likes? how do they buy a ticket? and many more. So I do conduct an interview with four peoples with different background, here are the people:

Bhakti Lumaksono, Bus user.
Esa Purna, Bus user.
Rizky Eka, Train user.
Latieva Sonia, Train user.

Result:

I’ve got so much information from these four people but I just write the main point on the illustration above.

2. Problems

After I got that interview result I analyze it as soon as possible and then I found this pain points from their answer.

There is no fixed schedule for the bus (esp, short route).
The bus could be stuck in a traffic jam.
The bus usually overloads.
Can’t buy the ticket online for some routes.
The bus is not safe for some people due to overload.
The bus staying too long on terminals.
The bus air conditioner isn’t working.
John Doe is foreigner, he doesn’t know much about Sumatra destination.

But there is some side note from my respondent about online ticketing services:

Traveloka is heavy and slow because of too much feature. the user only wants to buy tickets.
Redbus is more likely to choose because they have more bus operator than Traveloka.
Some choose Traveloka because the promo’s
Some choose KAI Access because the have focused user interface and feature. and the user interface is clean.

How Might We:

How might we make the user know about the bus schedule?
How might we make the bus not overload?
How might we make the booking process easier for the user?
How might we make the bus not stuck in a traffic jam?
How might we make the bus air conditioner work?
How might we make the bus safe for the user?
How might we make the bus not staying too long on the terminal?
How might we make the user know the recommended destination?

well, now I have known the problem lets move to Ideate section.

3. Ideation

Basically, almost all of the problem could be solved using online ticketing/booking services like Traveloka, Redbus, etc.

But here is my solution to solve all the problems with a short explanation :D

Make easy to use the application, and the interface should be user-friendly.
My consideration for this solution our stakeholder age factor. Old user should be served with easy to use application and to the point feature. so in this design, I won’t add many features except search and booking.
and another consideration is one of my respondents said, transportation booking app doesn’t need to have many irrelevant features, should be focused.
Show the list of the available bus.
For showing the available bus, I add a “short by best experience” function to show the bus with the highest rating to the lowest. So our user gets a recommendation for the best available bus. The list also shows the bus rating.
Show recommended destination whenever user type in the search field.
This is important to give a recommendation to a foreigner, so they don’t get confused.
Show the bus police number.
This is important, user can avoid booking bad rating bus, and can track bus with the best experience by their number.
Give a rating feature to the bus.
This is to solve not safe, or any other problem like AC doesn’t work, etc. Whenever something doesn’t go very well the user could rate bad for the bus.
Payment with any method.
to complete easy book experience I add payment feature with three methods; Credit card/debit, Bank transfer, and Retail payment.

But unfortunately, some problem like a traffic jam, not working AC couldn't be fixed with this system :(

So after I create that solution, I tried to create a user journey and flowchart of the application before I move to the prototyping stage. See the figure below.

4. Prototyping

Honestly, this is the part I liked the most! in this part, I could explore many things about UI design. In the prototyping process, I used a tool named Figma. Let’s get started!

First I need to choose a name for my application. I want a name that is simple, easy to say and represent bus. hence I got an idea to name it as

Application name

Bux, Bus Exchange.

Moodboard

for defining design style and foundation, I arrange a mood board consisting of many designs that I found on Dribbble. This helps me found inspiration about my design style element like button, card, layout, etc.

Design principles, Color, and Typography

Wireframe

first over any other things are creating the wireframe. Even tho many people use paper to create wireframe but for me, I don’t like using a paper sketch so I used digital wireframing with Figma. I just poured all ideas that popped out in my head in canvas. In this wireframing stage, I don’t need every detail to be drawn, I just need the layouts.

Visualize

After I’ve created the wireframe, I tried to visualize it into high fidelity screen design.

Login and register.

I only provided for login method with google account. since it’s much easier to use so the user only needs to fill their phone number for registration(if needed).

Home screen and search.

Search field — Since I want this application to be easy to use, I put the search card on the bottom part of the screen. Based on the mobile heatmap, the user's thumb is more likely to rest on the bottom-left of the screen

Based on my research most of Bux competitors like Traveloka and Redbus put their search section on top of the mobile screen.

Destination, Passenger, and Departure date — on the search arrival or destination, I put recommendation places based on their location. when selecting passenger I'm limiting the choice up to 10 passengers only.

Input for destination-arrival, passenger, and date.

Search result — To make the user easy to find departure time, I place the departure and arrival time on the left side. It is because our eyes tend to search from left to right.

and then I put bus rating on the right side, this is to give information about the bus service qualities based on user rating.

Bus detail — after the user selects the bus, the detail appeared containing information such as departure-arrival, facilities, bus picture, and price. And then they need to choose a seat before proceeding to order and payment.

Ordering and payment — because of this application principles are easy and fast, the user order form is auto-filled based on their Google account information. and then they could choose many payment methods from Bux.

Ticket detail and history — after the user completing their payment, they will be redirected to ticket detail.

When the user doesn’t have tickets yet (left), and the ticket list if they have one (right).

Rating and review— the apps will detect their trip whether it is completed or not. When the current time is the same as their arrival time Bux will ask for their rating and review about your bus and then the ticket detail will be shown.

On this prototype, I follow and implement some lawsofux rules. first is Aesthetic usability effect — Users often perceive aesthetically pleasing design as design that’s more usable. — based on that principle I tried to make my design as aesthetic as possible.

second is Fitt’s Law — The time to acquire a target is a function of the distance to and size of the target. — this is why all of my CTA is placed nearly as possible to previous CTA and inside natural thumb area.

third is Hick’s Law — The time it takes to make a decision increases with the number and complexity of choices. — and this is the reason for me to keep my design clean as possible from useless information that confuses the user.

5. Testing

I wanted to validate if my solution works well. So I tried to test this prototype to some of my friends. I ask them to use this application based on the given scenario:

Try login using an existing Google account
Try to buy a bus ticket from Pekanbaru to Medan, on 23 July 2019.
Gives a rating and review about your trip.

from the result, 3 peoples don't found any problem and could successfully do the scenario given. Even the test run smoothly, It is still far from safe to say this prototype is easy to use. I need to test it on many age range. maybe will update this article soon when I completed the test :D

Anyway if you want to try my prototype you can access it here:
Prototype for Bux: Bus Exchange.

and don’t forget to give your thought on the comment section below!.

As take away note, the other competitor like Redbus and traveloka are pretty good. But still, there are some flaws that the user found.

Like the cognitive load problems on the traveloka user interface as Risky Eka said. maybe they could redesign it more simple and focus to some highlighted feature.
And for the Redbus I found that their user interface typography is still bit messy. and too much-unorganized information.

Maybe later I'm gonna make study case to redesign these applications. Thank you for reading, Cheers!