E-Commerce Activation for Bank Syariah Indonesia Debit Card
Role
Product Designer, UI/UX Consultant
Role
Product Designer, UI/UX Consultant
Teams
UX Writer, UX Researcher, Business Analyst, Product Owner
Teams
UX Writer, UX Researcher, Business Analyst, Product Owner
Platform
Mobile App
Platform
Mobile App
Timeframe
2024
Timeframe
2024
Category
FinTech, Mobile Banking
Category
FinTech, Mobile Banking
Role
Product Designer, UI/UX Consultant
Teams
UX Writer, UX Researcher, Business Analyst, Product Owner
Platform
Mobile App
Timeframe
2024
Category
FinTech, Mobile Banking
Role
Product Designer, UI/UX Consultant
Teams
UX Writer, UX Researcher, Business Analyst, Product Owner
Platform
Mobile App
Timeframe
2024
Category
FinTech, Mobile Banking
Enabling online purchases with BSI VISA debit cards and simplifying e-commerce activation to overcome previous challenges and support growth.
E-Commerce Activation for Bank Syariah Indonesia Debit Card
Role
Product Designer, UI/UX Consultant
Teams
UX Writer, UX Researcher, Business Analyst, Product Owner
Platform
Mobile App
Timeframe
2024
Category
FinTech, Mobile Banking
Role
Product Designer, UI/UX Consultant
Teams
UX Writer, UX Researcher, Business Analyst, Product Owner
Platform
Mobile App
Timeframe
2024
Category
FinTech, Mobile Banking
Role
Product Designer, UI/UX Consultant
Teams
UX Writer, UX Researcher, Business Analyst, Product Owner
Platform
Mobile App
Timeframe
2024
Category
FinTech, Mobile Banking
Enabling online purchases with BSI VISA debit cards and simplifying e-commerce activation to overcome previous challenges and support growth.
Project Summary
Many BSI customers couldn’t use their debit cards for online shopping, which made everyday things, like ordering food or buying from e-commerce stores way more difficult than it should be. Unlike other banks, users simply couldn’t use their debit cards for online shopping because there was no activation feature in place, and that was becoming a big pain point. So, I set out to design a simple, secure way for users to activate e-commerce transactions on their VISA debit cards, making it easy to shop online.
Overview
Many BSI customers couldn’t use their debit cards for online shopping, which made everyday things, like ordering food or buying from e-commerce stores way more difficult than it should be. Unlike other banks, users simply couldn’t use their debit cards for online shopping because there was no activation feature in place, and that was becoming a big pain point. So, I set out to design a simple, secure way for users to activate e-commerce transactions on their VISA debit cards, making it easy to shop online.
Design Framework
Design Framework
Design Framework
Design Framework
Design Framework
Early Frictions I Uncovered
I identified key pain points that were clearly getting in the way of BSI customers trying to shop online. I discovered quite a few early constraints when I started, here’s what stood out:
Research & Insights
💬 Internal Discussion with Engineer
There was way I explored areas of improvement and opportunity for VISA E-Comm Activation Feature.
My PM and I also teamed up with our engineers to make sure our ideas hit the right security standards. Together, we looked at competitor benchmarks to see what could be improved.
From those chats, a couple of important security ideas came up that we knew had to be part of the solution:
👥 Define The Users
Start by defining the users, then conduct a mix of Qualitative & Quantitative research to understand user expectations, pain points, and preferences clearly.
I began by defining our users (tech-savvy individuals aged 25–40 and moderate-tech BSI users aged 41–55) all living in urban and semi urban areas across Indonesia and regularly online shopping using mobile banking, debit cards, and online payments.
Many of them expressed frustration over being unable to use their VISA debit cards for online shopping. Common issue included frequent transaction failures.
🔍 2 Research Projects Were Conducted
1. Blast Survey (Quantitative)
I sent a simple questions on Google Forms survey to 300 BSI users, asking about their online shopping, digital payment, and debit card habits.
I wanted to see how often they shop with their debit cards online and pinpoint the frictions they run into.
2. In-Depth Interview
(Qualitative)
To strengthen our research, I also ran a few hands on session with BSI users, how they turn on online shopping for their debit cards in different banking apps.
I talked about everything, from how often they shop online and any issues they’ve encountered with their debit cards, to their desire activation flow would look like.
💡 Identify The Key Findings from Both Research Projects
This can be categorized into four key pain points users encounter when trying to use their VISA debit cards for online shopping
These insights help me clearly see where the experience breaks down and what needs to be improved.
Users are being held back by four key pain points: unclear activation, unexplained transaction failures, buried settings, and no feedback when things go wrong.
📌 Based on The Research I Identified, I Formulated Our Goals
"How might we create a smooth online shopping experience by helping users easily understand and activate their VISA debit cards, so they can shop with confidence and ease?"
User Flow
I then created the flowchart below to show the step by step journey users go through to activate their VISA debit card for online shopping. It walks them through selecting their card, entering their PIN, and confirming the setup.
Activation process for BSI Debit e-commerce transaction feature for customers with Visa Debit Card
Activation process for BSI Debit e-commerce transaction feature for customers without Visa Debit Card
Research & Insights
💬 Internal Discussion with Engineer
My PM and I also teamed up with our engineers to make sure our ideas hit the right security standards. Together, we looked at competitor benchmarks to see what could be improved.
From those chats, a couple of important security ideas came up that we knew had to be part of the solution:
There was way I explored areas of improvement and opportunity for VISA E-Comm Activation Feature.
👥 Define The Users
Many of them expressed frustration over being unable to use their VISA debit cards for online shopping. Common issue included frequent transaction failures.
Start by defining the users, then conduct a mix of Qualitative & Quantitative research to understand user expectations, pain points, and preferences clearly.
I began by defining our users (tech-savvy individuals aged 25–40 and moderate-tech BSI users aged 41–55) all living in urban and semi urban areas across Indonesia and regularly online shopping using mobile banking, debit cards, and online payments.
🔍 2 Research Projects Were Conducted
1. Blast Survey (Quantitative)
I sent a simple questions on Google Forms survey to 300 BSI users, asking about their online shopping, digital payment, and debit card habits.
I wanted to see how often they shop with their debit cards online and pinpoint the frictions they run into.
2. In-Depth Interview (Qualitative)
To strengthen our research, we also ran a few hands on session with BSI users, how they turn on online shopping for their debit cards in different banking apps.
I talked about everything, from how often they shop online and any issues they’ve encountered with their debit cards, to their desire activation flow would look like.
💡 Identify The Key Findings from Both Research Projects
This can be categorized into four key pain points users encounter when trying to use their VISA debit cards for online shopping
These insights help me clearly see where the experience breaks down and what needs to be improved.
Users are being held back by four key pain points: unclear activation, unexplained transaction failures, buried settings, and no feedback when things go wrong.
📌 Based on The Research I Identified, I Formulated Our Goals
"How might we create a smooth online shopping experience by helping users easily understand and activate their VISA debit cards, so they can shop with confidence and ease?"
User Flow
I then created the flowchart below to show the step by step journey users go through to activate their VISA debit card for online shopping. It walks them through selecting their card, entering their PIN, and confirming the setup.
Activation process for BSI Debit e-commerce transaction feature for customers with Visa Debit Card
Activation process for BSI debit e-commerce transaction feature for customers without a Visa Debit Card
Research & Insights
There was way I explored areas of improvement and opportunity for VISA E-Comm Activation Feature.
💬 Internal Discussion with Engineer
My PM and I also teamed up with our engineers to make sure our ideas hit the right security standards. Together, we looked at competitor benchmarks to see what could be improved.
From those chats, a couple of important security ideas came up that we knew had to be part of the solution:
👥 Define The Users
Start by defining the users, then conduct a mix of Qualitative & Quantitative research to understand user expectations, pain points, and preferences clearly.
I began by defining our users (tech-savvy individuals aged 25–40 and moderate-tech BSI users aged 41–55) all living in urban and semi urban areas across Indonesia and regularly online shopping using mobile banking, debit cards, and online payments.
Many of them expressed frustration over being unable to use their VISA debit cards for online shopping. Common issue included frequent transaction failures.
🔍 2 Research Projects Were Conducted
1. Blast Survey (Quantitative)
I sent a simple questions on Google Forms survey to 300 BSI users, asking about their online shopping, digital payment, and debit card habits.
I wanted to see how often they shop with their debit cards online and pinpoint the frictions they run into.
2. In-Depth Interview (Qualitative)
To strengthen our research, I also ran a few hands on session with BSI users, how they turn on online shopping for their debit cards in different banking apps.
I talked about everything, from how often they shop online and any issues they’ve encountered with their debit cards, to their desire activation flow would look like.
💡 Identify The Key Findings from Both Research Projects
This can be categorized into four key pain points users encounter when trying to use their VISA debit cards for online shopping
These insights help me clearly see where the experience breaks down and what needs to be improved.
Users are being held back by four key pain points: unclear activation, unexplained transaction failures, buried settings, and no feedback when things go wrong.
📌 Based on The Research I Identified, I Formulated Our Goals
"How might we create a smooth online shopping experience by helping users easily understand and activate their VISA debit cards, so they can shop with confidence and ease?"
User Flow
I then created the flowchart below to show the step by step journey users go through to activate their VISA debit card for online shopping. It walks them through selecting their card, entering their PIN, and confirming the setup.
Activation process for BSI Debit e-commerce transaction feature for customers with Visa Debit Card
Activation process for BSI debit e-commerce transaction feature for customers without a Visa Debit Card
Design & Solutions
Design & Solutions
Design & Solutions
🎨 Key Design Improvements
🎨 Key Design Improvements
1. Debit Card Activation + Visa E-Commerce Flow
1. Debit Card Activation + Visa E-Commerce Flow
▶️ The Prototype
▶️ The Prototype
2. Online Debit Card Deactivation Flow
2. Online Debit Card Deactivation Flow
The Online Debit Card Transaction Deactivation feature allows users to easily disable transactions when needed, whether for security reasons, account control, or temporary card inactivity.
Once deactivated, users will receive a confirmation notification, and transactions will be blocked immediately. They can reactivate their card anytime through the same seamless process.
This feature gives users more control and peace of mind, making it easier for them to manage their card transactions with confidence and flexibility.
▶️ The Prototype
▶️ The Prototype
3. Setting Up Transaction Limits Flow
3. Setting Up Transaction Limits Flow
With the Transaction Limit Adjustment feature, users can set their own spending boundaries for online transactions directly through the Card Management Page. Whether for budgeting, added security, or temporary adjustments.
▶️ The Prototype
▶️ The Prototype
💳 Card Designs
💳 Card Designs
What We Learned
📖 Lessons from: E-Commerce Activation Debit Card for BSI
📖 Lessons from: E-Commerce Activation Debit Card for BSI
Through thorough user research and multiple rounds of testing, I uncovered key insights that helped shape a more intuitive e-commerce debit card activation experience:
Through throrough user research and multiple rounds of testing, I uncovered key insights that helped shape a more intuitive e-commerce debit card activation experience:
1. Cutting down steps and adding a
one-tap toggle shot activation leading
to a 92% increase in activation rates.
2. Features like custom spending limits,
session based activation, and
automatic deactivation gave users
more control over their cards,
enhancing both trust and usability.
1. Cutting down steps and adding a one-tap toggle shot activation leading to a 92%
increase in activation rates.
1. Cutting down steps and adding a one-tap toggle shot activation leading to a 92% increase in activation rates.
2. Features like custom spending limits, session based activation, and automatic deactivation gave users more control over their
2. Features like custom spending limits, session based activation, and automatic
deactivation gave users more control over their cards, enhancing both trust and
cards, enhancing both trust and usability.
usability.
👀 Future Enhancements
👀 Future Enhancements
As digital commerce continues to expand, users need the freedom to shop and pay internationally without hassle. The Cross Border Transaction Activation feature allows users to effortlessly enable e-commerce payments for international merchants while ensuring security compliance. With instant activation, customizable controls, and robust security measures, this feature enhances accessibility beyond domestic purchases, giving users the confidence to make payment globally with ease.
Next
SKOLA
(Learning Management System)
