HSE webshop
Credit Card Payment Integration
In this project, I integrated the credit card payment option into the checkout flow, which was previously not available in the HSE webshop. Both user experience and technical constraints were carefully considered.
HSE webshop
Credit Card Payment Integration
In this project, I integrated the credit card payment option into the checkout flow, which was previously not available in the HSE webshop. Both user experience and technical constraints were carefully considered.
HSE webshop
Credit Card Payment Integration
In this project, I integrated the credit card payment option into the checkout flow, which was previously not available in the HSE webshop. Both user experience and technical constraints were carefully considered.
Key metrics
Conversion rate
Error rate of forms
Average/Median checkout time
Key metrics
Conversion rate
Error rate of forms
Average/Median checkout time
Key metrics
Conversion rate
Error rate of forms
Average/Median checkout time
Year
2022
Services
User research
Wireframe
Interaction design
User interface
Prototype
User test
Visit
https://www.hse.de
Year
2022
Services
User research
Wireframe
Interaction design
User interface
Prototype
User test
Visit
https://www.hse.de
Year
2022
Services
User research
Wireframe
Interaction design
User interface
Prototype
User test
Visit
https://www.hse.de
Problem statement
Hotjar feedback reveals that customers have specifically complained about our lack of credit card payment options. According to market research, credit cards rank as the 4th most preferred payment method within our target group. Despite their significance to our customers, we currently do not offer this option, which could harm both conversion rates and customer satisfaction.
Problem statement
Hotjar feedback reveals that customers have specifically complained about our lack of credit card payment options. According to market research, credit cards rank as the 4th most preferred payment method within our target group. Despite their significance to our customers, we currently do not offer this option, which could harm both conversion rates and customer satisfaction.
Problem statement
Hotjar feedback reveals that customers have specifically complained about our lack of credit card payment options. According to market research, credit cards rank as the 4th most preferred payment method within our target group. Despite their significance to our customers, we currently do not offer this option, which could harm both conversion rates and customer satisfaction.
User
Based on user interviews and testing, it was found that the primary demographic of HSE web shop customers consists of German women aged 45 and above. These users prioritize easy navigation, straightforward steps, clear instructions, and accessibility. Notably, maintaining a font size of at least 16px is crucial to ensure readability for this demographic.
User
Based on user interviews and testing, it was found that the primary demographic of HSE web shop customers consists of German women aged 45 and above. These users prioritize easy navigation, straightforward steps, clear instructions, and accessibility. Notably, maintaining a font size of at least 16px is crucial to ensure readability for this demographic.
User
Based on user interviews and testing, it was found that the primary demographic of HSE web shop customers consists of German women aged 45 and above. These users prioritize easy navigation, straightforward steps, clear instructions, and accessibility. Notably, maintaining a font size of at least 16px is crucial to ensure readability for this demographic.
Best practice
I conducted research on credit card payment options used by popular German web shops and held sessions with developers to explore potential implementation strategies.
Best practice
I conducted research on credit card payment options used by popular German web shops and held sessions with developers to explore potential implementation strategies.
Best practice
I conducted research on credit card payment options used by popular German web shops and held sessions with developers to explore potential implementation strategies.
Amazon
Amazon lets users save multiple credit cards.
Amazon allows switching credit card currencies (not needed for HSE customers).
Amazon automatically fills in saved credit card details.
Otto
Otto highlights 3D Secure, which adds a verification step using a code from SMS/E-mail, fingerprint, Face ID, or a banking app password (as required by EU law).
Users need to select their credit card (Visa, MasterCard, American Express). Developers mentioned that the card type can be auto-detected and displayed based on the card number.
Otto redirects users to Computop for credit card payment processing outside its webshop. (HSE plans to use Adyen for this service.)
Zalando
Zalando also informs users about the extra 3D Secure step.
I tested this by ordering a product on Zalando with my own credit/debit card. Although I expected a 3D Secure step, the order completed without it. (Developers explained that this depends on the bank—some require it, while others do not.)
Position of credit card input fields
Credit card forms can be placed in two ways:
In Checkout (like Zalando or Amazon):
Users enter credit card details directly in the checkout, giving us full control over the UI.Redirected to a Service Provider (like Otto):
Users select credit card, then click "buy now" and are redirected to Adyen for payment. This limits our control over the UI.
After discussions with PM & Devs, I chose to place credit card forms directly in the checkout:
User-Friendly: Users enter details immediately after choosing credit card payment, catching errors early.
Technical Advantage: Keeping users on our site avoids the challenges of redirecting to Adyen, where we lose control over data and error handling.
Credit card forms can be placed in two ways:
In Checkout (like Zalando or Amazon):
Users enter credit card details directly in the checkout, giving us full control over the UI.Redirected to a Service Provider (like Otto):
Users select credit card, then click "buy now" and are redirected to Adyen for payment. This limits our control over the UI.
After discussions with PM & Devs, I chose to place credit card forms directly in the checkout:
User-Friendly: Users enter details immediately after choosing credit card payment, catching errors early.
Technical Advantage: Keeping users on our site avoids the challenges of redirecting to Adyen, where we lose control over data and error handling.
Choose credit card
Choose credit card
Fill in the card data
Fill in the card data
Click buy with credit card
Click buy with credit card
3D Secure 1
3D Secure 1
Redirect
Redirect
Provide password or biometric authentication
Provide password or biometric authentication
Confirmation page
Confirmation page
No redirect
No redirect
Confirmation page
Confirmation page
3D Secure 2
3D Secure 2
No redirect
No redirect
Confirmation page
Confirmation page
Flow
Based on my research, this is the flow for credit card payment. After discussions with stakeholders and reviewing other local German online shops, we found that Visa and MasterCard are the most commonly used credit cards by our customers. Therefore, we decided to support only Visa and MasterCard initially.
Flow
Based on my research, this is the flow for credit card payment. After discussions with stakeholders and reviewing other local German online shops, we found that Visa and MasterCard are the most commonly used credit cards by our customers. Therefore, we decided to support only Visa and MasterCard initially.
Flow
Based on my research, this is the flow for credit card payment. After discussions with stakeholders and reviewing other local German online shops, we found that Visa and MasterCard are the most commonly used credit cards by our customers. Therefore, we decided to support only Visa and MasterCard initially.
User test with the prototype
Dogfooding Test Results (4 participants): 4/4 found the flow easy and clear. 4/4 were familiar with CVC/CVV. 3/4 knew about 3D Secure from other online shops. 3/4 saw the 3D Secure pop-up and were unsure about the required pin. 2/4 preferred PayPal over credit cards, citing the CVC/SMS pin as annoying and the delayed booking of funds.
User test with the prototype
Dogfooding Test Results (4 participants): 4/4 found the flow easy and clear. 4/4 were familiar with CVC/CVV. 3/4 knew about 3D Secure from other online shops. 3/4 saw the 3D Secure pop-up and were unsure about the required pin. 2/4 preferred PayPal over credit cards, citing the CVC/SMS pin as annoying and the delayed booking of funds.
User test with the prototype
Dogfooding Test Results (4 participants): 4/4 found the flow easy and clear. 4/4 were familiar with CVC/CVV. 3/4 knew about 3D Secure from other online shops. 3/4 saw the 3D Secure pop-up and were unsure about the required pin. 2/4 preferred PayPal over credit cards, citing the CVC/SMS pin as annoying and the delayed booking of funds.
Improvement
After the user test, I refined the design, received feedback from the copywriter, and consulted with developers about restrictions from the credit card service provider. Key improvements include:
Clearer wording.
Auto-display of Visa/MasterCard icons based on the card number.
CVC/CVV hint icon directly in the input field (no pop-up).
Inline validation for each field.
Checkbox to save credit card details.
Added a hint about redirection for 3D Secure above the 'Pay with credit card' button.
After the user test, I refined the design, received feedback from the copywriter, and consulted with developers about restrictions from the credit card service provider. Key improvements include:
Clearer wording.
Auto-display of Visa/MasterCard icons based on the card number.
CVC/CVV hint icon directly in the input field (no pop-up).
Inline validation for each field.
Checkbox to save credit card details.
Added a hint about redirection for 3D Secure above the 'Pay with credit card' button.
Select a saved credit card
If logged-in users have previously saved a credit card, they will see the saved card with the last 4 digits and the Visa or MasterCard icon during checkout. For security reasons, the CVC/CVV is not stored, so users must re-enter it each time. In user testing, all 6 participants felt safe entering the CVC/CVV every time and didn’t consider it a waste of time. They were concerned about potential hackers if the CVC/CVV were saved in their account.
Select a saved credit card
If logged-in users have previously saved a credit card, they will see the saved card with the last 4 digits and the Visa or MasterCard icon during checkout. For security reasons, the CVC/CVV is not stored, so users must re-enter it each time. In user testing, all 6 participants felt safe entering the CVC/CVV every time and didn’t consider it a waste of time. They were concerned about potential hackers if the CVC/CVV were saved in their account.
Select a saved credit card
If logged-in users have previously saved a credit card, they will see the saved card with the last 4 digits and the Visa or MasterCard icon during checkout. For security reasons, the CVC/CVV is not stored, so users must re-enter it each time. In user testing, all 6 participants felt safe entering the CVC/CVV every time and didn’t consider it a waste of time. They were concerned about potential hackers if the CVC/CVV were saved in their account.
