Make applying promo codes on Grab a breeze

Side Note: I do not work for Grab. All views from this case study are strictly my own thought processes on what could be done better.

Problem:

Notifications about promo codes are sent to users via notifications in the app and email. However, the notification function is buried deep in the hamburger app menu and is not obvious to the users. Moreover, notifications about promo codes and other notifications are all on the same page, increasing cognitive load for the users. The notifications are reminiscent of an email inbox, messy and unorganised.

Let’s take a look at the screens in Grab:

Left Screen. Promo codes are in notification. Not a great idea to be in the hamburger menu if accessed frequently

Middle Screen: In notification, news and promo codes are all in one place, unorganised and reminiscent of an email inbox

Right Screen: A lengthy chuck of terms and conditions just to apply a code. Seems like a copy and paste job from an edm. Readability is bad and too much cognitive load for a user who just wants to apply a code quickly

If a function is to be used frequently, it should not be in the hamburger menu. Also, readability is bad on the 3rd screen

User Scenario:

Users receive a notification about promo codes. Users will need to navigate to the notification page which is hidden. When they have seen the promo code, they need to remember it mentally as they would be required to key in the code manually while booking a ride.

At times, users may have missed a certain promo code notification and only to realise they have expired, or users may have trouble remembering what codes have been used or what codes are still applicable for use.

Even when they are browsing through the promo codes, there isn’t a way to apply it directly. User has to exit and return to the landing page just to apply the code. All must be done mentally.

Current User Journey Map

Current User Journey Map before solution

Let’s take a look at what their competitor, Uber, has done regarding promo codes.

Left Screen. Their promo code’s terms and conditions are presented in simple block of information; short but concise. Readability is pleasant.

Right Screen. Putting a “Apply Now” button below the T&C block makes it easy for the User to apply the code. There isn’t a need for the user to remember anything at all.

Clear and Concise T&C, easy to digest. Clicking apply doesn’t require you to remember the code mentally or type in manually

Proposed solution:

As users use promo codes on a frequent basis. A solution was to create an icon that brings users to a page where they can see the promo codes all in one place. It should be easily accessible and within reach. In this case, the landing page of the application.

User can apply a code straight from there before hiring a car, or simply track which codes have been used or have expired. Notifications for promo codes will be pushed down by the company onto this section in the user’s app.

Before the solutions. The gift icon at the top right corner of the landing screen brings users to the referral page. When Grab first started out, it was crucial for the company to get users to spread the word by referring them to friends, hence the gift icon on the landing page makes a lot of sense. But in 2017, Grab is well-known in South-East Asia, it is time for the gift icon button to take a back seat.

Moreover, there has been a duplicate of the gift/referral function, both on the landing screen and inside the hamburger menu.

Since space is precious on a mobile device, it would be more beneficial to reserve the top right hand corner for a function that users would use on a frequent basis.

Unnecessary duplication of function

New User Journey Map

New User Journey Map after solution

The Promo Code Icon

A new Promo Code icon is now located at the top right where gift/referral used to be. Clicking on the Promo Code Icon brings users to the the promo code screen where they can have a bird’s eye view of their codes.

They can track, apply, or dismiss codes that have expired or have been used. After applying a code, users get a confirmation screen that their code has been applied and they will be brought back to the landing page of the app where they proceed to book a ride.

The icon at the top right corner now takes you to the Promo Code screen (right) where users can see all their promo codes pushed down by the company
Visual Confirmation

After the code has been applied and user is taken back to the landing page, user can still click on the promo code field to see what has been applied. One small issue though. At this point, the user is about to complete his or her journey, and by clicking the promo code field hijacks them from the landing page.

A better solution to present it is not to hijack them from the landing page. Instead, present them with a translucent pop-up that shows them the details and the necessary buttons to follow through. The applied code is also highlighted in green, to give a visual confirmation that the code is ready to be used.

Highlighted: The applied code is now shown in green, to visually confirm the code is ready to be used. Conincidentally, it’s also the company’s corporate color.

A prototype of the proposed solution done on Principle.