UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Follow publication

Split your payments in Google Pay — a design case study

Ruban B
UX Planet
Published in
7 min readJul 9, 2018

Solving the problem of switching between multiple apps to pay and to split them.

Long story short, myself and my friends have the habit of having food at the nearby food street at least 4 to 5 times a week. Every time we go there, we all will be having a nice time chatting, making fun of each other like how all other friends do. Just after the food, one poor soul(let’s call him David) who will be busy with his mobile phone with so much attention to it. Is he deep into some social media?

No, David has some additional responsibilities of paying the bill and to enter details of the bill into Splitwise app to split it among ourselves. You can ask why can’t he wait and then update the Splitwise app later? David’s personality trait is conscientiousness, so he likes to be organized and complete his works then and there.

Let’s see how David would behave if he had other personality traits. (Data collected from user interviews)

Behaviors based on personality traits

Openness to experience

David doesn’t even care which app(or cash) he use for payments. He randomly uses whatever is convenient at that point of time.

Conscientiousness

Pays the amount, immediately opens the Splitwise app, fills in the details and splits the money then and there.

Extraversion

Pays the amount, doesn’t even care to split the amount, continues to spend time with friends. Splits the amount whenever he gets time.

Agreeableness

Pays the amount and doesn’t split. Whenever his/her friends remember to send him/her the money, he’ll get his money.

Neuroticism

Enters the amount and description, cross-checks the details again and pays. Doesn’t open the Splitwise app there at the restaurant as he might wrongly enter details in a hurry. Finds time later, opens google pay app to check the amount paid, enters details in Splitwise app carefully, cross-checks them and pays.

Conscientiousness and Neuroticism are the two personality traits that spend more time switching between apps to do their intended action.

Is there a way to smoothen this flow of pay and split?

Can we give more time to David to spend with his friends?

What can I do?

If we can reduce the details like amount and description being entered again and if we can combine both app’s individual flows into a single flow, we can reduce the cognitive load, and thus it will help almost all personality traits.

Either Splitwise should have a payment option or Google Pay should have split options. Both are equally good ideas when we speak from a design point of view. But when we think of how easily and how fast this can be done, having split options in Google Pay is relatively easy.

How can I do it?

Request option in Google Pay is a feature to request money from individual contacts manually. The same option can be used to request money from multiple contacts automatically after paying.

Constraints

  • Not to change anything drastically in the existing Google Pay app just for the sake of implementing the Split option. At the end of the day, Google Pay’s primary goal is to make payments.
  • Complete this project as soon as possible because the more time it takes, the more updates you can expect from Google and any major updates would add a lot more constraints. Who knows, there might be a team at Google working on this idea too. 😉

The modifications that I have made into Google Pay app are explained below:

Accessing split options

Accessing split from home

Imagine that you have already made the payment through a medium(either cash or any other payment app) other than Google Pay, you just want to split the amount and request money.

  1. Choose the Split option by swiping the handle towards the right.
  2. Enter the amount and description.
  3. Choose contacts to split and select the Split option.
  4. Once split is done, the individual split amount will be requested automatically from the selected contacts.

Split a completed transaction

There may be situations, where you would like to split a completed transaction that has not been split earlier. This option comes handy when you forgot to split the amount in the first place.

  1. Go to the ‘All Transaction’ page, swipe right on any transaction that you want to split (you can’t split a transaction which has been split earlier).
  2. Choose contacts to split and select a split option.
  3. Once split is done, the individual split amount will be requested automatically from the selected contacts.

Pay and split

When you want to split the money preceding a payment, you can click the “Pay and Split” button next to the “Pay” button on the screen where you enter the amount and description.

Pay button: completes the payment process.

Pay and Split button: completes the payment process followed by screens to split amount.

  1. Choose the pay option by swiping the handle towards up.
  2. Select contact to pay.
  3. Enter the amount and description.
  4. Click ‘Pay and Split’ button.
  5. Choose contacts to split and select split option.
  6. Once split is done, the individual split amount will be requested automatically from the selected contacts.

Getting the flow right for Pay and Split: During initial low fidelity user testing, one important feedback that I received was,

Why can’t we allow the user to choose contacts(to split with) before the payment process ?

I have a couple of reasons for not implementing this flow.

  1. Split options being sensitive, I don’t want to introduce any task in between the payment process.
  2. Choosing contacts at the bill counter while the billing person is waiting for payment doesn’t make sense.

Taking Mental & Conceptual Model into account

Google has nicely conceptualized the mental model of Paying and receiving into their app.

Pay: Swipe away(Implies that the money is leaving you).

Receive: Swipe towards(Implies that the money is being received by you).

I have tried to include the mental model of the users in implementing split and also not to break the existing conceptual model that google has made.

Most of us think split as: Divide something or anything that gets detached from a source.

Tweaking Visual Indicators

Bringing split option in Google Pay requires tweaking of existing visual indicators to indicate pending payments(you owe, you are owed).

Google Pay right now has two visual indicators on the home screen’s payment segment, one for the notification and the other timer icon to indicate ‘to be paid(you owe) payments. Since we are including split, there is a need to indicate the pending payments from others(you are owed), so I have introduced arrows to indicate ‘you owe’ and ‘you are owed’ by replacing the timer icon.

Up arrow(Orange color): You owe.

Down arrow(Green color): You are owed.

Tweaking visual indicators

Split Options

Split equally, by exact amount, by percentage, by shares are the split options I have included here. All these options are provided in the Splitwise app too. I have made the visuals better and added an extra feature Split remaining in ‘Split by exact amount’ and ‘Split by percentage’ options.

Split remaining feature

Imagine, two of David’s friends are celebrating a special occasion and they agree to give ₹1500 each for the bill. So, you’ll add ₹1500 each for two of your friends and want to split the remaining among others. In such cases, split remaining comes handy. Just toggle the button at the bottom to split the remaining amount among other contacts.

Split remaining amount feature

Groups

Now David doesn’t have to select his friend’s contacts every time to split. He can create groups with whom he frequently shares his payments.

Groups are listed below the payments section on the home screen. You can create a new group just like you start a new payment.

Groups feature

I hope this will make the pay and split process easier and which in turn can buy David more time to spend with his friends.

Thanks :)

Twitter |Behance | Dribbble | Linkedin

Sign up to discover human stories that deepen your understanding of the world.

Free

Distraction-free reading. No ads.

Organize your knowledge with lists and highlights.

Tell your story. Find your audience.

Membership

Read member-only stories

Support writers you read most

Earn money for your writing

Listen to audio narrations

Read offline with the Medium app

Published in UX Planet

UX Planet is a one-stop resource for everything related to user experience.

Written by Ruban B

Product Designer with 8+ years of experience crafting intuitive and delightful experiences, working with teams of varying design maturity.

Responses (5)

Write a response