top of page

Transforming ShopBack's withdrawal journey

ShopBack is an app affiliated with many e-commerce platforms across 10 APAC countries. It helps users become smart shoppers by offering cashback when they shop online or in-store. They can use their earned cashback to offset their next purchase and earn additional cashback, or withdraw it to grow their savings.

Role: Principal Content Designer
Teams: PM, Researcher, UXD, Engineers, Translators, CS
Platform: Mobile apps (iOS and Android)
Tools: Figma, Lokalise, Google Workplace, Atlassian
Timeline: 3 months

What I did:
Mentored junior designer, co-designed new flow, and provided fresh copy for the feature. I also worked closely with our Research Manager and PM in investigating UX flaws and setting new business direction. And I also led the localization efforts for TW, VN, KR, ID, TH, and HK.

1656584888_Shopback-campus-2.png

ShopBack HQ in Pasir Panjang Rd, Singapore.

11 section banner.png

As a content designer, Edwin is systematic, thorough and user-focused. He brings a passion and dedication to the discipline, always seeking to improve the user experience. Our designers love collaborating with him. They appreciate his ideas from a content perspective and probing questions that help shape a better solution. Edwin’s skills and dedication would make a great addition to any product team.

Denis Ong, Content Strategy Manager at ShopBack

Problem statement

When a user withdraws their cashback, it implies that they're using ShopBack solely to increase their savings. Our goal, on the other hand, is to encourage them to redeem their earned cashback to offset their next purchase. This is what we meant by shopping smarter and how we want people to use ShopBack.

It was clear that this feature didn't help us hit our goal, so for that reason nobody took the initiative to maintain it.

Actions have consequences

The fact we didn't maintain this feature led to a significant increase in the number of failed withdrawals. For a moment it felt like karma.

CS team was overwhelmed by the large number of user complaints. So we immediately formed a team to investigate the cause and I was assigned to be in charge of design and content, working alongside a junior UX Designer, Research Manager, Senior PM, Lead CS, and a team of engineers.

Overview of the design process

Here are the steps I took to make sure I understood the problem, direction of the business, and how I could improve the journey:

SS 3.png

How I worked from scratch to launch.

​​Allowing access for unverified users​

The first thing I noticed when I tested the feature was the missing steps of account verification. As a user, I didn't need to verify my account and I still had access to the withdrawal page. I could even input details like my bank account and the withdrawal amount. I was curious why it was designed that way.

I spoke to my PM (who had worked here long before me) and she told me this was a trick to show users how the page looked like, so they'd be familiar with the steps of withdrawing the next time they come back as a verified user.

From my experience, this was rather painful because after I keyed in all the details, the primary "Withdraw" CTA button at the bottom of the page remained disabled.

SS 1.png

I was taken straight to the withdrawal page even though I hadn't verified my account yet.

There was no other rational decision than to block access to this feature unless the user has verified their account. I proposed this approach to my PM before collaborating with my designer.

And to make sure the steps were intuitive, I decided to redesign the entire withdrawal page. The old one looked like it was designed for desktop, squeezed into a phone screen.

SS 2.png

The new design takes you to complete verification before entering the withdrawal page.

Skipping withdrawal steps

These are the 3 required steps to make a withdrawal:

  1. Select a withdrawal destination.

  2. Add their savings account details.

  3. Enter a withdrawal amount.

Our CS reports showed that users skipped step 1 and 2.​ By this moment, as I've tested the feature when we first started this project, I wasn't surprised that they headed straight to step 3. Let me walk you through.

Step 1: Poor readability

If you look at the old design below, step 1 by default would preselect Bank Transfer. This would be good UX if we had seen a pattern and were confident they were going to withdraw cashback to their bank account.

 

The problem was, even first-time users were presented with this option. Also those 3 components didn't resemble buttons. So when I heard from CS that users thought this section was merely decorative – just like the bank logos at the bottom of the page – I couldn't help but facepalm 🤦‍♂️

Step 2: Visually unseen

Despite the square seemingly big, the grey color didn't make it look obvious it was a mandatory step. Also the text was tiny, which added another layer to bad UX given that we had users above 50 years old.

 

Additionally, "Takes 3-5 workings days to reflect in your bank account" didn't seem like the kind of information they needed to know during this process. This would be the type of information that should be shown once their withdrawal is successful. In this step, they just needed to know what to do next.

4.png

The new design has helped users to understand the steps of withdrawal.

There were 2 options to make sure none of the steps were skipped:

  1. Hide the following step.

  2. Show the following step but disable it until the user has done the prior step.

If you were in step 1, you shouldn't be seeing or enabled to do step 2. We were more leaned towards option 2 as our goal was to give users visibility of the entire steps earlier on.

Poor error handlings​

There were numerous error messages that users didn't find helpful.

Not knowing what the withdrawal limit was

For example, they've added their bank details and saw that the minimum withdrawal amount was $10. There was no information regarding what the limit was. The limit appeared as an error message after they entered an amount exceeding it.

I had always believed the fewer errors we show, the better the experience. I didn't think the message regarding the withdrawal limit should be seen as an error. It should just be shown earlier and as normal text.

5.png

New design shows max limit upfront and not as an error message.

Overall error messages

Using active voice provides specific guidance on what to do next to resolve the issues. Here's an example:

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

✅ Active voice: Exceeds withdrawal limit. Try lowering the amount.

I restructured all of the error messages using active voice to make them very clear what the next action should be. See the copy changes below.

6.png

Error messages improved using active voice.

Results and takeaways

After the new design was final, my next step was to make sure we had them released in multiple countries. I collaborated with translators, supervised their work, and double-checked if the different languages fit well into our designs.

 

Results

3 months after release, we saw a significant reduction in the number of failed withdrawals. Product adoption rates in other countries besides Singapore also increased due to better quality of localization.

Takeaways

  1. Qualitative research is not a must. By investigating end-to-end flow and doing design and copy audit have shown they were effective in shipping numerous improvements for this feature.

  2. Writers can lead design efforts. Content played a pivotal role in the entire design process to make sure the flows and visuals helped our users complete their withdrawals seamlessly.

  3. Cross-functional collaboration is key for designing solutions. Getting in close touch with other non-UX teams and especially CS provided me with a clear direction to design solutions tailored to critical user issues.

That's all folks

Thanks for stopping by! If you enjoyed this article, I'd be thrilled if you could share it with your friends and colleagues.

If you'd like to dive deeper into UX writing, copywriting, and more, visit warungcopy.com and be sure to follow us on Instagram.

bottom of page