Unplex - WhatsApp Integration

A group client project to redesign the WhatsApp integration flow

Company

Unplex

Time Frame

1.5 Weeks

Role

UX Designer

Overview

Unplex is a platform by people who understand the challenges of trying to stay financially involved in their community while living abroad. The mission is to eliminate pain points of international transactions.

Our founders are all of Indian descent, living in the US, so the initial launch will be geared towards these communities, with the intention of expanding in the future. With community as a key focus, Unplex works with users sending money via phone numbers rather than needing the recipient's bank details.

Why WhatsApp Integration

WhatsApp is the most used app globally, especially India. Lots of Indian businesses operate on WhatsApp platform so the company expresses their needs at the kick-off meeting. They want to keep WhatsApp flow for impulse sending and the feature will still be an essential part of the product even when they develop a native app.

How did the current WhatsApp flow work previously?

The older flow contained 6 main steps and 16 decision points (yellow squares in the user flow) in total for the first-time user to send the money.

Old Flow


Fill phone number on website Connect with WhatsApp Select the service in the WhatsApp Fill personal info in a secure website Redirect back to WhatsApp Forward the message to receiver

Old User Flow


The WhatsApp flow is intended for impulse sending, but the long process is not helpful for users and this causes a problem for the business

Out of the users who advance to the next steps from WhatsApp, a mere 26% submitted their personal information.

Old Flow


Fill phone number on website Connect with WhatsApp Select the service in the WhatsApp Fill personal info in a secure website Redirect back to WhatsApp Forward the message to receiver

How can we solve the problem for business?

Tools

Figma
Slack
Zoom
Google Meet

Solution

We made improvements to the overall UX writing based on the original flow to better suit a banking platform, removing any unnecessary steps and sticking with essential data we need to onboard first time users. As a result, we reduced clicks by 1/3 to shorten the time in task.

Remove the unnecessary step

The GIF feature intends to add a personal touch for users, but its lack of personalised choices takes away its meaning.

Add one register point on website

We found out some users dropped out from the process because we made the users keep switching between WhatsApp and the website. We provide an option for users to register phone numbers and personal info at the beginning to prevent too much switching.

My Contribution

During this group client project, as a UX Designer, my role included doing the WhatsApp platform research, chat bot analysis, conducting usability testing, synthesising data and insights, collaborating in teardown workshops and making design decisions with three other team members.


Our Approach

01

Research

  • Initial Research
  • Chatbot Analysis
  • Teardown Workshop
02

Redesign

  • Interactive Prototype
03

Evaluate

  • Usability Testing
  • Last Iteration
  • Deliverables

Research

Initial Research

As we have to know more about WhatsApp as a business platform, we did research and found out there were some challenges in building products on the WhatsApp platform.

Chatbot Analysis

We did some Chatbot competitive analysis to gain an understanding of how a chatbot conversation flows naturally, optimising the experience for a user.

For example, Haro is a Hong Kong bank’s virtual assistant. It gave us great insight into how good UX writing can really build a sense of trust for users and what feature and template we could use in the WhatsApp business platform.

Teardown Workshop

We went through as a team and gave our thoughts on each message, dissecting how information was written and at what point should this information be given to us.

The first welcome message had too many emojis that weren’t necessarily adding any extra value to the message.

‘More’ CTA being bigger than ‘send’ and ‘request’ didn’t give a clear indication of what the main features were.

For people less confident on WhatsApp we felt that this could be made clearer.

There was a lot of information that could be displayed here in a clearer way, we wanted to make sure that the user understood the fee of the transaction, how much they would be sending in their currency and how much the receiver would get in their currency.

Is it necessary to select reason and occasion at the same time? We then figured it out, by choosing the occasion would generate the GIF below but we felt the auto-generated GIF was lacking in personal touch.

Redesign

Improved Interactive Prototype

From the initial client meeting, clients told us to review the current process in WhatsApp and made changes using our knowledge and expertise in UX. So we made some quick changes based on our assumption about how information should be organised and how the user experience should be written and made an improved interactive prototype to test with users.

At this stage, the users from the client list have already tested the initial flow. Therefore, we have decided to validate the new changes with them.

 

Before
After
Improve the CTA hierarchy Display important info in a clear way Give user option to include the GIF feature An image to guide people who is not familiar with technology

Evaluate

Usability Testing

We want to figure out what was the reason they didn’t continue the process and the 10 usability tests led us to 3 main problems.

Users didn’t like the GIF feature

“This GIF is not personalised... I want to remove it but this has already made me lose interest”

“I’m not sure I would use this feature...”

We noticed that the gif feature was the point in the user journey that caused the most frustration. Participants began by not fully understanding what or why they were adding this to their transaction. Then at the end, if they’d changed their mind, there was no option to delete.

Users want the option to register at the beginning of the flow rather than halfway through

“I want to register all at the beginning, this makes me feel like I’m getting scammed”

We discovered that users lose interest when the WhatsApp flow redirects them to a website to enter personal information. Some users even felt like they were getting scammed when clicking the link in WhatsApp.

Users have to register an account and pay at the same time

“I do worry I may drop out if it makes me work too hard.”

The user felt that they were being asked to do too much in the entire flow all at once, and they were unsure about the duration it would take.

Last Iteration

Based on the insights we gathered from usability testing, we started the last round of iteration. There were 3 major changes we made from the data we collected:

1. Remove the GIF features

We have decided to remove the GIF feature based on user feedback. The feature was not providing any additional value and was only adding extra clicks for users.

2. Add one register point

We found out some users dropped out of the process because we made the users keep switching between WhatsApp and the website and made the whole process too long. We provide an option for users to register phone numbers and personal info at the beginning to prevent too much switching and users don’t need to do register and payment at one go.

3. Simplified the flow and divide the flow to the register flow and payment flow

We combined pages and rearranged the order based on our users feedback. We also ensured that the page numbers at the top reflected where the user was within their flow, and there weren’t any surprise screens popping up when you thought you were about to reach the last phase. We then separated the two flows so that users don't feel exhausted by the time they reach this task.

Before
Register flow + Payment flow

After
2 steps for registration flow

After
1 simple step for payment flow

Deliverables

Based on the insights we gathered from usability testing, we started last round of iteration and  handed over the design to the client and move on to the next phase due to the time constraint.

Next Steps

For the client project, we only had 1.5-week to work on WhatsApp integration then we had to move on to native mobile app sprint, so the ideal next step would be doing A/B testing and validating the changes and comparing it to the original data. 

The clients were surprised by the number of steps in the user flow at the beginning. They recognised the importance of usability testing and agreed that the gift feature is not necessary from the user's perspective and they agreed to pass the design to the developer to make it live.

We believe that shortening the flow and consolidating the registration process into a single point can increase the number of users inputting their information, thus addressing the original problem.

Key Learnings

During this sprint, I learned how to work with technical constraints, and conducting more research helped to reduce friction. We encountered limitations when redesigning this feature, which sometimes made it challenging for users. However, we just have to find ways to have a balance between user needs and business requirements.