PagSeguro NFC

Pagseguro Nfc Brazil’s first peer-to-peer mobile payment solution, using the NFC* technology, where connection occurs only in short range such as on devices’ touch, tap, or extreme approximation *Near-Field Communication

http://www.desari.com.br/

In 2011, Nokia needed to establish their position

clients

as technological reference in NFC, present in

Nokia do Brasil & UOL

most of their mid- to top-end devices, and started a program in partnership with its R&D institute in Brazil (Nokia Institute of Technology) to develop novel NFC solutions.

concept

Mauricio Sá Ribeiro & Milton Onodera

After the concept phase, focus was driven into an NFC payment solution in cooperation with local partners. Since there was no secure NFC element

UX design and Information architecture / co-lead for usability tests

in the current devices, working with UOL’s

Mauricio Sá Ribeiro

Pagseguro (a brazilian PayPal-like service) was a technically viable alternative.

Visual and Motion Design / co-lead for usability tests In collaboration with the institute’s Usability Lab, initial ethnography and benchmarking set the

Milton Onodera

project’s main mission: to develop a solution that allows mobile payment in a quick and simple fashion following the premises “easy, safe, and trustworthy”.

Development, Quality assurance and Usability tests

Nokia Institute of Technology

Home Screen Since we were dealing with a not-so-widespread technology, it was essential to make the app as simple and

R$ 23,12

easy-to-use as possible.

Following Pagseguro’s business model and technical requirements, two apps

1

2

3

Standard Account to send money.

4

5

6

The app has 3 sections (tabs on top):

7

8

9

00

0

had to be built: one for a Business Account to receive money, one for a

Aproxime os celulares para poder pagar

1. HOME main action is highlighted

Últimos pagamentos autorizados

Empório Bodega Enviado agora mesmo

The Pet Shop Enviado há 10 minutos

through visual and motion

R$ R$

23,12 13,20

Arnoldo Zinega chua.zinega@uol.com.br

2. History balance and transactions 3. Settings account and app settings

Receber The screen’s actions are designed in a way to avoid accidental button triggers during the “phone tap” interaction.

Empório Bodega vendas@emporiobodega.com.br

The main (client) app

The point-of-sale app

has an animation showing the main “phone tap”

has a blinking cursor calling for price input, with a

interaction to make a payment.

“Receive payment” call-for-action button.

Requesting payment Simple informal human language is used to tell the point-of-sale user what needs to be done: “approach devices to receive [amount]”.

The screen displays an animation explaining the “phone tap” interaction and has a faint yet visible CANCEL swiping button.

For such actions, right-handed majority was targeted where lower screen thumb abduction (out of the palm) represents a negative action.

To avoid accidental button triggers during the “phone tap” interaction, simple button clicking (especially on the lower half of the screen) was replaced by swiping buttons.

Aproxime os celulares para receber

R$ 23,12 Cancelar

The point-of-sale app

Confirming payment After the “phone tap”, where the backs of each device are (nearly) physically touched for the NFC data exchange, the last used payment method is evidenced and selected by default.

•••• •••• ••••

2342

Confirme o pagamento de

R$ 23,12 para Empório Bodega

Segure e deslize update Wallet

The main (client) app with the “Hold and slide” dual-action button, that required “guerrilla testing” for quick validation.

Since this is a secondary action, the payment method scroller is on the top, farthest from the main lower screen interaction.

Through ethnography, we could see how people usually handled the phones during all process, thus allowing us to effectively set main and secondary action areas.

Slide the swiping button to the right to confirm.

Payment receipt After the transaction is done on the cloud, each device receives a payment receipt. The main status area, initially used to explain the “phone tap” interaction, turns into a rolling “loading”

Pagamento autorizado

symbol before becoming either green (authorized payment), red (payment

Pagamento autorizado

denied) or grey (error, pending payment). The center has an accessory

Você enviou

R$ 23,12 para Empório Bodega

text that further details every step and confirmations.

Since the payment confirmation can take long, if the connection is bad, attention

Você recebeu

R$ 23,12 de Arnoldo Zinega

to the screen might reduce. Therefore, there is a combination of visual (the big

Ok

colored circle with the screen’s text),

Ok

tactile (phone vibration) and audio (branded short audio clip) feedbacks.

The main (client) app

The point-of-sale app

Back to Home Screen To keep the apps as simple as possible, most of the work has to

R$ 23,12

be done in the background.

Server communication and background actions were all

Aproxime os celulares para poder pagar

Enviado agora mesmo

The Pet Shop Enviado há 10 minutos

1

2

3

The apps were built for Nokia’s

4

5

6

7

8

9

00

0

then main operating systems Symbian and MeeGo for

Últimos pagamentos autorizados

Empório Bodega

designed to minimize user effort.

multi-platform interaction.

R$ R$

23,12 13,20

Arnoldo Zinega chua.zinega@uol.com.br

The main (client) app

Error handling and synchronization were great challenges, but essential to master in order to gain user trust.

Receber Empório Bodega vendas@emporiobodega.com.br

The point-of-sale app

NFC PagSeguro

ilfdT

Transaction Network Error and Customer Service

2. iBanking

1. POS 1.1. Transaction initiated

1.2. Abandoned payment (timeout)

.at$ •@,1 11J 12 18

•i-� .. (111218

.at $ •Q,1 11J 11 18

Yes

Receben:lo

R$1 3,80

2.2. Network failure

2.1. Transaction initiated

No

Nao foi recebido

Enviando

R$13,8o

R$1 3,80

Nao houve confirma�ao do comprador ou ocorreu uma falha no proceiso.

para Arnoldo Zinega

Network?

No

Nao foi enviado

R$13,8o para Arnoldo Zinega

Yes

Con e,�o indis ponivel.

The server was reached and there ·Nas no response from iBanking within the time limit (e.g. 20 seconds!.

Since the server wasn't reached and iBa nking is resp onsible for t riggering the transaction, it didn't even start. POS gets an 'abandoned transaction' result.

Tapping'Ok' ta kes t o the Home Screen (No Network! (p. 41.

1.3a. Transaction error

Ops, ocorreu um erro durante o pagamento Erro ao rece be'

R$13,8o

---

Atess e su a ton ta ou ligu e ,ara nosso SAC para ver o status do pegamen to.

The server wasn't reached, therefore the result is a ' pending t ransaction'.

2.3. Transaction error

1.3b. Customer service

....••

Ops, ocorreu um erro durante o pagamento

••

....

Tap the 'SAC' button

No

Erro ao enviar

R$13,8o

-para Arnoldo Zin ega

Atesse sua tonta ou ligue para nos so SAC para ver o status do pagamento.

The t ransaction did start, but the server couldn't be reached to get a response, therefore, the result is a 'pending transaction'.

nfcpagseguro-symbian-screenflow-121 Last Updated: Tue Jun 12 2012 by MaJricio Sa Ribeiro

page 10 of19

Pagseguro Nfc With very positive media feedback (Globo News, Gizmodo, ...) and great user response, the objectives were reached and the ROI was exceeded.

The program received maximum satisfaction score from the clients.

http://www.desari.com.br/