Welcome to WhatsApp Pay — a UX/UI case study

Adding a feature to an existing App.

photo: pixr8.com

Have you ever had problems when organising payments with friends? …ave you ever forgotten to pay your friends? Or maybe they forgot to pay you? And have you ever had problems when not having same payment platforms than your friends?

If you ever had a similar problem you probably will like my idea !

PROJECT SUMMARY

This is an individual project done while attending the UX/UI design bootcamp at ironhack , with the aim of practicing and develop myself as a professional in the UX/UI world. To develop my project I followed the design thinking methodology that helped me a lot to go step by step and achieving to have a good final solution.💪🏼

Briefing: Add a feature to an existing App

Project total duration: 4 days

My time organisation for this project:

DAY 1 : interviews, heuristic analysis of app competitors

DAY 2 : affinity diagram, empathy map, user persona

DAY 3 : testing, paper prototypes, iterations, sketch

DAY 4 : more sketch, more testing, more iterations, invision prototype

THE INITIAL IDEA:

ADD A FEATURE IN WHATSAPP TO PAY YOUR FRIENDS

THE USER RESEARCH

AFFINITY DIAGRAM & EMPATHY MAP

With this idea in mind I started the user research doing personal interviews based on questions related with payments between friends and payment platforms used by them. After 12 interviews I got a lot of different opinions and different examples of situations, but all of them were agreeing in the uncomfortable moments that are induced by people forgetting about paying back.

This is how my user research look and helped me a lot to organise the inputs given by them, this is call affinity diagram and is a tool very useful. Sticky notes will be your best friends ;)

And why do people forget to payback friends? I can tell you some reasons. The first reason would be related with the different platforms that are used for doing the payments, this makes people delay the pay a lot. Cash is never exact, bank transfers are tedious (you need bank numbers and enter into your account to do a formal transfer), then they have different digital wallets that some people use but not usually the same. All this makes people postpone payments and forget it. The second reason is because they don’t have reminders, yes.. the person to whom they owe money will probably ask them, but they feel uncomfortable and prefer not to ask for it.

I continued my research by summarizing and delimiting the problem so that way I could create the perfect persona (the user that reflects the main pain points and helps me to better focus in the problems to solve) from an empathy map.

the findings from the affinity diagram and the empathy map

USER PERSONA

And I present you now Carla “the project manager of her friends group”, I’m sure you know someone like her or maybe you feel like her. She is the one that always takes the initiative when organising events, plans or activities with his friends.

Carla, the user persona of my project. She helps me to imagine what she’s going to need in the feature and how she will use it (scenario/context)

CONCEPTUALISING NEW SCREENS

The features were very clear, Carla needs reminders of payments and pay and be payed easily.

Because I wanted to add the feature as an important option, my idea was to place it in the home screen, but to be sure I tested it first to see users reactions (expectations and feelings). So I quickly created a home screen with the pay option in the navigation bar to start asking:

As you can see I suppressed the camera action in the top navigation (because it was already included in all the tabs) and I added a new tab called Pay. I would like to suppress “status” because I asked 20 people about this feature and no one was using it, but I’m not Mark Zuckerberg.

From this first test I got very good answers, they were all expecting to find a screen where to pay friends, request money, split payments…, and also were very happy to have something like that integrated in whatsapp . My level of happiness in this testing:

As you can also detect I proposed a new notification symbol in chats that are related with the Pay feature, to be aware of who is pending to payback.

Taking all this in account I started prototype in paper the Pay screen and also testing it with some users.

Iterations from paper prototype to final High fidelity prototype, as you can see some of them are in spanish because my testing were done with spanish people.

Starting from my first idea, I proposed a screen with the balance in the WhatsApp Pay wallet and below it 2 tabs with pending payments and historial. In the FAB button I was including quick access to do a new payment, request money, do group payment and add money to the wallet (by looking in other apps to pay friends like verse, I found this actions were working well).

But, when I first tested it (1) and asked the users to do a new payment, some of them where going to the big number of the balance (12€) and not going to the FAB button as I was expecting, so I decided to change the icon to a more intuitive one. (Also I think that the fact that there’s no colours on the paper prototype are not calling properly the user).

When testing the second time (2) users were now using well the FAB button, but now they were wondering about how to see the money that people was owing them, so again my tabs and arrows were not very intuitive so I decided to go for a new design (3) now directly on Sketch. The next changes in (4) and (5), were decisions that I take about visual perception and WhatsApp guidelines, because users are very used about how whatsapp looks and is important to keep the look and feel.

FINAL PROTOTYPE

This is the final proposal for the Pay screen:

My proposal for WhatsApp Pay

As I wanted to add also the possibility of create a payment inside a chat, I tested with some users and all of them went to the three dots when trying to do this so I decided to rely on users expectations to make their work easier.

Proposal to add “New payment” inside a chat

Now I want to show you the flow of how Carla can easily create a new payment in “Laura’s birthday” group, as she wants to buy a present for her friend.

Carla organising a payment in the group chat

This is one of the two ways that Carla can do to create a new payment, cause she could also go to the “Pay” tab and do it through the FAB button. Like here:

Carla checking payment in the group and also in the pay section

You can also see a new icon I added in chats (pay icon in the top left), I was proposing only showing it when there’s a payment pending in the chat.

THINGS TO ADD IN THE FUTURE

There’s a lot of actions that I thought about but didn’t have more time to develop as:

• send notifications to friends
• how to mark as pay and what if the friend is paying by cash, transfer or other app that is not whatsapp
• configuring bank account in pay settings (add and remove money)
• how the creator of the payment manages group
• redesign some graphic aspects as the checklist (I would like to have more time to develop this screen)

DO YOU WANT TO TRY IT?

If you want to try the feature, I created this invision prototype where you can first test how to create the payment inside the group and then also navigate inside the Pay screen.

Ready to create new payments with your friends?

And hey WhatsApp do you like my idea? :)

Thanks for reading me!