August - September, 2022
Building a seamless barcode and QR Code Pix reader experience for Bradesco Bank
I designed and implemented smart camera-based scanners for barcode and QR Code Pix payments inside Bradesco’s corporate segment app — improving speed, security, and usability for entrepreneurs, and streamlining their end-to-end payment journeys.
YEAR
2022
PROJECT
BRADESCO BANK
CATEGORY
UX/UI
PROJECT DURATION
1-2 MONTHS
MY CONTRIBUTION
The PDPJ offers an exclusive suite of services tailored to the corporate audience. During the project, I worked on various aspects, including payment processing for bills, utility bills, taxes, and PIX. I collaborated with a multidisciplinary team, from the project kickoff and stakeholder immersion to the project handoff, encompassing deliverables for developers and approvals with the relevant responsible departments.
Research
75%
Discovery
90%
Visual Design
99%
Interaction Design
94%
Requirements Gathering
73%
Concepting
99%
THE GOAL
Bradesco embarked on a challenging strategy to replace NET Empresa, its primary service channel for the legal sector. A team of experts was selected to create a new application, PDPJ, with modern technologies and features. This platform was designed to enable entrepreneurs, individual microentrepreneurs (MEI's), and small and medium-sized enterprises (MPE's) to make, manage, and automate payments securely, transparently, and swiftly. This new channel was free from the legacy system's issues and complaints, focusing entirely on user-centricity.
THE CHALLENGE
I developed a comprehensive payment journey with a subhome, barcode/QR Code PIX reader, PDF file reader, encompassing all stages of payment and scheduling completion, mapping out exception scenarios, and transaction receipts. The project was divided into phases, with this one focusing on the barcode/QR Code PIX reader. More details about the complete scope and my contributions are available in the other portfolio cases. Here, I present the problems encountered during research and the solutions developed to meet the project requirements.
TAGS
Mobile app
Android
IOS
Payments
Customer Journey
Bradesco
THE TEAM
DEV. TEAM
+12
DESIGNERS
2
PRODUCT OWNERS
2
PROJECT MANAGERS
2
01
Studies and analysis for journey construction
Alongside my product team, I studied the behavior of the online payment market for bills, utility bills, and taxes through benchmarking and analysis of competitor products. My goal was to identify the key successes and shortcomings of our competitors in order to create proposals that addressed these pain points and were even more effective in capitalizing on the successes. Following this, after building the initial versions of the prototype, a usability test was conducted with MEI and MPE users to refine the project further.
Hybrid bills
We have observed that utilities and beneficiaries are issuing hybrid bills, which include both barcode and QR Code PIX as valid payment methods.
Benchmarking
I tested and evaluated the payment navigation of readers from various competitors in the segment. I noticed that some are already adopting this hybrid journey, which indicates a market trend.
Nubank
PF, PJ
Itaú
PF, PJ
C6
PF
Inter
PF, PJ
Santander
PF
Next
PF
+3
Apps
Usability test
I gathered NET Empresa clients to test the PDPJ and discover their payment habits while collecting feedback on the functionality of the reader
Bruno, 33 yrs.
Civil Engineer, MEI
Average of 10 payments per month.
William, 52 yrs.
Education, MPE
30 payments per month, including employees salary.
Joelma, 53 yrs.
Craftmanship, MEI
Average of 15 to 20 payments per month.
Adriane, 36 yrs.
Groceries store, MPE
Over 50 payments per month.
Carolina, 25 yrs.
Food, MEI
Average of 50 payments per month.
Janaina, 34 yrs.
Food, MPE
Makes about 40 to 50 payments per month.
Goals
Analyze the navigation and perception of the payment journey.
Methodology
Usability testing and semi-structured qualitative interviews.
1
Overview
Sample characterization, objective, and methodology.
2
Sample profile
Mapped habits and behaviors.
3
Beggining of the journey
Usability journey
4
Evolution of the journey
Occurrences and findings in the usability test.
5
Insights e recommendations
Insights derived from the user study.
6
Conclusions
General impressions of the test and the PJ payment experience.
Discoveries
After research, we’ve come up to these 4 main discoveries, which were the focal points while designing the product’s solution.
QR Code x Barcode
The QR Code PIX is viewed positively but is less commonly used than the barcode for making bill payments.
Hybrid bills
The majority of users have started noticing that their bills offer more than just one payment option, through both the barcode and the QR Code PIX.
Pix
Payments via PIX are mentioned as the second most common method used by customers.
Format
The majority of bills arrive in barcode format — either digital or physical — and are always paid through the mobile app.
02
AS-IS: Notes on Net Empresa
I investigated the behavior of the payment section and camera scanner in the current app, NET Empresa, and collected some important data that helped me build a proposal with more features, addressing the main pain points that users face in the current product. The app lacks value in a lot of payment features.
“The app doesn't allow typing the barcode number, it always forces me to directly open the scanner.”
“The payments section doesn't have everything I need. It's quite dull.”
"I can only use Pix as a payment if I navigate to the Pix menu. I miss having everything available at the same location.”
Insights
Compilation of insights gathered post studies and evaluation of online stores.
Ratings & Reviews
3,7
/ 5
15 m + downloads
03
Visual Design
For the scanners feature, I worked on representing the layout and macro structures, sketching how I envisioned the dynamics of the interface. Along side with the Liquid team from Bradesco, we had access to a vast library of components, icons, buttons, illustrations, and consistent design elements to turn those wireframes into high fidelity prototypes.
04
Customer Journey
With all of this in mind, I got to the proposal illustrated below. In this section, the successful path of capturing a barcode is being demonstrated. In the next section, I've listed the exception scenarios I anticipated for this journey and the ways these cases were handled.
App Login
After the user logs in, right in the quick access section, there is a shortcut to activate the barcode reader.
After scanning, the user is directed to the payment journey, which is detailed further in another case on my profile.
05
Exception Scenarios
Error handling and prevention are crucial to avoid causing anxiety or bad impressions when interacting with digital products. Additionally, there is a need to consider the user's learning curve. For the scanners, I identified five exception scenarios which were addressed with simple and efficient solutions.
1
Walkthrough
First-time user tutorial for the reader. This feature is displayed only the first time he opens the scanner, and the user can skip it if he wants to.
2
Difficulty recognizing the code
Common hypothesis for devices with poor cameras, dirty lenses, defective focus sensors, or long distances.
3
Scratched, illegible code
This scenario can occur when the barcode mask is scratched, scribbled on, stained with pen ink, etc.
4
Low light environment
This scenario received special attention. When the app detects that the camera is in a dark environment, it provides feedback to the user and suggests using the flashlight to improve reading. The user can choose to ignore the suggestion if desired.
So what happens?
If the reader can’t detect the barcode or QR Code as shown above, a modal appears with options to try again or enter the code manually.
The modal appears after 10 seconds of scanning, based on research showing that competitors provide feedback between 8–15 seconds. Ten seconds was chosen as the optimal time to reduce user anxiety and save battery."
To sum up
Delivered Results
This project redesigned Bradesco’s barcode and QR Code readers, simplifying the main entry points of the payments journey. By streamlining scanning and manual input, we reduced friction in a critical step for business owners, improving accuracy, adoption, and speed across the corporate segment app.
The improvements was not only about usability — it unlocked scale. By removing friction from the readers, Bradesco reinforced the reliability of it's payments platform during a year of digital acceleration, where QR Code transactions grew massively in Brazil. The redesign connected directly to customer trust, automation, and operational efficiency.
FASTER SCAN COMPLETION
INCREASE IN QR CODE PAYMENTS
TRANSACTIONS /MONTH (EST). VIA BARCODE OR QR CODE PIX
What went well
Deadlines
The collaboration of the entire team greatly contributed to meeting the deadlines for DOR, CX Sync, PI Planning, and design sprints. We delivered the user journey well ahead of schedule."
Developers 🤝 Designers
The involvement with the technical team was highly productive. The designers and developers were able to collaborate effectively to address technical feasibility and product/experience needs.
Room for inovation
The project budget was substantial, which allowed us the time and resources to test user journeys and propose significant changes to the product. Not only did I get to develop my ideas but also to test it out with real users and make changes along the way to ensure user’s needs were being fulfilled.
What I learned
Specialist vs Generalist
I learned to work with experience specialists. Prior to this project, I was a generalist designer, performing all design functions. In this project, there were UX Writers, UX Designers, Product Designers, and UX Researchers, which got me to engage and collaborate with the unique expertise of each niche.
Design Processes
Agile design methodologies and product development stages were strictly followed, as per the rule. Which got me to further develop my skills in Lean UX and Design thinking.
Banking Processes
I delved deeply into the processes involved in payments. I learned regulations about taxes, accounts, payments, and also about the governmental bodies that oversee all of this."