Redesigning Google Pay — a UX case study
Disclaimer: The views expressed in the blog post is purely based on personal experience. It was not influenced by any external factor.
During their 3 years of existence, they’ve worked on several iterations to make the app better. They tried new technologies like the Audio QR code (AQR), which uses audio frequencies to communicate with nearby devices to enable payments, but later moved on to using traditional QR code.
When Google launched Tez (now ‘Google Pay’) in India during 2017, their primary goal was to design a simple payment app to replace cash. And, thanks to their rewards program that went viral among the users. The rewards program that involved the scratch cards, became a conversation starter. (You might have come across someone asking you “How much did you win in Google Pay?”).
But, in the process of making the app simple, the product team has made a few compromises on usability. For example, a product that has 67 million monthly active users does not have a search bar on its home screen! They missed adding some very basic features that could have enhanced the user experience by several-fold.
In this blog, I have analyzed the shortcomings of Google Pay from a user’s perspective and have also designed mocks to show how we can overcome those shortcomings with subtle design changes.
What’s missing?
Before getting to the solution, let’s take a quick look at what’s missing in the current version of Google Pay.
Too much Negative space
When you open the app, the first thing you see is the GPay logo followed by a subtle, minimal illustration of a landscape. The top 30% of the app screen which could’ve been used to house a ton of key features and functions is left blank. Why!
The most basic thing they could’ve done is added a search bar (something Google is good at since their launch in 1998).
No Favorites
The next section after the landscape is where you see the contacts to whom you’ve sent money recently. But, the issue with this section is the arrangement of contacts.
There is no way to pin or favorite the most frequent contacts or businesses for quicker payments. And, when you click on the ‘Show more’ button, the list is endless. And, you can’t search or alphabetically sort your contacts. It is messy and confusing for a user like me.
New Payment Button
The ‘+ New payment’ button, which is the primary CTA, hovers over the contact icons which makes it difficult to see sometimes. And, Google did not make use of the ‘long press’ feature, which they’ve pretty much had everywhere on Android and some of their apps.
Imagine long pressing the ‘+ New Payment’ button and you get options like ‘self-transfer’, ‘scan QR code’, ‘money transfer’, etc. That would’ve taken the user experience to a whole new level.
Referrals and Payment Activity
Google Pay focuses a lot on the referrals. I came across three CTAs on the main screen that nudges you to invite or refer your friends to Google Pay. Another area that I felt lacking was the payment activity section. The payment activity section doesn’t give you an option to search for a specific transaction by month, date, or category. And, the option to share the receipt of a transaction is positioned behind another click. Instead, they could’ve had a share icon next to the transaction, or a share option when someone long presses on a transaction.
The Biggest Usability Issue
The biggest issue with Google Pay is, being a search giant, Google did not make the best use of search within the app.
The Solution
After considering all the usability issues, I asked myself
“How would I redesign the home screen of the app so that it is easy for a user like me!”.
I put on my thinking hat and started designing the solution.
Search Bar and Shortcuts
First, I made a list of all the frequently performed actions in Google Pay and it came down to a short list. They are,
And, in the current version of the app, the home screen is blank and you find payment options like bank transfer, QR code, etc. only if you click on the ‘+ New Payment’ button.
Keeping that in mind, I decided to redesign the first 30 percent of the screen that was left blank in the app.
I added a search bar and a couple of key shortcuts that we use more frequently. I added other frequently used options but hid them under an expand/collapse menu. The search bar allows users to search for a contact, business, or a vendor for bill payment.
I placed the rewards icon on the top left corner making it easy for users to access their rewards. After the redesign, it looked something like this.
Favorites
The second thing I worked on was the contacts section.
I want this section to allow users to pin their frequently used contacts as favorites. They can see up to 7 of their favorite contacts on the home screen. If they want to see more favorites and other recent contacts, they’ll have to click on the ‘Show all’ button.
If you wish to add a contact to your Favorites section, you can choose the ‘Add to Favorites’ option when you’re sending money to a contact. Another way is to have a star icon next to each contact (like how we bookmark webpages) would also do the job.
You can add or remove contacts from the Favorites section by clicking on the More icon (three dots) next to the Favorites section.
This way you can quickly send money to your frequent contacts.
I removed the ‘Businesses & Bills’ section from the home screen as I wanted it to be subsumed under the ‘Show all’ option.
Instead of ‘Businesses & Bills’ I have added the Promotions section followed by payment activity, checking your available balance and the banner to promote rewards for inviting your friends to use Google Pay.
Payment Activity
I’ve also made a few enhancements to the payment activity section.
The ‘smart search’ bar at the top of the page will allow you to look for a transaction based on the month, vendor, or the amount paid.
You can long-press on a transaction or select multiple transactions to share their receipt via WhatsApp, or email.
I’ve also tried to display the UPI ID of the transaction in the list making it easy to share them with vendors (some ask for the UPI ID after the payment).
Monthly Spend Report
When I sent this blog post to a couple of beta readers, one of the suggestions I got was, it would be nice to have a spend report inside Google Pay. A report that gives you a monthly overview of how much you’ve paid as bills, how much you’ve sent to your friends and family, rewards earned, account balance, and so on.
If you think about it, it need not be an extensive expense report like you get from Walnut or your bank’s mobile app. It can be a simple report that tells you how much much you’ve spent through Google Pay and what’s the balance left in your account.
If you’re someone who uses Google Pay, then you will have all your transactions in one place. It could also refrain users from using other UPI apps and stick to Google Pay as it helps them visualize their monthly spending in one place.
I took the liberty to design a very basic mock of how this would look.
Conclusion
If I can design a better, usable version of Google Pay putting myself in the shoes of a user, imagine what product teams could do when they start listening to feedback from hundreds of users. Distilling them and putting them in action would be a great way to deliver an amazing product experience.
And, for a company like Google, if they made use of the elements and interactions that worked for them in the past (things they’ve learned while improving apps like Google, Gmail, Google Maps, YouTube, etc.), Google Pay would’ve created a far better user experience.
I’m not sure if they’d see it, but I am happy to have learned a thing or two about product design and user experience while working on this case study.
I hope you like it!
Acknowledgment
I’ve sent this blog to 23 professionals as part of the beta reading program and I got some amazing feedback. Special Thanks to Vishnu Vardhan, Rohit Viswanathan, Ganesh, and Smriti. They have a huge part in how this article came into shape.