Grab
Grab is Southeast Asia's leading Superapp. It offers essential everyday services such as food deliveries, transport, and financial services to over 670 million people in the region.
During my time at Grab, I was with the Transport team designing for the 46 million rides taken daily.
Abandoned Cart widget now live on Grab in the App Store or Google Play!
0r scan to download the app
(limited functionalities outside Southeast Asia)
Role & Scope
I was involved mainly after the solutions have been derived. These solutions were shaped based on past experiments and research insights developed by our Research & Strategy team. This case study focuses on the Abandoned Cart widget.
​
Scope:
Design Iterations
High-fidelity design for app widget
User Testing
project scope: design/iteration/testing
The Problem
With the rise in competition within the industry, Grab has noticed a change in user behavior during ride booking.
BOOKING
BEHAVIOUR
Competition is stiff in this market. Price-sensitive users tend to switch between different apps to compare prices before booking a ride.
INCONVENIENCES IN THE GRAB APP
When users return to Grab after checking other apps, they will have to refresh the price by re-entering the pick up and drop off details again.
NEW
FEATURE
To win over fare checkers, the concept of Abandoned Cart was adopted.
Aim: To re-engage users who selected a ride previously but did not book it
Target Result: Increase overall book through rate
Design Process
When I took over the project, there was already a rough skeleton on how this feature would look like. This feature will be surfaced on the home page as a widget, as shown in the image here.
​
This left me with several design decisions to be made on the details which should be included in it, as well the UI improvements.
The next part will take you through how the the widget evolved...
from
to
Design Dilemma #1: Type of Ride Displayed
There are multiple taxi-types users can choose from within the Grab app, such as premium services, services with pets, 7-seater vehicles, etc.
As such, the price displayed in the widget has to be fetched from the taxi type best suited for the user.
​
Goals:
-
Entice users to book a ride --> Low Fare
-
Show what users want to see --> Contextual information
-
Clarity in which service the price is being reflected for
Some possibilities were explored:
Option 1: Displaying the lowest fare
"Book a ride from S$14.30"
✔ Entice users to book the ride due to the low fare
✘ Frustration for users who are not interested in the lowest fare service, yet Grab constantly shows the fare for it
✘ Disappointment when users who were interested in a premium service are led to think that the fare has dropped significantly, yet only to realise that the fare reflects that of a non-premium service
Option 2: Displaying the fare of taxi service which the user last searched
Constantly changes according to last searched taxi service
✔ Provides contextual information based on what users want to see
✘ Additional need to state the taxi service whose price the widget is reflecting as it changes according to what was last searched by the user
Eventually, Option 2 was selected as it provides users with greater clarity on the information displayed and brought about a smoother user experience.
Design Dilemma #2: How long to surface the widget for?
Surely, the widget will disappear once the ride has been booked on the Grab app, but when shall it be remove if a ride is never booked?
Ease of booking despite leaving the app previously
​
Encourage users to always check the Grab app first with the confidence that Grab will store their ride preferences
Takes up a significant amount of space on home screen
​
Unpleasant experience if users are no longer interested in the ride yet Grab continually shows the widget
To show for a longer period of time
This was not purely a design decision as it involves us knowing how much in advance do users usually search for a ride before booking. Hence, the Product and Data team were consulted.
​
Since most users tend to only check fares when they are about to book a ride, or just slightly before, we have made the decision to only surface the widget for up to 3 hours before removing it.
​
This provides sufficient time for users to re-visit their booking, yet not take up too much unnecessary space. Of course, this value could definitely be modified with more data collected upon the launch of the MVP.
Design Dilemma #3: Should we highlight the change in ride fare?
Scenario: During the time the user has left Grab to check on other competitor's price, the price of the ride has fallen from $23.30 to $21.30. Should the $2 drop in price be highlighted?
Arguments for:
By showing upfront whether the price has increased or decreased, users will not have to think and are able to make a decision more quickly.
vs
Arguments against:
Users would have had checked the fare not too long ago and should remember the price. Showing this might result in unnecessary clutter.
However, addressing this problem proved to involve a larger challenge of working within large Design Systems, which will be outlined below.
Working within Design Systems
With multiple services on the app, Grab has an extensive design system used across all verticals. Every component and icon had its specific used case and it was hence essential to work within the design system to ensure coherency.
To signify that price has dropped (Design Dilemma #3), the instinctive decision was to use the standard “lowered fare” icon.
However, users of Grab have long familiarised themselves with this icon implying that the ride fare is lower than usual.
i.e. the usual fare for the trip is typically $21.30, but due to lower demand, Grab has lowered the fare to $20.30.
Problem: Using this icon here doesn’t imply that the price is lower than usual, but rather that it has fallen from the previous time the user has checked the price.
... and this may cause confusion for users, as well as alter the icon's meaning.
I then proceeded to try multiple iterations of the icon, exploring ways to bring the message across without altering the meaning of the original icon. Some of the explorations are shown below.
After proposing this change and discussing with the larger design team, it was decided that these icons would not be used. Firstly, it involved the challenge of introducing a new icon into the Grab Design System just for a single used case, which is not recommended give the large number of teams utilising this system.
Secondly, there is also an added challenge in educating users the meaning of this new icon and its difference from the regular "lowered fare" icon, which could be a cause for confusion.
Solutionizing: Content Design
The Content Design team was consulted to explore whether words could be harnessed to improve this experience.
​
​
1. The phrase “Fare has dropped” was included next to the “lowered fare” icon
​
2. "Ready to book your ride?" as well as the last updated timing to indicate change during the lapsed time
​
3. If the price has risen instead, "You were considering" would be adopted, instead of highlighting a price increase and potentially discouraging booking
This was subsequently tested out during our User Testing, which proved to be effective.
Some additional learnings from the UT will now be outlined below.
User Testing
Singapore
Indonesia
User Testing was carried out with Singaporean and Indonesian users, which makes up the highest revenue and volume of users respectively.
​
This process was led by our Research team which crafted the testing format and result analysis.
Key Learning: Visibility of Pick up Notes
Due to the convoluted roads in Indonesia, many Indonesian users tend to include additional pick up notes when booking a ride (eg, road directions or a brief description of their outfit) to aid in the driver’s efforts of locating the pick up point.
Indonesian roads which are more difficult to navigate
Singapore roads which are neater due to advanced urban planning
Showing the previously entered pick up notes in the widget instills confidence in users to utilize this widget to book their ride.
"Wearing a green shirt. Turn left into small road after the large fence"
UT revealed that users were concerned whether these notes would be saved if they booked a ride using the widget. As such, some did not have the confidence to use this function.
Being based in Singapore, this was a fresh insight and problem which I’ve never faced nor realised before.
​
With Grab predominantly based in Southeast Asia where many of the roads tend to be reflective of that of Indonesia, this was a design improvement which had to be made in order to serve our users better.
Finishing Touches
1
2
3
After several iterations, this was the result.
1
Content Design: Using words "Ready to book your ride?", "Last updated at xx:xx", and "Fare has dropped" to explain the meaning of the lowered fare icon.​
​
​However, if the price has increased since the time last checked, Grab will not indicate this price change as using the "Surge" icon tends to disincentivise users to make a booking. Instead, it'll simple state "You were considering".
2
Addition of pick up notes. As users simply wanted to know whether the the notes were saved, a truncated one-liner version of the entire text would be sufficient (example below)
​
​Tapping into the widget would bring users to the booking confirmation page, which they would still be able to view and make changes to the pick up notes.
3
Removal of "Continue Booking button to reduce vertical height. Service type and fare is displayed in a way similar to that in the regular booking flow, suggesting to users its tap-ability.
​
