The Journey of Pegipegi Booking Card — a UX Case Study
The process behind the new My Order page on Pegipegi app.
Overview
Pegipegi.com is now developing many products and in some case it creates new experience on our existing design. In order to have users’ pleasure for seeking a ticket or accommodation and soon to be, we will release or new product, so we have to redesign the My Order page which already released on app version 2.8.1.
My Role
As a UI Designer with Scope of Works
- User Flow creation
- Wireframing
- Hi-Fi Prototype
Working With
- UX Researcher
- UI/UX Lead
- 5 Product Managers (User Platform, Accommodation, and Transportation)
Project Brief
What’s Wrong with The Current Design?
As I mentioned at the beginning, we will release a new product that impacts some screens, especially on My Order page. It starts from the current design that showing tab-bar by Product name and we would have the brand new product, Bus & Travel, which now still on the development process, We think that this tabbing style design cannot accommodate the additional product.
If you had a purchased order around 5 months ago, you will remember this interface. This is the previous design that shows the tab-bar as product orientation.
The Problem
By the end of 2019, we will be launched Bus & Travel as a brand new product. And if this tabbing style is applied for the current condition, the tab Bus & Travel will be hidden and the user doesn’t know that Bus & Travel has existed.
The other reason, we assume that this tabbing style which showed by-product doesn’t tell much information about booking process. And as we know, on the e-commerce platform or another service that brings booking process, each order status is summarized in the single column. From that background, we want to redesign the My Order page.
Process
User Flow
In the OTA business, we have our own terms of a business process. There are 4 steps: Planning, Browsing, Purchasing, and Travelling. At this project, our design covers on Purchasing and Travelling phases since we know that booking process has to be done on the action to pay and activity to show E-Ticket at receptionist/airport gate to have check-in access. And once the user has been finished their trip, the status is changing as a finished order. All those processes will be shown below.
Order Status Flow
Design & Prototype
Wireframing
This wireframe was initiated by Product Manager (Since we don’t have a UX Designer and maybe they still have a strong ideology of the design, we often face this workflow until today). This wireframe is figured the future of My Order page that shows tab by order status where the top of the card is the latest order.
Iterations Design
Inputs by inputs from the product team and also CEO are gathered, many of them said that for this design (Iteration-1), the design is many ways better, the layout is ok, and overall is representing booking status properly. But they said that design is a little bit solid, particularly on bounding box and also a strong color that represents all of that information are important. By those inputs, I decided to take out the bounding box, change the font size, and change the color softer. Also aligning the schedule section on the left-align (for departure/check-in) and right-align (for arrival/check-out) to have much blank space on the card. All changes are represented in the figure below.
Tutorial Coachmark
To have a good user knowledge of our new design, we have to show a tutorial for the first-time user that landing on the new My Order page. Figures below show the 3 kinds of step tutorials that we are highlighting on tabbing style, order status, and booking card information.
Final Design
Following the end of every UX process, we did evaluate the process at the end of the project (on week 4). We gathered 5 internal respondents to have IDI and Usability Testing. We gathered respondents by specific criteria where the user has usually had an experience of buying a product at e-commerce and ticket at OTA.
All data of our findings and results will be explained by Ignes Olivia, as part of this article, particularly on the research process. At this story, I merely could share the summarize of the report. And Ignes determines the metric in the Likert Scale (1 to 5) which uses the usability aspect only at learnability. She assumed that the new booking card design is easy to understand by our user.
Future Works
Our design and flow aren’t perfect yet. There is still much development behind to bring the best solution to booking information cards to our beloved users. By the end of Oct 2019, there are more than 350.000++ users that already enjoy this booking card design on their phone in Pegipegi App version 2.8.1.
Next, we are doing a lot of work on the next phase of Booking Card information since there are many statuses that haven’t covered at this development phase, such as Issuing Ticket, E-Ticket Issued, Check-In Reminder, etc which is still being worked in our team since it involves to all of the product lines.
My other articles
Thank you for reading! I’d love to hear of any feedback from you for this article. Say hi to me at hafidznoor@live.com or connect me at LinkedIn. Cheers 🍻
