Let's make applying and managing promo codes easy

sketch_wireframe_grab
 
 

Discovery and Empathise:

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.

 

A usability test on was conducted on 10 participants.

Their task was to search for a valid promo code and to apply it. Although the participants were successful in their tasks, they did take some time to go through the list of notifications before finding a valid code. Next they had to manually type in the code to apply. The participants used my phone for the test. 

Throughout the task, I also deliberately send messages to my phone using a friend’s phone to create distractions (to stimulate a real world usage scenario). I observed some users were distracted and they had to navigate back to the notification section in Grab.

When asked about the distractions, 6 out of 10 users said they were distracted by the notifications from the messages and they forgot the name of the promo code.

A user remarked that it was cumbersome and frustrating that he had to navigate back and forth just to apply a code.

Another remarked that it was difficult to go through the long list of notifications to find one that is about promo codes. 

 A persona created after the testing

A persona created after the testing

 

Defining the Problem:

1.Users should be able to key in their promo code in a more direct way to reduce cognitive load. They shouldn't have to memorise the code.

2.Users should be able to apply, track and see the promo codes without missing out on any.

3.Notifications about promo codes should be easily discovered by the users.

 

Problems with current build

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

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

 
 

Current User Flow for Applying a Promo Code

old_journey_map

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

 

Competitive Analysis:

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

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

 
 

Ideation:

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

Unnecessary duplication of function

 

Initial Sketching

Sketch_1.jpg
Sketch_2.jpg
Sketch_3.jpg
Sketch_4.jpg
 

New User Flow for Applying a Promo Code

 New User Flow after solution

New User Flow 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.

promo code section.gif
 
 
 
 

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.

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.

 

Promo Code section being used. Created in Principle app

 

User-testings and feedback:

Users were given the same set of tasks given during the “Discover and Empathise” phase. 

Users feedback that they were happy and please to be able to see all the promo codes conveniently in one location. They also appreciate it that they are able to apply the code with a tap. One user remarked it should have been like this from the start. On top of that, the location of the promo code holder is easily discoverable too. Most importantly, users were still able to complete their tasks with relative ease despite distractions in the form of notifications. 

Overall, the new design addresses the problems that were covered during the “Define the problem” phase.