Redesigning ShopBack's
withdrawal experience
Role: Content Design Lead
Teams: PM, UX Researcher, UX Designer, Engineer, CS, Translator
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 shopping. Founded in 2014 and headquartered in Singapore. By 2023, the company has offices across 9 other countries in the APAC region.
ShopBack HQ in Pasir Panjang Rd, Singapore.
Contributions
-
Provided new design concept and revised end-to-end product copy towards reducing failed withdrawal attempts.
-
Led localization efforts across 5 languages, resulting in improved accessibility and higher product adoption rates.
Background
Withdrawal is a feature that allows users to convert their earned cashback through bank and e-wallet transfer. In other words they love this feature as it boosts their savings. However, the act of withdrawing actually doesn't go aligned with ShopBack's main business model.
We don't actually encourage users to withdraw their cashback. Instead, we want them to use their earned cashback to discount their next purchase. For example, if you have $10 in your cashback balance, we want you to shop $10 cheaper at any stores that are affiliated with ShopBack.
This feature satisfies our users, but it delays our revenue. Hence, we never looked into how it was performing until the volume of failed withdrawal attempts bloated and caught our attention.
Challenges and approaches
The number of failed withdrawals and customer complaints were high in every region. And nobody was looking after this feature. So we immediately formed a team to investigate this problem and I was appointed to be in charge of design and content.
I took these steps to make sure we've understood the problem, where the business needed to go, and how we could achieve that through design:
-
I had deep conversations with the PM (Sheeny Lim) to determine how we would like to enhance this feature so that it benefits both our business and customers.
-
I did a design and copy audit to see how many bugs I could collect from the existing user journey.
-
I made calls with the Lead CS Agent (Giri Hariztio) and asked him to share with me a list of all customer complaints filtered into different categories.
-
I documented all the insights that I've discovered, compiled them into a single Confluence file and shared it to the wider design team for a brainstorm and feedback session.
-
I leveraged all the feedback from our brainstorm session to finalize the revised concept that I was going to use for my lo-fi presentation to the PM, UX Researcher (Naning Utoyo), and UX Designer (JJ Leong).
-
After we were all aligned with the revised concept, I worked very closely with the UX Designer and PM to finalize the design and content.
-
Lastly, I worked together with translators in Taiwan, Thailand, Vietnam, Indonesia, and South Korea to make sure all the languages fit perfectly to the new design, are accessible and inclusive.
Problem 1: Allowing access for unverified users
Old design: Users had access to withdraw even if they've not verified their account.
One of the requirements to withdraw was users need to verify their login credentials first (ie email and mobile number). However, this requirement wasn't reflected in the feature.
Challenge
Screen 2: Whether they tap "Verify Now" or "Maybe Later", we would bring them to the withdrawal page .
Screen 3: Once they're on the withdrawal page, we allowed them to add their bank details and enter a withdrawal amount.
All these seemed awkward to me because, unless they've verified their login credentials, they wouldn't be able to withdraw their cashback at the end. So why would we let them do all these steps when they should verify first?
Approach
I understand that the purpose of showing the popup on Screen 2 was to prompt users to verify their account. However, I was also aware there was a possibility that they may have not fully decided to withdraw their cashback.
From a design's perspective, it was still rational to provide them the option to verify later. It shouldn't, however, be shown as prominent as the "Verify Now" button otherwise the two wouldn't look distinctive. And if they chose to verify now, it should bring them straight to the verification flow.
From a copy's perspective, the header and body copy on Screen 2 were passive sentences and weren't concise. I rephrased them using active voice so they become shorter, more scannable, straightforward, and actionable.
Below is how I've improved the user journey for unverified users. In this flow, there was no way for them to access the withdrawal page without verifying their account first.
New design: Users were redirected to the verification flow before entering the withdrawal page.
Problem 2: Users skipping withdrawal steps
To withdraw cashback, users must complete these steps in order:
Step 1: Choose withdrawal destination.
Step 2: Add savings account details.
Step 3: Enter withdrawal amount.
Old design: Users often skip the step for adding their withdrawal destination.
Challenge
Screen 1: They would often go straight to Step 3, entering their withdrawal amount without pre-entering their bank details. This always ended up in failure and they'd later contact CS questioning why the Withdraw Button in Step 3 wasn't active.
Reports from our CS found that users missed out on Step 2 because it wasn't readable. They didn't bother to read it. Even though the square seems big, the grey color didn't make it look prominent or obvious that it was a mandatory step.
Screen 3: They've added their bank details and saw that the minimum withdrawal amount was $10. But they weren't sure what the limit was. This information would appear as an error message after they entered an amount exceeding the withdrawal limit.
Approach for screen 1
From a design's perspective, if users had to follow the 3 steps in the correct order, then we should disable the following steps. For example, if you were in Step 1, you shouldn't be seeing or enabled to do Step 2. In this case, there was not a chance to skip any of the steps.
From a copy's perspective, I felt the copy in Step 2 about how long it'll take for their cashback to reflect in their bank account wasn't the kind of info that they needed to know at that moment. This information is useful but can be shared at the end of the flow. As a user, for this step, I'd expect the app to just tell me what to do to complete my withdrawal. Instructive copy instead of informative copy so they'd instantly know what to do in each step.
Below is how I've revised the design and reworked the content to make the steps more obvious and make sure users complete all of them.
Old vs new design: Preventing users to skip the first step.
Approach for screen 3
From a design's perspective, the fewer errors we show, the better the UX. 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 so they'dinstantly know how much they can withdraw.
Below is the new approach to educate users about the minimum and maximum amount of withdrawal.
Old vs new design: Max limit being shown upfront and not in a form of an error.
Problem 3: Error handlings
To make a withdrawal, users must earn at least $10 cashback (the minimum amount varies in other countries).
Let's say a user has earned $5 cashback and they want to withdraw it all. In this scenario, they shouldn't be able to do that because they need to have earned at least $10 worth of cashback.
Old design: The error message suggesting something you don't have.
Challenge
The "Withdraw" button was by default active. When they tap it, an error message would appear telling them they need $10 to make a withdrawal, which they didn't have.
This error message hasn't addressed the real issue (the fact that you need to earn more cashback first). For users who aren't familiar with ShopBack, this message also doesn't clarify the steps to earning $5 more.
Approach
I guess if the goal was only to send an FYI that the minimum was $10, that error message worked fine. But if it was to encourage users to shop and earn more cashback, it hasn't clearly conveyed that.
Initially, I wanted to keep the button active so we can persuade users to keep shopping, but after challenging that idea, it may likely frustrate them because they're not on the withdrawal page to shop.
So, what made most sense was to disable the input field until they have at least $10 cashback.
New design: Disabling input field and button until minimum cashback is earned.
Challenge
Overall, the error messages from the old design not only failed to address the real issues, but also were written in passive voice.​ Using active voice provides specific guidance on what to do next to resolve the issue. See the example below:
​Example
Passive voice: The maximum amount for withdrawal is $300.
Active voice: Exceeds withdrawal limit. Try lowering the amount.
Old design: Error messages that don't drive users to their next action.
Approach
For all the above error messages, these are the cases where users need to make an action in order to resolve the issues. I restructured all of them using active voice to make them very clear what the next action should be. See the copy changes below.
New design: Error messages improved using active voice.
Last steps, results, and takeaways
Last steps
After the new designs were final, my next step was to make sure we have them launched in all ShopBack regions. I collaborated with the translators and oversaw localization, monitoring their work updates to double-check if the 5 non-English languages fit well into our designs.
Results
3 months after we've relaunched this feature, we saw a significant reduction in the number of failed withdrawals and tickets routed to CS teams. Product adoption rates in other countries besides Singapore also increased due to better quality of localization.
Takeaways
-
Qualitative research is not a must. By investigating the end-to-end flow and conducting design and copy audit have shown they were effective in shipping numerous improvements for this feature.
-
Content Designers can lead design efforts. Content played a pivotal role in the entire design process to make sure the flows and visuals help our users complete their withdrawals seamlessly.
-
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.