ShopBack: Redesigning withdrawal V2

Platform: Mobile apps

Collaborators: PM, researcher, designer, engineer, CS, translator

Tools: Figma, Lokalise, Google Workplace, Atlassian

About ShopBack

ShopBack is a rewards platform that allows users to earn cashback for online & in-store purchases. Founded in Singapore in 2014 and has expanded to 9 other countries in the APAC region by 2023.

My role and contribution

Mapped the old user flow and identified areas for improvement for V2.
Conducted user interviews for the Singapore, Australia, and Indonesia market.
Co-designed the new wireframe across all touch points.
Produced new copy and managed localization for 5 different languages.
Liaised with developers throughout pre-deployment.

Project overview

This feature allows you to withdraw your earned cashback to your bank or e-wallet accounts as real money, taking 3 to 5 working days for the transfer to complete.

These are the steps required for a successful withdrawal:

You've verified your email and mobile number on ShopBack.
You've earned at least SGD10 cashback via ShopBack (varying in other regions).
You've added your bank or e-wallet account details to ShopBack.

To a lot of users, this feature brings a moment of delight as you can finally enjoy having more money added to your savings account. But from the company's standpoint, it delays revenue because withdrawing cashback means you’re reducing the money you’ve earned on ShopBack.

ShopBack wants you to grow your cashback balance instead of moving it some place else, so that you can offset the cost of your next purchase. You'll not only save money but accumulate cashback for bigger rewards and savings.

That said, the company had never prioritized this feature for enhancement, even after launching its brand-new playbook. It was always kept in the dark until things got heated in mid 2022.

Goals

Increase the number of successful withdrawals.
Reduce the number of tickets routed to CS.

Challenges

In mid 2022, we were shocked by the rise of failed withdrawals and complaints routed to CS coming from every region. Worse of all there was no one looking after this feature. So we immediately formed a team and investigated the entire flow of this feature.

The experience was dreadful. For starters, those who haven't verified their login credentials could access the feature but were declined by the system to withdraw – like for what? Plus, when they were declined, there was no reason as to why their withdrawal failed. The terms we used also were inconsistent and the error handlings were just awful.

These were the problems we saw as critical and that we believed triggered most failed withdrawals:

1. Allowing access for unverified users

One of the weird things about V1 was it allowed users to access the withdrawal screen even if they weren't yet eligible. One of the criteria required them to verify their login credentials first. So here, as an unverified user, you could still select Bank Transfer as your withdrawal destination, key in your bank account details, and add a withdrawal amount. The only thing you couldn't do was tap the Withdraw button.

A fair question would be, why would the system make you go through all these steps when there was no way to withdraw?

Solution: This wasn't a design problem, nor was it copy. The secondary button was just not properly engineered. Rather than fixing it, we just got rid of it as it was intuitive for users to know they can tap anywhere on the screen to dismiss the popup. And we also rephrased the header and body copy using active voice so they become more scannable, straightforward, and action-driven. Plus a 3-line body copy was just too much for most people to read.

2. The unnoticeable withdrawal steps

When users get to the withdrawal screen, there are 2 steps they need to go through to accomplish their task.

Add their withdrawal destination (ie bank or e-wallet account details).
Enter the amount they want to withdraw.

Problem 1: We received reports from our CS agents that one of the reasons users weren't able to withdraw was because they didn't notice there was Step 1, so they went straight to Step 2 without adding any withdrawal destination and started complaining why the button didn't turn green.

Problem 2: They've added their withdrawal destination and they can see that the minimum amount to withdraw was $10. The problem was they had no clue how much the maximum was. The error message would only appear after they entered an amount that exceeded the withdrawal limit. This approach wasn't ideal because they expected for that message to be shown upfront.

Solution

Problem 1: First off, we made Step 1 more visually prominent and blocked them from entering the withdrawal amount unless they've already added their withdrawal destination. So there's no way they'll miss this step. Secondly, we changed the body copy (ie "Takes 3-5 working days...") from being informative to instructive so they understand the action that's required on this step. But to make sure they still know how long it takes for their cashback to reflect in their bank or e-wallet account, we placed this text at the end of the flow after they've hit that Withdraw button.

Problem 2: Text regarding the min and max amount of withdrawal are now all in one place inside the input field so that they're shown upfront.

3. The auto-uninstall error handlings

Let's say you've earned $5 cashback and you want to withdraw all of it. As you need to have at least $10 to withdraw, logically the Withdraw button should be disabled – but that wasn't what happened.

The button was by default active. So when you tap it what happened was an error message would appear and telling you that you needed at least $10 to withdraw, which you didn't have. This information gave no value whatsoever as it clearly didn't address the real issue (ie the fact that you needed to earn more cashback first).

Solution: Initially, we wanted to keep the button active so we can persuade users to keep shopping, but we also agreed it may frustrate them because they're not here to shop. So what made most sense was to disable the input field until they have at least $10 cashback.

This wasn't the only error message that triggered confusion among our users. Overall, the old error messages not only failed to address the real issues, but also were written in passive voice as opposed to active voice.

Example

Passive voice: The maximum amount for withdrawal is $300.

Active voice: Exceeds withdrawal limit. Try lowering the amount

Using active voice provides specific guidance on what to do next to resolve the issue.

Example

Passive voice: The maximum amount for withdrawal is $300.

Active voice: Exceeds withdrawal limit. Try lowering the amount

Using active voice provides specific guidance on what to do next to resolve the issue.

Solution: For all the above error messages, these are the cases where you need to make an action in order to resolve the issues. We changed the sentence structure from passive voice to active voice to make it very clear what the next action should be.

4. Inconsistent terms

There were too many different words for you to memorize. On one screen we used words like "Available to withdraw", but on other screens we used "Available Balance". They both meant the same thing.

Then there was "Payment" which wasn't an accurate term for the context of withdrawal, because unlike payment you don't lose money after withdrawing. The term may also confuse you in the future as we've also used it in other business units (e.g. ShopBack Pay).

Outcome

All of the solutions from 1 to 4 have been successfully approved by the board and are now live in production.

After the V2 release, our next step was to measure if the solutions actually worked. With the new design and content, we've successfully reduced the number of complaints reported to CS and the rate of unsuccessful withdrawals.

Curious how the entire V2 looks like?

View Withdrawal V2