Overview
Problem
Initially, explaining PIX to the users was highly complex, and the central bank had significant requirements about the overall user experience and communication.
Initially, explaining PIX to the users was highly complex, and the central bank had significant requirements about the overall user experience and communication.
Initially, explaining PIX to the users was highly complex, and the central bank had significant requirements about the overall user experience and communication.
Outcome
In our testing and on the Google store, was highly praised for its simplicity. Used daily for more than 55.000 clients
Outcome
In our testing and on the Google store, was highly praised for its simplicity. Used daily for more than 55.000 clients
In our testing and on the Google store, was highly praised for its simplicity. Used daily for more than 55.000 clients
About
Smartbank
Was designed to empower small and midsize businesses with inclusive and transformative financial solutions, using Open Banking principles
Was designed to empower small and midsize businesses with inclusive and transformative financial solutions, using Open Banking principles
Was designed to empower small and midsize businesses with inclusive and transformative financial solutions, using Open Banking principles
Press
My role
Product Strategy - Senior Product Designer, End to end Visual Design + Interaction Design
Product Strategy - Senior Product Designer, End to end Visual Design + Interaction Design
Timeline
2 Sprints - 2020/2021
Team
Andressa Luz, UXW
Dan Mendes HPD
Rafael Feroli, JPD
Ricardo Ventura, VD
PIX Squad
The beginning
What's PIX?
Who are our users
/personas?
Who are our users
/personas?
Who are our users
/personas?
Launched by Brazil’s central bank, PIX is a completely new way to transfer money, using your data (cellphone, email, CPF, CNPJ) as Keys to send and receive money free of charge
Launched by Brazil’s central bank, PIX is a completely new way to transfer money, using your data (cellphone, email, CPF, CNPJ) as Keys to send and receive money free of charge
Launched by Brazil’s central bank, PIX is a completely new way to transfer money, using your data (cellphone, email, CPF, CNPJ) as Keys to send and receive money free of charge
Launched by Brazil’s central bank, PIX is a completely new way to transfer money, using your data (cellphone, email, CPF, CNPJ) as Keys to send and receive money free of charge
A new thing for the financial system then, do we have time?
A new thing for the financial system then, do we have time?
A new thing for the financial system then, do we have time?
Not quite… The demand was to complete as fast as possible to be considered a Launch partner with the Central Bank AND use as a selling point for the Smartbank Bank as a Service.
Okay, let's begin then
Not quite… The demand was to complete as fast as possible to be considered a Launch partner with the Central Bank AND use as a selling point for the Smartbank Bank as a Service.
Okay, let's begin then
Not quite… The demand was to complete as fast as possible to be considered a Launch partner with the Central Bank AND use as a selling point for the Smartbank Bank as a Service.
Okay, let's begin then
Not quite… The demand was to complete as fast as possible to be considered a Launch partner with the Central Bank AND use as a selling point for the Smartbank Bank as a Service.
Okay, let's begin then
Understanding the context
The requirements
The requirements
The requirements
The Brazilian Central Bank send us very detailed User requirements for this project.
Some key takeaways:
The Brazilian Central Bank send us very detailed User requirements for this project.
Some key takeaways:
The Brazilian Central Bank send us very detailed User requirements for this project.
Some key takeaways:
The Brazilian Central Bank send us very detailed User requirements for this project.
Some key takeaways:
1 It needs to be on the on the bank first page
2 We need to focus the experience on Smartphones
3 The writing is something that we can not change
Do we have something today to start?
Do we have something today to start?
Do we have something today to start?
The old way to send and receive bank transfers TED was ready, and part of the PIX requirements was to use bank data as a key.
We have something to build on.
The old way to send and receive bank transfers TED was ready, and part of the PIX requirements was to use bank data as a key.
We have something to build on.
The old way to send and receive bank transfers TED was ready, and part of the PIX requirements was to use bank data as a key.
We have something to build on.
The old way to send and receive bank transfers TED was ready, and part of the PIX requirements was to use bank data as a key.
We have something to build on.
Going for it
Ok, Let's make some sketches to see where we are
Ok, Let's make some sketches to see where we are
Ok, Let's make some sketches to see where we are
For the sake of time and to guide some conversations with the team I sketched some pages for the team to visualize where we can go
For the sake of time and to guide some conversations with the team I sketched some pages for the team to visualize where we can go
For the sake of time and to guide some conversations with the team I sketched some pages for the team to visualize where we can go
For the sake of time and to guide some conversations with the team I sketched some pages for the team to visualize where we can go
Fig Jam Before fig Jam
Fig Jam Before fig Jam
Fig Jam Before fig Jam
To save as much time as possible I was doing wireframes with Design System elements and flows in a session on Figma with the PIX Squad.
The following wireframe, after a cleaning, is the result
To save as much time as possible I was doing wireframes with Design System elements and flows in a session on Figma with the PIX Squad.
The following wireframe, after a cleaning, is the result
After some back and forth
After some back and forth
After some back and forth
After some sessions and feedback from the central bank, we decided to focus on Writing to explain to our clients what PIX is and go for the following flows:
After some sessions and feedback from the central bank, we decided to focus on Writing to explain to our clients what PIX is and go for the following flows:
After some sessions and feedback from the central bank, we decided to focus on Writing to explain to our clients what PIX is and go for the following flows:
After some sessions and feedback from the central bank, we decided to focus on Writing to explain to our clients what PIX is and go for the following flows:
1 First Access / New Key
1 First Access / New Key
Here, we are presenting what pix is, and using the same idea from the Onboarding and another service we presented how to register a key.
Here, we are presenting what pix is, and using the same idea from the Onboarding and another service we presented how to register a key.
2 Pay / Transfer
2 Pay / Transfer
Flows for all Payment request scenarios
Flows for all Payment request scenarios
3 Request payment
3 Request payment
Flows for all Payment request scenarios
Flows for all Payment request scenarios
4 Refund
4 Refund
Flow to return a payment
Flow to return a payment
Solutions
Presenting
Presenting
After more back and forth with the team and some guerrilla testing, we were ready to present the solutions
After more back and forth with the team and some guerrilla testing, we were ready to present the solutions
After more back and forth with the team and some guerrilla testing, we were ready to present the solutions
First Acess / New Key
First Acess / New Key
QR Code - Pay / Transfer
QR Code - Pay / Transfer
Request Payment with QR code
Request Payment with QR code
Refund
Refund
Final Designs
First Acess / New Key
First Acess / New Key
PIX KEY - Pay / Transfer
PIX KEY - Pay / Transfer
Requesting Payment
Requesting Payment
Evolving
After our handoff
After our handoff
PIX was launched, and we sought ways to compare and evolve our experience. with that benchmarks were necessary.
PIX was launched, and we sought ways to compare and evolve our experience. with that benchmarks were necessary.
PIX was launched, and we sought ways to compare and evolve our experience. with that benchmarks were necessary.
How to improve
How to improve
There were several ways to go about it. A couple of examples below
There were several ways to go about it. A couple of examples below
There were several ways to go about it. A couple of examples below
1 Fingerprint > Password
1 Fingerprint > Password
We suggested changing the password for fingerprint or Face ID as a safety feature
We suggested changing the password for fingerprint or Face ID as a safety feature
3 Connection between Keys and contacts
3 Connection between Keys and contacts
Suggestion to save the keys to a specific contact. With was not a feature in the PIX launch
Suggestion to save the keys to a specific contact. With was not a feature in the PIX launch
2 More highlight for PIX services in the future dashboard
2 More highlight for PIX services in the future dashboard
After a very successful launch, the suggestion was to bring the PIX services front and center in the future welcome dashboard
After a very successful launch, the suggestion was to bring the PIX services front and center in the future welcome dashboard
1 Fingerprint > Password
We suggested changing the password for fingerprint or Face ID as a safety feature
2 More highlight for PIX services in the future dashboard
After a very successful launch, the suggestion was to bring the PIX services front and center in the future welcome dashboard
3 Connection between Keys and contacts
Suggestion to save the keys to a specific contact. With was not a feature in the PIX launch
There's more if you want to:
There's more if you want to:
If you like what you see and want to work together,
get in touch!
Thanks for Scrolling!
If you like what you see and want to work together, get in touch!
Thanks for Scrolling!