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/