top of page

ShopBack: New user onboarding

Role: UX writer, content strategist

Collaborators: PM, CRM, researcher, designer, engineer

Platform: Mobile apps

Tools: Figma, Lokalise, Google Workplace, Atlassian

About ShopBack

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

IMG_3285.HEIC

Contribution​s

I worked closely with a product designer, PM, and CRM in conducting these activities:

  1. Provided various design and content strategies to test before launch.

  2. Conducted highlighter testing to validate the success of content and design.

  3. Delivered final copy and managed localization with teams in Taiwan and Thailand.

Project overview

Most users would use ShopBack as their transit to visit an e-commerce platform. This was the only way they knew to earn cashback. They didn't

- people mostly used SB to transit before they visit an e-commerce platform. this was the only way they knew to earn cashback.

- people didn't know there were several other features to earn bigger cashback.

- resulting in low usage for other features

This was an initiative brought by the product and design teams to expose all value propositions to new ShopBack users within their first 30 days of using the app. The intent was to introduce our in-app key features and how they would help users throughout their shopping journey. These were the key features that were included:

  1. Watchlist: A feature where you can save all your favorite brands, stores, and products in one place and be notified when there's a special offer.

  2. In-app notifications: Your in-app inbox that notifies you of your recent activities and latest promos, including updates from your watchlist.

  3. ShopBack Pay: A payment method that you can use to shop online and in-store and earn cashback in return.

  4. Withdrawal: A feature that allows you to withdraw all your earned cashback as real money to your bank or e-wallet accounts.

  5. Earn more: Also known as "challenges". A feature that offers missions that you can complete to earn more cashback (eg shop anything at Watsons 3 times to earn $10 cashback).

  6. Referrals: A way to encourage you to bring friends and families into ShopBack, by giving both parties $5 cashback each when the referee has made an order.​​

Goals

  1. Everything shown to the new user needs to incrementally contribute to the user’s next purchase.

  2. Anything that we ask from the user needs to be immediately and obviously utilized.

  3. Anything that we introduce needs to be testable, and easy to scale or rollback.

A user is successfully onboarded when they've experienced the features, knew how to use them, and were drawn to keep using them to shop for more.

 

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. We didn't have a coherent onboarding strategy

 

Each business unit and product feature has its own set of metrics, runs its own education and activation initiatives, and features them within its own environment.

A new user who signs up for an account today would find a distinct set of onboarding processes post signup, on the home screen, and on visit to each business unit (e.g. in-store, pay, vouchers) or product feature (e.g. watchlist, earn more).

 

Based on user research conducted in SG and ID, users tend to be overwhelmed and confused by the amount information displayed, and found it difficult to distinguish between each business unit.

2. We are blind when the user first signs up for an account

 

When a user first signs up for an account, we have no information regarding the user’s preferences. As a result, we are unable to meaningfully adjust the onboarding experience for users with different intent.

3. We are unable to make quick validations and adjustments

We are unable to run AB tests on several assets that we deem to be important for the user journey (e.g. post signup flow, feature onboarding flows, navigation elements). The logic for some of these assets are also hard coded, which requires significant engineering efforts to adjust.

​As a result, minor adjustments are not worth the effort because they require significant engineering resources, while major adjustments incur high potential opportunity costs because they take a long time to measure and reverse.

 

​This is important to solve as new user onboarding will be an ongoing effort in 2023 and beyond, and we expect to be doing frequent optimizations along the way.

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.

Group 4.png

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

Group 48507.png

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.

Group 48508.png

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.

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.

Frame 48659.png

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.

Frame 48660.png

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

Group 16.png

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?

bottom of page