Cash out Experience
I joined the cash-out squad at an unprecedented moment.
We have had around +R$2M more withdraws within a short timeframe of 3 months. This happened because the app opened to receive a Brazilian government subsidy, the corona voucher program, an emergency aid for COVID-19.
This sudden growth of withdrawals highlighted many areas of improvement.
I'll present my main projects that tackled users and business needs:
• Creating feedback messages to improve the experience and decrease tickets
• Redesigning the cash-out flow to transfer to another bank account
I joined the cash-out squad in an unprecedented moment. We have had around +R$2M more withdraws within a short timeframe of 3 months. This happened because the app opened to receive a Brazilian government subsidy, the coronavoucher program, an emergency aid for covid. This sudden growth of withdrawals highlighted many areas of improvement. I'll present my main projects that tackled users and business needs: • Creating feedback messages to improve the experience and decrease tickets • Redesigning the cash-out flow to transfer to another bank account
Product Designer & UX Researcher
iOS & Android
A large number of users could not withdraw
Generic error messages
New bank requirements overlapping current flow
Map and prioritize the main pain points of the cash-out journey
Add specific and helpful error messages
Create a new cash-out journey taking into account the major pain points
Add the new bank requirement to the cash-out journey
Add new UI to create a consistent experience across the wallet
In the discovery phase, my goal was to understand what problems to address, the target audience, and if the solution would actually address users’ pain points and business needs. I was mainly:
Consulting existing documents, and UX Research
Talking to the Customer Experience (CX) team
Collecting data from Mixpanel
After gathering all the data, I added the main pain points to each stage of the user's journey.
I invited the cross-functional team to make a dynamic, where they would add more context or pending topics they found.
This helped by making things visible and having a shared understanding of what was happening.
User's journey map on Miro after a workshop with the team
To see the big picture and the relationships between different parts of the journey, I started to build a service blueprint with the previous information.
I added screenshots of the current state of the flow, so I could visualize and focus on the screens available to users.
Service blueprint on Miro
Map of opportunities
With the insights from the previous exercises, I did a categorization of opportunities, then connected them to each milestone the team could focus on during the quarter.
The main problems were friction in the user experience and low performance in the cash-out system, given technical debts.
Map of opportunities based on the Opportunity Tree from Teresa Torres
Most engineers were focusing on technical debt, while I started focusing on the main issues related to the user experience.
The first project is the one that indicated a higher impact with the least implementation effort.
Creating specific error messages to improve the experience and decrease tickets
Along with engineering, we mapped:
+20 errors messages in the system
5 available error messages on the app
The 5 available error messages on the app. The last one was the most generic, used in all other's errors: ‘There was an error. Sorry, we cannot proceed with your withdrawal’
These generic error messages were leading to a high increase in tickets and harming the experience.
Users were not able to withdraw their money, understand what was happening, or if their money was there or not. 😰
The main challenge now was to translate all the system errors into actionable and easy-to-understand messages for the user.
Redesign of all error messages.
The colors in each note were categories that helped us to plan the implementation, for example:
Recurrent errors message are to be implemented first
Messages that would be treated in the API vs mobile
Or messages pending confirmation with CX team
⌛ For this project, 2 weeks was enough to:
Map each system's error with engineering support
Create specific user-friendly messages with actionable steps with the support of a UX Writer
Design each error message, being mindful of each illustration used
Create specs for engineering
Redesign the flow to transfer to another bank account
Besides the error messages, the journey to transfer to another bank had important pain points to be tackled:
Users inserted incorrect bank account information
A high number of tickets due to transferring being canceled
Along with a major overhaul of the new design system.
Main steps of the journey
Main pain points
Based on the most used financial apps by the users, I did a competitive analysis to uncover patterns and gather insights.
Screenshots of the competitive analysis on Figma
View of the main pain points
After sketching many screens, and gathering feedback from the team, this was the final interface to be tested with users.
Final interface tackling main pain points
A detailed look at saved bank accounts
Users now would be able to save more than one bank account.
The latest banks transferred would come first in the recent's list. A maximum of two banks was set to facilitate the reach of only the most recent ones.
The data showed that the majority of the users would transfer to their own accounts, so we displayed their names in the saved list to make it easier for them to visualize their own accounts.
*Although, this number was a bit biased. As previously, users could not save more than one account, they would prefer to transfer to their own most-used bank account first.
List of saved bank accounts and a detailed view of a user's saved bank accounts.
A confirmation screen with the main information before proceeding and the conclusion screen with updated feedback.
5 heavy users
Via Google Meet
Screenshot of the user testing with the user sharing their screen
Prototype view using Figma
Before user testing, I did qualitative research, with open-ended questions.
The goal was to understand how they got to know PicPay, their motivations to use the app, and their motivations to withdraw money. The interview was recorded with their authorization.
Later on, I transcribed it and categorized the insights. The atomic research was a way to share with the team facts, insights, and conclusions in small sentences, or “nuggets”.
This enabled all squads to check each other's research in a digestible way.
Spreadsheet with the analysis of the research
Key insights from the research
Users thought they could transfer money via PIX (the new Brazilian bank requirement) in the cash-out flow
"... I think that now with PIX things tend to get faster at any other bank, so I come here, I put the amount, and request the transfer!”
Users said they would abandon this feature to use only PIX
"I think the estimated time to transfer is too long, with PIX I won't need to use this feature because it will happen in minutes" (not for up to 24 hours)
Users missed having a transaction receipt beside the confirmation screen
"I think that the recipient's name could appear there, despite having it on the previous screen, and the transfer receipt. I don't know if it comes in a future screen but I’d like to see have a receipt to print…”
💡 Wait, what is this PIX?
PIX was a system created by the Brazilian Central Bank to bring instant payments to life.
This meant no more waiting for business hours to transfer money, as we had today. Any financial app eligible to add PIX would be able to offer instant payments with lower taxes. Good for businesses and users.
But, some things were beyond PicPay's or any financial app's realm… PIX was a wholly new and separate system that would exist in the apps.
It had its own prerequisites from the Brazilian Central Bank.
We were still learning if we could offer PIX outside the 'PIX System' that was being implemented.
But, from a small sample of users, we learned how confusing it could be to offer PIX and not have it in the cash-out flow.
An overview of the 43 pages guideline for the implementation of PIX
Based on the learnings from the user testing and our consideration of what would be important to have, I made a new proposal.
Iterating the confirmation screen:
Add a share/save option
Add more detailed information about the transaction
Add an explanation in case the transaction was not instant
Comparison of the different conformation screens
And the most important iteration given the PIX scenario:
Add PIX to the main screen
After the user testing, we not only advocated for having this functionality in this part of the funnel, but we also prioritized it above all other releases.
To support users in case they still use the old (TED) functionality outside business hours, we created a modal dialog explaining:
why they could not proceed
what time the transferring will be available
CTA offering PIX as an instant and free alternative
Screenshot of the app screen (from June 2022)
The purpose was to support users’ goals of transferring money right away while informing them about this new functionality.
Overview of the whole screens ready for handoff
Screenshots of the new design on Figma
Zoom in on some screens in light and dark mode, with post-it notes for tracking implementation
⌛ For this project, a month was enough to:
Plan the research, screen participants, validate remotely with users
Analyze and document the research in atomic insights
Ideate and design the light and dark modes
Iterate based on the user's and team's feedback
*Handover the first screen of the funnel, including PIX and the modal message of the PIX
*The release was broken down into small ones, and I left the company before handing over the other parts of this project.
Although I was not there for the whole implementation, it was an exciting project for a few reasons:
Frequently designing for iOS and Android
This was an incentive to keep studying Human Interface and Material Design while pairing with the Design Ops team to implement new components to our Design System
Strong teamwork with developers
Translating all system's error messages to user-friendly ones along with alternative paths, was only possible due to collaboration with developers
Documenting findings, the journey, and the team's tacit knowledge
Writing is mostly how I make sense of things, and documenting helped us to make sense of our squad's scenario in that new remote environment (due to Covid)
This also lead me to study more about asynchronous work
Create a backlog and start prioritizing the pain points
Validating early with users and often with developers helped me to create a backlog and prioritize the items
Shoutouts & Credits:
Design Ops team: icon visual style, and new design system directions.
UX Writer: revising the copy for the error messages.