Unified Payment System for a Super-App

Studying and unifying the payment systems in Grab - South East Asia's top super-app

A crash course on Super Apps

Rise of Super Apps

If you have ever been to one of the bustling Asian countries, then you would have noticed the growing trend of super-apps. Super App is an app that puts a bunch of services together into one bundle. Some of the countries have their very own homegrown super-app that is catered to the needs of individuals and businesses in and around that region.

Examples of super-apps can be —

  • Alipay (Hangzhou, China)

  • WeChat (China)

  • KakaoTalk (South Korea)

  • Paytm (India)

  • Go-Jek (Indonesia)

  • Grab (Across South East Asian countries)

Common trends among most of them are —

  1. A lot of different coloured icons

  2. No sense of unity

  3. User is already signed into everything and payments information is stored

  4. All apps use this framework, “many services within one app× no need to re-input”

  5. Mobile-first app design strategy

  6. Apps use a variety of mobile hardware sensors to drive usage through the use of payments, commerce and retail. They use Global Positioning System (GPS), Near-field communication (NFC), the compass, the camera, QR codes.


Super App in Singapore & SEA

One app that breaks the design pattern monotony in the SEA super-app market is Grab. Grab is a fierce competitor of Go-Jek and has been battling it out on acquiring a bigger market share since 2012. Approximately 2 years after Go-Jek launched in Indonesia.

Grab offers a bunch of very interesting features through its app and it seems to be growing at breakneck speed to establish itself as one of the most dominating platforms in the SEA region.

In Singapore at least, Grab seems to be offering:

  1. Food & Beverages

  2. Grocery and daily needs (Mart)

  3. Door to door parcel delivery

  4. Private Cab (Transport)

  5. Insurance

  6. Prepaid recharge

  7. Period Subscriptions (example — Boba tea subscription)

  8. Movie & Event (Tickets)

  9. Hotel Bookings through 3rd party partners

Users of Grab

Grab wants to target consumers of all age and background. But like most tech companies, it is targeting millennials first through its app design and then the older generations by respecting the country’s culture/rules & regulations.

Since Grab is trying to cast a wide net, it was simpler to recruit interview subjects for different persona user groups.

Project Summary

This project focuses on unifying the payments and receipts flow in Grab’s super-app. This will enable users to track individual payment receipts with ease without going through a lot of steps.

Key deliverables

  • Competitive analysis

  • Current App map

  • New user flow

  • Wireframes

  • Clickable prototype


Design Process

Payments System in Grab

Grab gets its payment driven from more than 3K merchants across the nation. Grab relied on QR codes for driving its payments from consumers and merchants signup. But in December 2019, Grab launched Asia’s first numberless card. With this, consumers don’t need to worry if the merchant accepts Grab payment and it’s operated completely by the mobile app which makes card blocking and money tracking quite straightforward.

GrabPay Numberless Card

With this change, Grab has moved towards becoming the preferred payment method for most consumers that cleared the waitlist and received their cards.


Payment Tracking

With so many features (8–9) put together and payments flowing thru’ a GrabPay card, wallet, credit/debit cards, promo codes, rewards/points — it’s definitely hard to keep track of money spent using Grab services. Unfortunately, Grab makes it even harder to get to your payment receipts by directing users to a separate page for each of its services.

Current user flow to track a receipt/payment

As you can see that accessing the payment receipts is a task on its own. I have observed numerous friends and family members struggling to find it. It’s not the best user experience for a B2C/B2B app to cause frustration to users for finding a simple receipt, reward or payment details.

For the sake of this research, I used the following probing question on the current app and benchmarked the number of taps and how many seconds it took for them to conclude with the flow:

  1. Where do you find your past food orders?

  2. Where do you find your past transport rides?

  3. How do you order food and check for delivery status?

  4. How do you access your accumulated Grab points?

  5. How do you spend/redeem those points?

The big question that kept coming up during the user interview probes was that — if every service leads to some kind of money debit or credit, then why is it not being tracked as a single stream of payment?

Who is the user?

Based on the expectations and feedback collected during the user interview, we can create the persona of Aisha. Doing so will allow us to keep the user at the centre of the design process, ensuring we met her goals. I created two scenarios in order to frame the problem and focus on the user needs as I move forward.

Image Credit: Unsplash

Aisha, age 25–30, living in Singapore.
Scenario: Aisha uses Grab for ordering food to enjoy with family members. She also uses Transport for visiting her friends and for carrying weekend groceries from afar Mustafa supermarket. During this Ramadan season, she used Grab Delivery for sending homemade desserts to her friends and family members. Since a lot of her savings are being spent using Grab services, it is important for her to track all her payments/transactions and do accounting at month-end.


Putting it altogether

So once I put together a map of all the payment strings flowing across the app, I decided to break it into multiple small pieces and combine it into a single long flowing image to connect all the dots together.

Complete spectrum of payment and receipt system in Grab

Ideation

So what happens during a transaction?

Let’s take food/transport transaction for this example. Every time someone orders food through the app, the app creates three entries —

  1. A food receipt that contains all the details like booking ID, restaurant name & address, order summary, note to the driver, payments breakup, cutlery requests.

  2. A payment receipt which contains points earned, paid to the merchant, payment method, date & time stamp, transaction ID.

  3. A rewards/points entry to count upon the points the user just earned with respect to this transaction.

Food — Payments — Reward Points

As I look at all three different types of payment receipts, it is quite clear to me that each of them holds a special significance to the other and they cannot be completely removed from the system. But some of the information blocks can be smartly combined together without the need for duplicating.

We need to consider the following information coverage:

  1. Order date and time (should be either in AM/PM or 24hr format)

  2. Number of items ordered

  3. Booking ID

  4. Merchant Name and Address

  5. Rating

  6. Delivery rider

  7. Start and end address

  8. Driver note

  9. Order summary and payment breakup (taxes and fees)

  10. Promo code details

  11. Total payment amount

  12. Payment mode

  13. Number of points rewarded

  14. A way to reorder the same dishes

Visual Design Improvements

  1. All fonts should belong to the same family. The current app uses 2+ fonts across its card layout.

  2. Make sure time is in AM/PM or 24hr format consistently. The time format isn’t consistent right now.

  3. The grid should be in even multiples of 2, 4, 8.


Solution Layouts

Let’s discuss some visuals and see how the final outcomes look like across the Grab app. While doing the visuals, I didn’t change the Grab-Design-System in any way since I don’t think it poses any problem with/to the users.

Card layouts

Card Anatomy

M, L, XL — card layouts

Individual Receipts

Individual receipts will largely look the same in the app. Since it doesn’t change much and research shows that users expect no less or more information in the generated receipts. But, it’s just going to be triggered from a single card location and not from entirely different looking screens.


Unified Listings

Dummy Simulation

A quick simulation of this dense card layout for each different kind of transaction looks something like the above.


Why this solution?

Because this card layout affords the following:

  1. The design is flexible to change based on where it is being shown. It can be used to represent all payment information (payment, refund, declined) in the app

  2. It helps the consumer track when the payment is made, using what method and for which Grab service.

  3. Gives a way to Reorder when shown in a list.

  4. A consumer can see payment amount, points received, and service used all in a single view.

  5. It uses a single consistent view across all services. This will make the consumer get used to the information pattern.

  6. Extend’s the use of Grab’s iconography pattern to payments. This unifies branding patterns across the app.


Outcome

I did a simple follow-up with friends who I interviewed before and the re-designed payment system for the Grab app was received very positively. Using the same standard test scenarios, users were able to find information using just a single channel and they very soon connected where to access the information again when needed.

As you can see in the updated flow, the updated design recommendations don’t really reduce the number of steps or taps taken by the user to reach the receipts point but they do reach a unified receipt system screen that can be changed by the user by changing the filter values. Which reduces some anxiety and also some development efforts for not maintaining different viewpoints.

Future recommendations

Moving forward, my recommendations for the future of the Grab app include:

  • Payments overview. This would be a key requirement to ensure that users can track all their payments made within the Grab app or outside using GrabPay/Grab-Card.

  • Monthly point breakup. Grab rewards different points for different payment amounts based upon a number of parameters such as merchant promotions. This needs to be highlighted to the user.

  • De-cluttered Information. Grab app is riddled with ads, promotions and general information. Users find it hard to go through the information layers without proper segregation of data types.


Give me a shout!

Thank you for reading this far! 😁

Let me know if you have any questions or comments on my design for GrabPay…

AND / OR

If you’d like to have a chat about anything design related I’d love to hear from you!

You can also find me on LinkedIn and via Twitter