Grab Transport Booking UI Revamp

Tasked with redesigning the allocation and pick-up UI to enhance the transport booking experience.

2019-2020

My Role

Responsibilities included defining and scoping problems with the Product Manager, conducting ideation workshops, planning and participating in user research and design validation, collaborating with peer designers to create the new UI, undergoing design critique and review sessions, designing transition animations, creating design specs, and collaborating with the engineering/QA team for UI implementation until roll out.

Background

Throughout the ride booking user journey, the information displayed on the app plays a crucial role in the passenger's experience. Passengers rely on this information to plan their time, such as reading the driver's location or estimated arrival time, determining whether to wait for the driver, and deciding when to reach the pick-up point. Users also utilize this information to share with friends or family and for communicating with the driver.

“As a user, I want to know where my driver is, when will the car arrive, and what’s the car information so that I can get prepared for it and get picked up by the driver smoothly.”

1. Decrease cancellation rates and boost booking through rates

During the allocation process, the goal is to shape users' perception of the allocation time and manage their tolerance for waiting. By providing more contextual information dynamically, along with clear instructions, we aim to reduce the cancellation rate, often caused by communication gaps between passengers and drivers.

2. Enhance passenger safety and NPS (Net Promoter Score)

While passengers wait for their drivers, making the card plate number, car model, and driver's information more legible on the UI can help passengers locate their upcoming driver more easily and safely.

Allocation UI redesign

To better manage user tolerance and justify the wait, we first focused on redesigning the allocation experience. I created several designs using different approaches and tested them with real users. Through interactions with these prototypes, we aimed to gather user feedback based on their needs and past experiences.

Key enhancements included:

1. Displaying the allocation process: We ensured that users could easily track the progress of their booking allocation, providing transparency and reducing uncertainty.

2. Adding animations to engage users: We incorporated animations to distract users during the waiting period, enhancing the overall experience and reducing perceived waiting time.

3. Updating status messages in different phases: Clear and informative status messages were provided at various stages of the allocation process, helping users understand what was happening and manage their expectations accordingly.

"Grab could inform me of the number of nearby drivers on the allocation screen. If there are no drivers available, I can go to the road and look for a taxi."

- SG GrabCar user

“I would like to see the road on the map to ensure that I have booked at the correct location.“

- SG GrabShare user

Improving the Driver's Card

The driver's information is crucial to our users. Leveraging our existing information and functionalities, I organized an ideation workshop to explore various states throughout the entire booking journey. This involved analyzing benchmarks and generating ideas for redesigning the visual hierarchy and layout of the driver's in-transit status and car information.

In the new design, we streamlined the Driver's Card by reducing unnecessary shadows, spacing, and visual elements. Simultaneously, we improved accessibility by implementing a new text style for the plate number, car model, and driver's profile.

When the card is expanded, instead of maintaining the same information architecture as when collapsed, the layout of the card dynamically transforms to engage users with more detailed information about their driver.