PagSeguro App
UX Design @ PagSeguro UOL, 2014
TL;DR
Creating a complete digital payment experience in a moment back in time when doing any financial transaction using mobile devices was considered by most users unsafe.
Improve PagSeguro App, a mobile payment. At the time I joined the team, the user could make payments by inputting credit card and personal data in a form. They were, however, skeptical about the credibility of the app.
The company
Improve PagSeguro App, a mobile payment. At the time I joined the team, the user could make payments by inputting credit card and personal data in a form. They were, however, skeptical about the credibility of the app.
The challenge
Step 1: Discovery
By doing usability tests, field research, and in-depth interviews with small business owners, I collected the insights below:
🚨 Problem
Lack of credibilityFor many people, the name PagSeguro didn’t ring a bell. Besides, users felt that inputting their credit card data on a third-party device was unsafe.
💡 Solution
Integrating the brand UOL to the logo on the appAlthough most users in the research weren’t aware, PagSeguro is owned by UOL, one of the main internet corporations in Brazil. Once the name “UOL” was associated with the app, the users felt immediately more confident to use it.
General improvements on the UI Design also brought more credibility, as after the interface improvements the app, according to the users “looked like a real app”.
🚨 Problem
Users would make typos or delete information on the checkout by accidentAs the checkout was a long form on a single screen, users needed to scroll the page to fill it completely. During the process, they would touch on random fields and change undesired information accidentally. The mistakes happened especially on devices of smaller screens.
💡 Solution
Adopting the native guidelines of the Android platform and usability best practices for mobileBy providing step-by-step navigation, with a single task per screen, the user could navigate without scrolling the screen so much. Also, using native interface elements, like the date picker, allowed them to complete the checkout with less friction.
🚨 Problem
Paper receipts were the primary way to keep track of the transactionsAlthough the app had a basic history area, business owners would still print the receipts of the transactions to keep track of their sales. But storing the paper pieces was considered a hassle, and, eventually, some receipts would be lost.
💡 Solution
Adding filters and order criteria to the list of transactionsBy introducing these features in the list of transactions, users would be able to locate faster given payments. Later on, we also added sharing and forwarding features.
The new experience
Based on the insights from my research, I worked on improvements for the app. Along with de UI Designer, I created:
iOS, Android, and WindowsPhone native apps
The applications had the exact same features, however, they differed in some interface elements and interactions as we applied the guidelines of each operational system. Another factor that demanded some tweaks on the design was the screen sizes of the devices.
Further iterations
Over time, by collecting more user insights, running usability tests, and tackling the product roadmap, I unlocked the following achievements:
Created an interface for tablets (iOS and Android)
Released a Bluetooth card reader that required the PIN after swiping the card; all the data would be encrypted, making the transaction safer than before
Added more devices to the compatibility list
