UX / UI Design: WhatsApp Pay

UX / UI Design: WhatsApp Pay

No alt text provided for this image

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.

No alt text provided for this image

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?

No alt text provided for this image

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.

No alt text provided for this image

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.).

No alt text provided for this image

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.).

No alt text provided for this image

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.

No alt text provided for this image

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

No alt text provided for this image

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?

No alt text provided for this image

Extracted quotes:

No alt text provided for this image

3. Analysis

Conclusions

No alt text provided for this image

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

No alt text provided for this image

User story #1 & #2

No alt text provided for this image

User story #3

No alt text provided for this image

Onboarding wireframe

No alt text provided for this image

Create bill wireframe

No alt text provided for this image

Receive bill wireframe

No alt text provided for this image

Onboarding User Interface

No alt text provided for this image

Create bill User Interface

No alt text provided for this image

Receive bill User Interface

No alt text provided for this image

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)

No alt text provided for this image


Damian Alcaraz García

Graphic Designer, JS Developer & Linux Freak

2y

Jugón!

Like
Reply

👏👏

To view or add a comment, sign in

Insights from the community

Explore topics