UI/UX Case Study: Re-Design Rosalia Indah Web Reservation

📣 Disclaimer

This project is a personal project that is useful to add to my exploration of UI/UX. I do not work on a contractual or professional basis for Rosalia Indah.

👀Background

PT. Rosalia Indah Transport is a company that is growing rapidly and is a private company that is considered in the land transportation service business arena in Indonesia. The tight competition in the land transportation business since the 1990s has not become an obstacle for PT.

Rosalia Indah Transport, even at that time was used as a starting point from what was originally oriented to AKDP (Inter-City Within Province) transportation services to AKAP (Inter-City Inter-Provincial) which has a wider range, is more reliable and more stable to date, with human resources of more than 1,000 personnel and more than 140 representative offices and agents of Rosalia Indah spread across Java — Sumatra. Even PT. Rosalia Indah Transport is also ready to serve tourism and charter tourism buses with a tourism fleet.

Company Values at Rosalia-Indah.co.id

🔍 Objectives

• Creating a website that is easy to understand for all ages
• Create website users to easily order travel tickets online/online
• Create a user website to easily find out the services and facilities provided by Rosalia Indah

🎨 Design Process

Dalam kasus ini, saya menggunakan Design Thinking sebagai proses designnya. Penggunaan metode ini merupakan metode yang mudah untuk di pahami dan di implementasikan. Berikut adalah tahapan dari metode Design Thinking:

Design Thinking Concept

1 — Empathizing

In this stage, I use 2 stages, namely my own observations and those of other users who review applications on the Playstore, as follows:

User Review from Playstore

So what I conclude from some users are:

• Privacy code of conduct after ticket purchase
• There is no online ticket cancellation available.
• They lack payment method instructions.
• No instruction/guide for purchasing tickets
• Booking code still requires manual entry by visiting the bus agency
• There is no confirmation of completion or booking code after payment has been made.

Although the user reviews that I took were reviews from the mobile app, I observed that the problems and constraints that occurred were also the same as using the Rosalia Indah website. Here are the results I observed:

a. Landing payment;

• The first checkout page appears small from placing an order to purchasing tickets online.
• The landing page’s picture banner of Rosalia Indah changes rapidly.

b. Payment Process

• The payment form has a progress bar for the user.
• A table lists the bus route code, time, route, kind of bus, price, information, and the seat remaining left.

2 — Defining

Here are some pain points that I explore from some user reviews and the results of my own research on the Rosalia Indah application.

List of Rosalia Indah Pain Points

Then from the pain points I got, I tried to make an analysis of How Might Be. Here is my How Might Be result in this case;

List of How Might Be

3 — Ideating

At this stage I try to organize the pain points of this website into stages. The stages include Solution Idea, Affinity Diagram, Prioritize Idea, and finally Crazy 8.

a. Solution Idea

At this stage I took several solutions related to the application that I found after getting data from the Define (How Might Be) stage. Here is the solution idea I got.

List of Solution Idea

b. Afinity Diagram

At this stage, I created several categories of existing solutions so that I and the design team found out the pain points of the application and the solution. Here are the categories;

List of Afinity Diagram/Cluster

c. Prioritize Idea

At this stage I enter the results of the Affinity Diagram into several priority categories which are divided into Urgent, Not Urgent, Important, and Not Important. This stage makes it easier for me and the design team to know which pain points to work on first/urgent. Here is the Prioritize Idea in my case;

Eisen Hover Matrix for Rosalia Indah Web Reservation

4 — Prototyping

At this stage I create a prototype by creating a user flow for each feature that I want to implement. In this case I created a user flow to book tickets online and make payments

User Flow for Online Ticketing and Payment

The next step is to create a wireframe, here are the wireframes;

User Interface

Here is the final version of the website which has visual elements in it including colors, typography, icons, and other elements.

Before Ater Landing Page

Before After Online Ticket Reservation

Before After Page of Passenger’s Personal Data

Before After Page of Choosing Seat

and here is the more detail of design:

Landing Page

Online Ticket Reservation

Form of Passenger’s Personal Data

Choosing a Seat

5 — Testing

At this stage I have not had time to do usability tests and interviews.

📄Conclusion

My goal in updating the Rosalia Indah website is to provide user comfort and convenience in buying bus tickets online and knowing the services and facilities available on the Rosalia Indah bus. Users can easily find out the type of bus fleet available for each trip that the user needs.

🎯Recomendation

During the stage of completing this case, I wanted to do a better deepening of the User Research interview as well as improvements in visual design but I haven’t had time to continue this project due to one reason or another that forced me to postpone this project.

Thank you for reading :)