QuickPay for WhatsApp

Mar 11 · 7 min read

My second personal project at Ironhack was to develop a new feature for an existing app based on an area of functionality to explore. My work will culminate in a high-fidelity prototype that reflects my best path forward based on research, iteration, and testing. It was a four days project that we made to improve our skills in Interaction Design.

The new feature was to allow the user to associate your bank’s accounts with WhatsApp in order to transfer money by phone number. By using Sketch for the frame and Principle for the animation, I made a high fidelity functional prototype.

Below I will explain each step that led me to my last prototype.

Research

Even being a daily user of WhatsApp on my Android phone, I started using the App on IOS to extend my knowledge of the app. After understanding the flow and the already established aesthetics on both operating systems, I looked for competitors apps that offer the same feature.

Competitors

Apple Pay, G Pay, Transferwise, Venmo and Facebook Messenger (only in US) are already proposing the possibility to transfer money through their app. After using all those apps and check feedbacks on Apple Store, Google Play and Reddit, I focused on Facebook Messenger.

Competitors: Venmo, Apple pay, Messenger

Indeed, the Facebook Messenger app offers the same type of product than WhatsApp and they both belong to the same company, Facebook. After analyzing closely how this feature works (You can see an overview on this link), I wanted to know what users of these competitors think about mobile payment.

Quantitative and qualitative research

I approached them in two different ways:

Firstly, I started interviews with people who had already used or never used mobile payment. It allowed me to gain an understanding of underlying reasons, opinions, and motivations. It provided me insights into the problem and helped me to develop ideas or hypotheses for my quantitative research.

During these interviews, I started with an open mind and asked some general questions about the user to know him and make him comfortable. After, I asked some open-ended questions that I had prepared such as: “What does the word “WhatsApp” mean to you? For what purpose do you use this App? Have you already made a mobile payment ?” Then, I had to be flexible because all responses they gave me affected how and which questions I had to ask next.

There was also mobile interaction. I asked them to navigate on WhatsApp and other applications. I gave them some “mission” such as: “Can you send me a photo from your library? When a friend reminds you by a text message that you owe him € 50, how do you repay him?”.

This process allowed me to understand that the new feature meets a real need. Indeed, for the moment, when the user receives a reminder that he has to pay a friend back on WhatsApp, he has to use another app and doesn’t remember all the information (Bank account, Value, …)

Best place to incorporate the new feature

Moreover, that allowed me to find the best place to incorporate the new feature into the existing platform. See the picture on the left.

Secondly, I prepared quantitative research in order to quantify some interrogations by way of generating data that can be transformed into usable statistics.

This process allowed me to understand every angle of the potential user of my application.

After gathering and analyzing my data (7 interviews and 20 answers for the survey), I was able to pinpoint the two most important factors that users need whenever they are performing a transaction with any type of technology; safety & fastness.

A result of my quantitative research

PROTOTYPE

Visual Design

Having all the information needed, I started brainstorming to incorporate the new feature into the existing platform by following an established aesthetic and defined look and feel.

Visual Design WhatsApp

I studied the 3 primaries themes from Human Interface Guidelines (HIG) in order to meet the high expectations for the quality and functionality of an IOS app:

Clarity. Throughout the system, text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design. Negative space, color, fonts, graphics, and interface elements subtly highlight important content and convey interactivity.

Deference. Fluid motion and a crisp, beautiful interface help people understand and interact with content while never competing with it. Content typically fills the entire screen, while translucency and blurring often hint at more. Minimal use of bezels, gradients, and drop shadows keep the interface light and airy, while ensuring that content is paramount.

Depth. Distinct visual layers and realistic motion convey hierarchy, impart vitality, and facilitate understanding. Touch and discoverability heighten delight and enable access to functionality and additional content without losing context. Transitions provide a sense of depth as you navigate through content.

I sketched some digital frame which people could interact in order to do usability interviews. The main purpose of this method is to see how the user uses the app, get feedback and of course make some improvements. After multiple usability interviews, I noticed some mistakes on my first shot. Indeed, you can see below that I didn’t follow the established aesthetic by keeping the layout of the action sheet layout.

New layout “message box”

Therefore, I changed the layout and flow to stick more at the WhatsApp and IOS look. This will increase the learnability and the memorability of the user through the similarity resemblance of the others flow in the App. You can see an example of this change in the picture above.

Adding Card

Another design challenge was to allow the user to do a fast and secure transaction and to add a card on the app. Through usability testing, I learned that IOS users were really familiarized with Apple Pay. Moreover, they think this app is secure and fast.
Meeting all my goals and willing to grow the efficiency, and decrease the number of errors the user makes. I inspired myself of this famous application to design this new feature.

Animation

Last but not least, the animation. The design of interactions and motion elements also played an important role in the design process of the product.
By always keeping in mind to incorporate the new feature into the existing platform by following an established aesthetic and defined look and feel.

Established animation in the application

I tried to use as much as possible WhatsApp to familiarize myself with the different established animation and I also checked again the website HIG to clearly understand and follow the IOS animation.

After finalizing all the animation on Principle, I had the possibility to do again some usability testing to see how easy to use the new feature is by testing it with real users.

FINAL PROTOTYPE

After each step above, I had finally my final prototype.

However, the final prototype is not the final product, therefore to flow around the app you had to follow this situation:
You owe 22€ to your friend; Robert Bronze. You take your phone and open WhatsApp to use the new feature “QuickPay”. Then, instead of using Apple Pay, you want to add a new credit card. In the end, you reimburse your friend and check the transaction history.

You can check the video of the final prototype below:

https://www.youtube.com/watch?v=5CXWKeOVG0k

Conclusion

Designing for an existing product was very different from everything that I have already done. When adding a new feature in an established environment that already works, there are two possibilities: adding value or ruin it.

Therefore, it is crucial to analyze the current product in order to keep consistency around the application from the visual design to animation. It is also important to keep the user in mind throughout the entire process by usability testing, quantitative and qualitative research. Indeed, if you clearly understand the need and what is usable, intuitive for them. Normally your new feature will add value to the existing application.


By Arthur van der Rest
Website: www.arthurvdr.com
Instagram: arthurvdr
Youtube: Arthur van der Rest

Arthur van der Rest

Written by

UX/UI designer: www.arthurvdr.com

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade