UX / UI Design: WhatsApp Pay
0. Methodology
Design thinking
This proposal was done following a lineal and structured method: the "Design thinking" by the Stanford School of Design, applied to digital services.
1. Product definition
Challenge
"WhatsApp has asked you to develop an MVP for its messaging app. You’ll have to implement a new functionality where users can share their payments, split bills and make shared payments for gifts.
Being a new functionality, apart from the user experience design, we’d like to see a screen/s of the on boarding process for the first time users of the new service".
First step
Set the client's expectations for the project as well as the scope of the work area, its requirements and limits.
Basically try to answer questions that give context to the final goal of the service: What is it? Who's going to use it? How will they use it?
2. Research
Current app
The first thing to do is to study the current offering of WhatsApp services for individual users, its user flow and information architecture. How it all works.
Current Onboarding
I could rescue patterns used in the general Onboarding of the App for a more specific one in the payments function (color use, information order, etc.).
What about the market?
Bizum is the most used mobile payment method in Spain. It is integrated within your bank application. We can also find design patterns in this third party plugin tested by millions of users (how they send and receive payments, which steps to follow, legal and technical requirements, etc.).
The problem was, bank apps are connected to your account because it’s a part of their business (ES96 0183…). WhatsApp, not being a bank (yet) needs a way to connect to your savings account inside the app. I needed another source of intel.
As each bank's app procedure may vary, I used the app TuLotero because it faced the same dilema, money transactions inside the app without being a bank.
Other references
I found out during the project that Ana Sanchis Cabanas had already done a brilliant project covering this matter, you can find it here: https://bit.ly/3cccUqE
The already working "WhatsApp payments Brazil" was also useful.
2.1. User Guerrilla Test
I decided to make a questionnaire focusing on young adults, WhatsApp and Bizum users to dissipate doubts and locate potential risk or success factors such as:
· What kind of uses should we make the service for?(Sharing payments, direct transactions, periodic transactions…)
· Which platform should we give priority to? (Mobile, desktop, tablet…)
· Which company should be our reference? (Bizum? Verse? Together Price?)
· Are we missing something?
· Does the client perceives the blend of messages and payments as something positive?
· Why would they change Bizum for WhatsApp?
Extracted quotes:
3. Analysis
Conclusions
Key concepts
Consistency: "You complete me", without altering the overall WhatsApp set of UI / UX rules, achieve to insert the payment functionality through different ways, all of them intuitive, fluid and coherent. Right now you can create a group, add a new contact or send a file in various ways, Pay has to comply the same nature. Also designate a central area to operate and make decisions (an overview panel).
Speed: fast transactions, we need to beat or equal Bizum at the number of screens the user has to go through/interact with in order to make a payment.
Gamification: highlight the dynamic, social and positive aspect of shared payments through visual iconography. Rather than individual payments, the goal here is to achieve a common goal. At the same time we respect people’s privacy and their right to refuse a payment they don’t consider fair.
4. Design
User stories
User story #1 & #2
User story #3
Onboarding wireframe
Create bill wireframe
Receive bill wireframe
Onboarding User Interface
Create bill User Interface
Receive bill User Interface
5. Validation
I decided to only cover UX / UI areas, but the next step would be to code the design into the app and test it with real users (just like WhatsApp is doing in Brazil).
Future iterations to develop:
· Multiple editors: make it possible for other users to edit the bill.
· Open amount: for crowdfundings, gifts, projects, etc.
· Visibility (public): public payments for businesses: concerts, events, etc.
· "Subscriptions": periodic payments to individuals (e.g. carpooling or shared Netflix)
Graphic Designer, JS Developer & Linux Freak
2yJugón!
Digital Designer at Awwwards
2y👏👏