Cash out Experience

Discover

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


Define

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

Service blueprint

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

Develop

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

Deliver

⌛ 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

• Handover

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

Competitive analysis

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.

Validation

• 5 heavy users

• Via Google Meet

• Qualitative interview

• User testing

Screenshot of the user testing with the user sharing their screen

Prototype

Prototype view using Figma

Atomic research

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

Iteration

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

Outcomes

⌛ 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

• Create specs

• *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.

Reflection

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.