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

#mobilepayment #iOS #Android #WindowsPhone

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

The process

By doing usability tests, field research, and in-depth interviews with small business owners, I collected the insights below

🚨 Problem

Lack of credibility

For 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 app

Although 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 accident

As 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 mobile

By 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 transactions

Although 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 transactions

By 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

* The new experience

iOS, Android and WindowsPhone guidelines

Based on the insights from my research, I worked on improvements for the app. Along with de UI Designer, I created two different new versions of the application: one for iOS and another one for Android. They 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.

Later on, we also released an app for WindowsPhone with the same features.

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

More projects

Superbid

Easynvest App