Cititrans
redesigning the whole user interface and user ticketing flow.
Redesign a travel app that can help the user easily book their ticket without hassle with a great user experience.
Role
UX Research, Wireframe,
UI Design
Platform
Mobile Apps
Timeline
1 month
Background
Cititrans is a mobile app that provides travel services online bookings. Currently the app is working, but there are several problems that we want to solve. This is my personal project with my team of 3 people, provided and guided by MySkill Bootcamp.
Overview
Our researcher spoke with users and discovered that the current app was difficult to understand and navigate since the UI were not consistent. There is not enough clarity and simplicity in the app design.
The intentions of this redesign are to make it easier for users to access the schedule and navigate through existing features, make user more faster and have clearer information about the ticketing process without hassle and also make them more invested in the mobile app. We tested our new design to the people, and they like our new approach!
Problem Statement
We started the project by doing user interviews to better understand the user behavior. We have conducted interviews with 5 people who have ordered bus travel tickets online before. Here is some of the main problem that we found:
How to provide a better User Experience for the user in the overall ticketing process
How to make it easier for user to buy a ticket
How to make user easily select seats availability
How to make the UI design more consistent
Improved User Ticketing Flow
To make a better experience for the end user, we make a new “flowchart” for ticketing process. In this process we focus on making the most concise way of ticket purchasing flow.
New Design Layout
In the new design using Cititrans' proprietary color palette, we created a consistent color palette on each screen to create uniformity. This makes the user's first impression familiar with the colors previously used by Cititrans, we tried using a modern-looking design to make each page more attractive. Here is the before looks:
Here is after look:
Design system
This new mini design system (design guideline) really help us to create more consistent UI design for each page display.
New Select Seats Availability Design
With color differentiation, user can easily understands which seat is currently available or not, we added the “exit door” too make them understand where the exit door is.
The seat design is influenced by the local cinema app design, I’ve take the idea from CGV and Tix ID mobile app. I took inspiration from these two apps because people are used to using these apps, and the design on the select seat page is very commonly used in cinema applications.
Here is the reference app page:
This is a big consideration in making a decision to use a similar select seat design, so users don't have to adapt to the design new again. Here is the final design:
Homepage Redesign
The homepage of the Cititrans App serves as the focal point of the application, providing easy access to the main navigation options without clutter. Here is the before look:
I combined these 2 page to make it more clutter and straight forward to use highlighting the main features, and here is the after look:
Validation
To validate whether or not the solutions that I provided has solved the problem, we tested the new design to 5 people to gather their inputs on the new design. The result is all of them think that the new design has answered the problems that were stated before, especially the new ticket purchasing flow design. They think that the new design has a much clearer information in the scheduling part and far more consistent in the UI design aspect.
Disclaimer
This product is still undergoing many improvements which are expected to eventually improve the travel app platform that can help customers book a ticket for their needs.
More Detailed Information
I intentionally made this case study as simple as possible, so there’s still so much more detailed process that I didn’t show it here. You can check the detailed version of this project down here