Redesigning BHIM Neobank App with focus on Payment Flow
Hackathon | UX Research, Strategy, Ideation, Design
Redesigning BHIM Neobank App with focus on Payment Flow
Hackathon | UX Research, Strategy, Ideation, Design
Secured 2nd Prize Nationally : https://uxhack.co/product/Bhim/challenges/look-and-feel/
BHIM is an UPI Payment based app which has seen decrease in market share compared to other apps like PhonePe, Google Pay etc. In terms of UX , there are major lag of accessibility, user perspective and usability, thus diverting users away from BHIM to other neobanks. With our solution, we have enhanced the user journey and visual appeal that ensures the app is more intuitive for any age group of users
PROBLEM
Although UPI - Based payment apps have been exploding over the last couple of years, BHIM has seen a decrease in market share, even though it has no functional issues
With an overwhelming set of features and no information hierarchy, the user was confused on the primary purpose of the app
In the payment flow, there was lack of transparency in each step leading to trust issues with the user
The user had to go back and forth to complete a transaction, causing user frustration, especially for lesser tech-savy people
The design and flow was not upto the mark of the other most used apps widening the user learning curve
SOLUTION
O
MY TEAM & ROLE
Worked individually as a UI/UX Designer for the Hackathon UXHack : Visually Enhance Payment Experience of BHIM UPI
As part of UX, I worked upon competitive analysis, high level UX audit, user persona building and refining the Information Architecture and User Journey
As part of UI or Visual Design, I updated the design system based on current design standards and redefined the navigation based on customer journey
TIMELINE
This hackathon was completed in a span of 1 week's time
First 3 days were utilised in the discovery and ideation process
The next 3 days were used to build the wireframes, the final design and to compile it into a presentation for review
THE PROCESS
Competitive Analysis
We analysed the direct competitors who are dragging more user base than BHIM like Google Pay, PhonePe, PayTM etc. Here, we try to understand what worked in favour of them and can be used as area of improvement for us related to the payment flow as well the overall design
Paytm Online Payments App
Everything accessible from one page thus easier and faster navigation
The primary goal (sending money through pathways) is distinct and right on top
Promising additive features and rewards towards the end
Some secondary functions like viewing profile, bank account balance etc are not buried functionalities anymore
Power of customisation - switching accounts, payment mode, copying the code is easier and can be done in any step of the payment process without looping back to home
Seamless payment process with auto - filled fields and recent history, reducing user effort
Google Pay Online Payments App
Clear Information Hierarchy - concise app with focus on only the primary functionalities to not overwhelm the user
Payment is easily done with the New Payment floating button, that promotes the action and accessible for any user type
Consistent rewarding system
Modern and consistent look
Splitting bills option
Customisation and seamless payment with easier adding of bank accounts, personal QR code viewing etc
PhonePe Online Payments App
Clear Information Hierarchy - Categories are laid out properly and not hidden in the hamburger
Easier navigation - All secondary promising features like Mutual Funds, Insurance , shops are available in one stop with a dedicated page for each
In payment, Switching accounts is easier
The primary functions related to one self like - addition of bank accounts, overview of cards/profiles, QR code is prominent on the landing page
PhonePe Wallet Tool allows user to make swifter payments
Recently used contacts and transaction history
Key Takeaways
Understanding the Users
With limited access to real time user data, the pain points of the current product were analysed based on the playstore reviews. After talking to my peers ( 4-5 users ) who frequently use such online payment apps, the key takeaways, in contrast to other payment apps in the market, were thus the following.
Types of Users/ Transactions
Merchant Vendor User Persona
Customer/ Daily User Persona
High Level UX Audit : Analysis of the Existing App
The analysis was done in contrast to the other products and their points of distinction. How UX and Visual Design is hampering our product and distracting the user form the primary payment flow. I then conducted a mock payment to understand the pain points in the flow and field out the areas of improvement in terms of usability.
Redefining the User Flow
Keeping in focus the payment flow, there are 4 types of transactions : Scan & Pay, Pay to Self, Pay to a Bank Account and Pay via Mobile Number or Contact.
Based on our research, we have given the user the flexibility to "Add new Contact No./Account/Beneficiary" during the payment flows as and when required without looping back to the home page. They can as well Request an amount from another beneficiary. The history of the transaction along with the invoice is readily available.
With functionalities like "Check Balance before payment" , "View and Share Invoice", "Raise Query" , "Repeat Payment", the improved solution can promise more transparency and less user load. Based on the research and competitive analysis we have included the above and tried to make the design as seamless and inclusive as possible with necessary validation during transaction steps.
User Flow Ideation for Payment Process
THE DESIGN
Distinct Hierarchy & User Control in Landing Page
We have reduced the cognitive overload by including clear categories like ‘Recharge and Bills’, ‘Brands’, Investment’ etc. The primary functionalities are in focus and not buried anymore : Scan & Pay, Transfer to contact, Transfer to Bank Account, Transfer to Self. To improve visibility and user control, user can always now view the Available Balance, Selected Account, QR and can switch accounts with minimal effort. User has been made aware of a compelling list of secondary offerings with a primary CTA to respectively navigate them.
Introducing BHIM Wallet - a personalised user space with their payment data already captured, thus reducing their efforts drastically and optimising the checkout process, in parallel with competitor products in the market.
Transaction tab - Credited/Debited/Rewards and Filtering and sorting functionality to reduce ordeal of scanning. Each card shows the category of payment, status, date, receiver name and amount. On clicking they can view details, invoice or share it
Transferring to Bank Accounts
Based on the previous payment history of user, banks and contacts are compiled under "Recent" and "Popular" to lend a personalised experience that requires minimal effort. The IFSC Code and Bank account name will auto-filled based on data extracted from bank servers unlike the current BHIM App. The longer checkout process is shortened now with a fixed Proceed button at the bottom, nudging the user to complete the process.
Enhancing Transparency and User Freedom in Payment Process
The Payment process now provides a single clear pathway from selection to checkout, with consistent color scheme and branding at every stage to make the experience familiar and trustworthy. Using auto - fill and Recents, user efforts have been reduced. The validity of each user is maintained and visible to their contacts in order to start a credible transaction. User can easily switch between payment options and Add Money or Add Bank Account , without going an extended route. To reduce unwanted actions and errors, at every stage user can check the Payment Account and Balance.
Currently in the Indian market, users tend to use 3rd party apps like Splitwise to split any transaction. With "Split with friends" the user can complete that action easily here itself while been able to share the payment history as well. User has been given validation for the payment success with a clear concise payment history. At every page, Help or Support is there to improve any kind of user assistance from BHIM Service team.
Scan & Pay option : Considering scan and pay is very high in demand right now, the "Scan" button has been highlighted in the footer and fixed in position , thus attracting user focus and enhancing accessibility. Also, on clicking VIEW QR or the QR on profile icon - shows the user’s QR . UPI can be copied. Both accounts’ QR can be seen, downloaded and shared. On swiping the carousel, another account shows up and Add Account option too.
🤯 Phew! You have reached the end of this project!