WhatsApp payments: A Doable and Accessible Reality.
Mobile App + VUI prototyping
Payments? In WhatsApp?
I can´t help it but remember the good old days when the Internet started to be accessed by some of us, privileged Westerners, sometime around the late '90s.
ADSL connections. Landline calls that had to be cut off if your family had to use the internet. A search page called “Google” that could find anything you needed to know. The first e-mail companies: Lettera, Yahoo, Hotmail. You name it!
But as an adolescent then, I will always remember the first instant messaging service that had a great impact on our generation, “socially” speaking: MSN Messenger. The eternal sessions looking at the screen, waiting for that friend or “special somebody” to log in. The buzzing option to call somebody´s attention. Even the “tune option” to show off your music taste to those users you knew (or not!). A mixture between today´s WhatsApp, Telegram and Tinder apps! But of course, having to sit around in front of a computer waiting, as smartphones and tablets did not exist yet.
Technology has really advanced in the last 20 years. Facebook was the next social platform that had a great impact on our lives in this race towards the modern future. And of course, it was only a matter of time that they incorporated WhatsApp to their brand, being today´s equivalent to MSN Messenger.
Created in 2009 by Jan Koum, WhatsApp has over 1.3 Billion users. In terms of shared data, 55 billion messages and 4.5 billion pictures get sent through this app on a daily basis, worldwide.
So if it used so much, why not add a payment option to it so users can transfer money between them? And taking this matter further, once that prototype is shaped, why not also draft an accessible option through a voice interface?
Let´s go for it!
APP WIREFRAMING
I am sure that Facebook is already working on this payment feature to substantially increase its WhatsApp users. So I wanted to limit the number of screens that I would use to develop this new feature, making it more challenging and comparing these screens in the future with what their developers have done. It would be a total of three screens to keep it short and sweet.
I wanted to create low-fidelity wireframes of the app using Balsamiq. I selected an iPhone 8 frame and reproduced the main Chat screen aesthetics of the iOS version in the first screen, to continue working on this new feature through the next two screens.
Screen 1 → I added the “Pay” feature between the “Broadcast list” and “Create group” options. I thought of course of removing one of the icons of the bottom navigation bar (status for example) and substituting it for a payment icon, but I wanted to add this new feature without making a major change in the current set up.
Screen 2 → The user is taken to a new screen where they can search users by alphabetic scroll down or the search bar up at the top. Each contact has an amount of money set up as a CTA(5€/10€/Other) to speed up the process. The user can also see their account/bank details and edit them.
Screen 3 → The user has to confirm the payment. They need to introduce the security code sent by SMS to their mobile phone and confirm the transaction.
To create the interaction between the screens for this prototype, I used Marvel, loading each screen as an image:
VUI DESIGN
Right! The above feature could be developed as per the above prototype. But by only covering this interface development, we would be excluding all of those users that have disabilities, such as those with physical or mental impairments. So why not design this payment feature for a voice user interface (VUI)?
As some of you iOS users already know, this instant messaging platform is integrated with Siri, Apple´s native voice assistant. Thanks to this, Siri can assist you with the messages and calls you want to process through WhatsApp.
So by connecting Siri with WhatsApp, all users could process their payments through their mobile phone or their Apple HomePod (or Google Home, if they connect Siri with their Google Assistant).
Protopersona & journey
In order to design this VUI prototype, I first needed to understand who could be one of the main users of this new feature.
In this case, let me introduce you to Valeria. A visually impaired 23-year old woman that swims professionally for the Paralympic Spanish team in a local sports center in Madrid.
Instant payment mobile software such as Bizum (very popular in Spain)and many more apps out there are not designed or developed for users with functional disabilities.
You can see a clear example of this in the above journey that Valeria follows. Daily mobile operations such as transferring money to one of your contacts can´t be accessed by everybody.
There are of course, screen readers. But do they work well with apps in mobiles? How long does it take the user to choose the option they wanted from all the ones the system reads?
Language factors to be considered
According to Stina Olofsson´s Master´s Thesis from 2017 ´Designing interfaces for the visually impaired´, interviewed users (different age groups, genders, and levels of blindness) thought the following in terms of the voice and tonality used in VUI´s:
- The majority did not care about the voice used in their VUI
- The only exception would be for leisure activities, such as reading books. In that case, they found it very important for the VUI to have a pleasant voice.
- An important factor to them was being able to control the speed of speech of their VUI. The technologically experienced wanted to be able to hear it faster; the elderly (with some hearing impairment), wanted to be able to slow it down.
Placeona
So where will these voice interactions take place between our proto persona (Valeria) and Siri? This scenario is what is called placeona and it would look something like this:
Although Valeria could use her mobile phone outdoors, in order to avoid loud noises and external interruptions, the ideal scenario for her using this payment feature would be her home, in a comfortable space, such as the living room where her VUI is located.
System persona
With all of the previous details gathered, the last step before starting the VUI design is defining the characteristics of the assistant.
Research shows that female voices tend to empathize better with users. A medium tone and speed would need to be implemented in each question asked so it could meet our researched user's expectations. These parameters will be implemented in the prototype´s prosodies.
Within each choice of answers the user can give in the prototype, there will be several utterances included, taking into account the speech of an adult which can be more formal or informal. For example, if the user can say ´yes´or ´no´, utterances included will be ´yes, please´ and ´no, please´.
Flowchart
To represent how the user would interact with Siri, I drafted a basic flowchart to understand the different options that would need to be taken into account when prototyping the VUI.
Prototype
In order to represent some of the above actions, I used Voiceflow, the program that allows building voice apps with a wide range of prosodies (voice tone, speed, etc) and utterances (user´s answers interpretations). Below you have a screenshot of the flow I followed in which I took into account all the previous research information gathered:
I transferred this flow as an action into Google´s console and tested it. Would you like to know how this interaction would actually sound? Please check out the below video:
FUTURE IMPROVEMENTS
It is a matter of time that WhatsApp launches instant payments through the app. My prototypes wanted to show in a simple way how it could be built including all users, just by developing the same flow in different interfaces.
Both payment features (mobile app and VUI) prototypes would need to be of course, iterated and further developed in terms of security and legal purposes.
And most importantly, they would need to be tested by the main users of both interfaces to check their usability.
CONCLUSIONS
Integrated services can be considered a big bonus by many customers. The more actions you can process through the same app, the better. And if those apps and devices are built in ways that they can be accessed by all users, it would make a big difference in the market. That was the whole point of this exercise!
My take on the voice flow has been developed taking into account only one specific type of impairment. This makes me think of all the different disabilities there are out there and the huge room for improvement and innovation that can be rolled out in the UX/UI world.
Making products/services accesible nowadays is possible. But companies have to understand that there is an urgent need to include functional disabled users within the technological world. Perhaps we all need to be more educated in this field in order to empathize more with those users and work towards advancing their control of digital technology.
