An Attempt to Optimize the Search Functionality of Gpay Transaction History in Order to Boost the Retention Rate
This case study shows how I evaluated the existing flow of Gpay transaction history and redesigned it to improve the search functionality.
While going through the app, I was searching for some old data from 3 months ago in the Transaction History and didn’t notice it. Searching for that data took me more than 10 minutes; after a moment, I felt like moving out of the page, but I still needed the data.
Thought to think about what expenses I did, why and who, After a few minutes, I got the data. Sometimes people will forget or may get frustrated with searching, which may lead to a quit in future transactions.
This use case helped me do this project. Even as an end user, I want my regularly used payment app to have a function that works very quickly for the user without making them think a lot.
Index
- 🌟Sparkling Beginnings✨
- 🔍 Cracking the Code: Unveiling the Problem Statement and Business Metrics🕵️♀️
- 🕵️♂️ Decoding the Path: Exploring the Existing Flow and its Inner Workings🧩
- 🕵️♀️ Cracking the Usability Code: Heuristic Evaluation in Action 🚀
- 🔬 Examining : Findings from Primary Research🔍
- 📚 Building on Existing Knowledge: Exploring Secondary Research🧠
- 🛠️ Fixing What’s Broken: Problems Identified and Solutions at the Ready 🔧
- 🛠️ Building Blocks of User Interface: Exploring UI Components🧱
- 💡 Vision to Reality: Navigating the High-Fidelity Prototype🌟
- 🖊️ Sketching the Blueprint: Exploring Wireframing📏
- 🧪 Putting it to the Test: Leveraging User Testing🔬
🌟Sparkling Beginnings✨
I embarked on this individual project with the goal of completing it within two weeks. I started with so much interest and eagerness to work through this project, but I really learned a lot. Let’s see what Gpay does for its users.
Gpay:
Gpay is a digital wallet and online payment system developed by Google. a user-friendly interface that allows users to quickly and easily send money to friends and family, pay bills, and make secure purchases online.
🔍 Cracking the Code: Unveiling the Problem Statement and Business Metrics🕵️♀️
Evaluate the Transaction History flow of Gpay, which improve Searching Transaction History Details and redesign the experience to make the product design better with an aim to increase the Retention.
Business Metrics Targeted🎯
- Retention Rate:
By improving the user experience to manage there finances by making it easier for them to quickly find what they are looking for in transaction history, which keeps them from switching to competitor apps.
- User engagement:
This would increase the likelihood that users would continue to use Gpay to manage their finances, as they would find it easier to track their spending and keep an eye on their transactions.
- Customer satisfaction:
Provide users with a better overall experience by making it easier for them to find specific transactions.This would enhance the user experience and increase customer satisfaction.
🕵️♂️ Decoding the Path: Exploring the Existing Flow and its Inner Workings🧩
The home page of Google Pay displays various payment options for the user, including a list of people with whom we recently made a transaction.You need to scroll to look for Business, Bills, Recharge, Promotion, Bank Balance, and Transaction History.
If the user clicks Transaction History, a list of transaction details is shown. The user can see Recent Transactions from the very first transaction. At the top of the screen, users can see the “Search Transaction” button.
If the user clicks the button, they can see default keywords like “failed”, “cancelled”, “this month”, and “last month”. If the user clicks any of the keywords, then particular data will display.
🕵️♀️ Cracking the Usability Code: Heuristic Evaluation in Action 🚀
My very first thought is to conduct a heuristic evaluation because it has 10 famous concepts to evaluate the screen. By evaluating the screen, we can easily find out whether it is usable or not.
Example: If we don’t have an image in my cart, then it’s not easy for the user to recognize which product was added to the cart. In return, the user gets looped into the app again, which delays payment.
Let’s evaluate the screens of Gpay’s Transaction History Flow.
- Home Page
Checking the bank balance is not available; the user will check the bank balance before making a transaction.
2.Transaction History page
History details are not organized in a proper way; this page is very long. Even if all the data looks the same, the user will get frustrated while searching.
3.Search Transaction
Less search options are only available for the users to search the transaction history data.
⏫Jump to Index
🔬 Examining : Findings from Primary Research🔍
Before buying products like an AC, fridge, washing machine, mobile phone, bike, or car, most of us will conduct a small investigation with our friends and family members to learn about their pros and cons.
To know what kind of problem the user is facing, we have to conduct a user interview, which is nothing but primary research.
While doing primary research, we need to decide who the target users are, to whom I actually need to conduct user interviews so that I can get to the bottom of the actual problems.
Target users:
Should use Gpay for regular payments.
Active user of Gpay
Need to know basic functions of Gpay.
Age: 25 to (35–40)
Profession: working professionals
We decided to conduct a user interview with a few tasks for the users to perform. This way, we can easily observe the user’s behavior.
During the user interview, I asked a few probing questions to the users, which really helped me to know what they wanted and how they felt while interacting.
I took a four-user interview because even numbers feel more homely and friendly and must be used when seeking attention is not the primary objective.
User 1:
User 2:
user 3:
User 4:
⏫Jump to Index
📚 Building on Existing Knowledge: Exploring Secondary Research🧠
If we want to build a new house, we will get some ideas by seeing our friends and family’s houses. Those are inspirations, which are nothing but secondary research.
Just having primary research and heuristic evaluation will not help you solve the problem; we also need inspiration and ideas to create a better user experience. Hence, secondary research plays a major role in moving forward.
Both PhonePe and Paytm have better filter options, which help users search the transaction history details very quickly.
1. PhonePe
- Month-wise categories are the most important feature in transaction history because users will always remember the month before the expense details.
2. Paytm
- Accounts: These days, users have more than two accounts; in such cases, this will be useful.
⏫Jump to Index
🛠️ Fixing What’s Broken: Problems Identified and Solutions at the Ready 🔧
We found many problems, but still, we can’t solve all the problems because we are also human beings.
These steps helped me identify the real problem.
- I applied heuristic evaluation to identify possible problems.
- To get more insights, I conducted primary research to understand the real problems of the users.
- In my secondary research, I got a few insights, namely that Phone Pay, Paytm, and Amazon Pay all have many search options for the user to explore.
- Then I just started to combine all the information from heuristic evaluation, primary research, and secondary analysis to identify which problem was more important to solve.
Below are the problems that I found while working on the flow and my solution to them:
1. The list of expenses in the transaction history is not organized properly.
where all the expenses, from the most recent to the last transaction, are listed on one page. which may take time for the user to understand each transaction, and they will look for the reason to realize the subject.
Solution:
- The transaction history list is grouped by month.
- It will be easy for the user to understand which month this transaction belongs to.
- Now the plus or minus sign represents the amount credited or debited.Debt value has a minus sign, which says that the amount is transferred to another account.
- The minus sign says the main account’s total value is reduced.
2. The search feature needs more flexible options to check a particular expense.
Giving control to the user’s expectations leads to a more flexible search option in this transaction history. By doing so, users can check on any particular expense.
Solution:
- This filter option helps the user quickly complete the task. I designed this filter with many options to help the user quickly search for data.
- The user can search by month, status, account, and categories.Where the most used filters are status, I kept them in vertical scrolling for the user to access them easily.
- The month filter is given separately for the user’s easy access.
- Options like Accounts, Status, and Categories are quite often required, so all these are grouped together under Filter.
There are other main problems that were also found while conducting the user interview. Tried to solve those problems to improve the user experience.
> Placing the balance icon on the home page to increase user engagement
If users are unable to quickly find the bank balance icon or access their account information, it could lead to frustration, lower user satisfaction, and reduced user retention.
Solution:
- Here, we’re adding a new button named “Bank Balance” in the middle of the page so the user can easily find the new feature to explore.
- This button navigates to another page where the user can check the bank balance.
> The bank transfer icon is not communicating its main function.
If the icon doesn’t carry proper communication, then the user can’t understand the main function or purpose of the icon, which may reduce the user experience.
Solution:
- Adding the back-and-forth arrow mark icon below the bank icon to make the user understand that this icon carries a function.
- Mainly, this back-and-forth arrow represents that it’s two-way. where money from your account is transferred to another account.
> Showing an “N” number of people’s profiles on the main page reduces user engagement.
While searching for people’s profiles, users may get frustrated to see all the profiles under one title, “People.” The user needs to scroll down a long page to see other functions.
Let me show you how the whole UI screen looks when we click the Down Arrow More Button.
This use case is just for the user who has more transactions with many people’s contacts.
Solution:
- I added the left arrow icon with “see more” as a signifier.
- Here the signifier says that there are more people profiled here; just click here to see the people list.
- But the left arrow signifies that when the user clicks this button, it moves to a new page (it acts as an ingress button).
- redesigned the new page to show all the people’s lists on one page so the user could easily search.
- To make it easy for the user, I just divided the user list into 3 parts: “recent, group, and people.”
- The list of recently made transactions is shown under the Recent list.
- If the user creates groups for friends and family or office work, then they will be shown under the group.
- All the remaining people are listed under “People.”
⏫Jump to Index
🛠️ Building Blocks of User Interface: Exploring UI Components🧱
⏫Jump to Index
💡 Vision to Reality: Navigating the High-Fidelity Prototype🌟
If we have any idea or sketch to implement, then we will have a curious mindset to look for the output. In this way, the high-fidelity prototype helps us create the output.
Just by showing a sketch and an idea, no one can relate to how the final output will be, If we have a visual prototype, we can easily explain what problem we are trying to solve.
Check out High Fidelity Prototype in Figma
⏫Jump to Index
🖊️ Sketching the Blueprint: Exploring Wireframing
A wireframe is nothing but connecting the screen. This image shows how I wireframed to implement the interaction for the final representation.
When buying a dress, we always look for matching pants and tops. This is also the same as saying that we need to match them properly to get the same output as we expect.
🧪 Putting it to the Test: Leveraging User Testing🔬
While shopping, most of us use the trial room to check if the dress is perfectly stitched, looks good, or not. This is just because we are testing the product to check, whether it perfectly matches our expectations or not.
User testing is also the same process, we are testing it with real users to understand whether the UI is user-friendly or not.
Start with a few tasks to observe user behavior. While probing, we can get to know what the user thinks, This helps to improve the user experience.
Three people participated in user testing. The odd number is used whenever we need to focus on a subject and demand the user’s attention.
- Filter Chip/Button:
- While conducting the user testing, I felt that the user didn’t understand that the filter chip or button had basic functionality to close the filter.
- The main reason for this misunderstanding is that I didn’t give a proper signifier.
- As the close button signifier is presented in other normal filters (Cancelled, Bills, Failed, and Pending), the user starts to understand that this filter button (Filter and Month) has no functionality.
This project was extremely worthwhile; I had the opportunity to use my skills and gain priceless knowledge, making it a fulfilling and enriching experience.
I appreciate you reading my case study, and I believe you found it to be well worth your time.As an opportunity for me to become better, I really value your comments and advice.
You can find me on LinkedIn — linkedin.com/in/annapoorani-muthuraman-a4a832106 or reach out to me via email at poorani671994@gmail.com
By
Annapoorani Muthuraman🙌