Home Shopping Europe Webshop
Credit Card Payment Integration
The credit card payment option was integrated into the checkout flow, which had not previously been available in the Home Shopping Europe webshop. User experience and technical constraints were carefully considered.
Home Shopping Europe Webshop
Credit Card Payment Integration
The credit card payment option was integrated into the checkout flow, which had not previously been available in the Home Shopping Europe webshop. User experience and technical constraints were carefully considered.
Home Shopping Europe Webshop
Credit Card Payment Integration
The credit card payment option was integrated into the checkout flow, which had not previously been available in the Home Shopping Europe webshop. User experience and technical constraints were carefully considered.
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 revealed that customers specifically complained about the lack of credit card payment options. Market research indicated that credit cards ranked as the fourth most preferred payment method within the target group. Despite their significance to customers, the option was not offered in the Home Shopping Europe webshop, potentially harming both conversion rates and customer satisfaction.
Problem Statement
Hotjar feedback revealed that customers specifically complained about the lack of credit card payment options. Market research indicated that credit cards ranked as the fourth most preferred payment method within the target group. Despite their significance to customers, the option was not offered in the Home Shopping Europe webshop, potentially harming both conversion rates and customer satisfaction.
Problem Statement
Hotjar feedback revealed that customers specifically complained about the lack of credit card payment options. Market research indicated that credit cards ranked as the fourth most preferred payment method within the target group. Despite their significance to customers, the option was not offered in the Home Shopping Europe webshop, potentially harming both conversion rates and customer satisfaction.
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
Iteration Summary
Iteration 1: Initial Rollout – Credit Card Payment The credit card payment feature was launched with support limited to Visa and Mastercard, the most commonly used cards among the target group. The focus of this iteration was to introduce the feature quickly and encourage user adoption. Iteration 2: Save Credit Card Information A functionality was added to securely store users’ credit card information (excluding CVC/CVV). On subsequent purchases, users were only required to enter their CVC/CVV, simplifying the checkout process and enhancing the overall user experience.
Iteration Summary
Iteration 1: Initial Rollout – Credit Card Payment The credit card payment feature was launched with support limited to Visa and Mastercard, the most commonly used cards among the target group. The focus of this iteration was to introduce the feature quickly and encourage user adoption. Iteration 2: Save Credit Card Information A functionality was added to securely store users’ credit card information (excluding CVC/CVV). On subsequent purchases, users were only required to enter their CVC/CVV, simplifying the checkout process and enhancing the overall user experience.
Iteration Summary
Iteration 1: Initial Rollout – Credit Card Payment The credit card payment feature was launched with support limited to Visa and Mastercard, the most commonly used cards among the target group. The focus of this iteration was to introduce the feature quickly and encourage user adoption. Iteration 2: Save Credit Card Information A functionality was added to securely store users’ credit card information (excluding CVC/CVV). On subsequent purchases, users were only required to enter their CVC/CVV, simplifying the checkout process and enhancing the overall user experience.
User
Based on user interviews and testing, it was found that the primary demographic of Home Shopping Europe webshop customers consists of German women aged 45 and above. These users prioritize easy navigation, straightforward steps, clear instructions, and accessibility. To accommodate age-related visual needs, a minimum body text size of 16px was adopted to ensure readability. Additionally, color usage was intentionally minimized to avoid cognitive overload and maintain visual clarity for this demographic.
User
Based on user interviews and testing, it was found that the primary demographic of Home Shopping Europe webshop customers consists of German women aged 45 and above. These users prioritize easy navigation, straightforward steps, clear instructions, and accessibility. To accommodate age-related visual needs, a minimum body text size of 16px was adopted to ensure readability. Additionally, color usage was intentionally minimized to avoid cognitive overload and maintain visual clarity for this demographic.
User
Based on user interviews and testing, it was found that the primary demographic of Home Shopping Europe webshop customers consists of German women aged 45 and above. These users prioritize easy navigation, straightforward steps, clear instructions, and accessibility. To accommodate age-related visual needs, a minimum body text size of 16px was adopted to ensure readability. Additionally, color usage was intentionally minimized to avoid cognitive overload and maintain visual clarity for this demographic.
Placement of Credit Card Input Fields
Two placement approaches were considered for credit card forms:
In Checkout (e.g., Zalando, Amazon):
Credit card details are entered directly within the checkout flow, providing full control over the UI and error handling.Redirected to a Service Provider (e.g., Otto):
Users select credit card payment and are redirected to a provider such as Adyen to complete the transaction. This limits control over the UI and introduces potential data and error handling challenges.
After discussions with product managers and developers, the decision was made to place the credit card forms directly in the checkout to maximize control and optimize the user experience.
User-Friendly: Immediate entry of credit card details allows for early error detection and prevents unnecessary redirections.
Technical Advantage: Maintaining the form within the checkout avoids external dependencies and provides better control over data security and validation.
Two placement approaches were considered for credit card forms:
In Checkout (e.g., Zalando, Amazon):
Credit card details are entered directly within the checkout flow, providing full control over the UI and error handling.Redirected to a Service Provider (e.g., Otto):
Users select credit card payment and are redirected to a provider such as Adyen to complete the transaction. This limits control over the UI and introduces potential data and error handling challenges.
After discussions with product managers and developers, the decision was made to place the credit card forms directly in the checkout to maximize control and optimize the user experience.
User-Friendly: Immediate entry of credit card details allows for early error detection and prevents unnecessary redirections.
Technical Advantage: Maintaining the form within the checkout avoids external dependencies and provides better control over data security and validation.
Choose credit card
Choose credit card
View 3D Secure Information
View 3D Secure Information
Fill in the card data
Fill in the card data
Click buy with credit card
Click buy with credit card
3D Secure
3D Secure
Confirmation page
Confirmation page
User Flow
After the placement of the credit card input forms was determined, the overall user flow for credit card payment was defined.
User Flow
After the placement of the credit card input forms was determined, the overall user flow for credit card payment was defined.
User Flow
After the placement of the credit card input forms was determined, the overall user flow for credit card payment was defined.
Prototype User Testing
A quick interactive prototype was created to validate whether users could intuitively complete the process. An internal dogfooding test was conducted with four colleagues. 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.
Prototype User Testing
A quick interactive prototype was created to validate whether users could intuitively complete the process. An internal dogfooding test was conducted with four colleagues. 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.
Prototype User Testing
A quick interactive prototype was created to validate whether users could intuitively complete the process. An internal dogfooding test was conducted with four colleagues. 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.
Improvements
Following the user test, the design was refined based on feedback from users, the copywriter, and developers, while considering restrictions from the credit card service provider. Key improvements from the first iteration included:
Following the user test, the design was refined based on feedback from users, the copywriter, and developers, while considering restrictions from the credit card service provider. Key improvements from the first iteration included:
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.
Additional hint added about 3D Secure redirection above the ‘Pay with credit card’ button.
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.
Additional hint added about 3D Secure redirection above the ‘Pay with credit card’ button.
In the second iteration, a checkbox was introduced to allow users to securely save their credit card details for future purchases, reducing input effort in subsequent transactions.
In the second iteration, a checkbox was introduced to allow users to securely save their credit card details for future purchases, reducing input effort in subsequent transactions.
Select a Saved Credit Card
If logged-in users had previously saved a credit card, the saved card was displayed with the last four digits and the Visa or Mastercard icon during checkout. For security reasons, CVC/CVV data was not stored, requiring users to re-enter it for every purchase. During user testing (6 participants), all participants reported feeling safe entering their CVC/CVV each time and did not perceive it as an inconvenience. Concerns were expressed about potential hacking risks if CVC/CVV had been stored in the account.
Select a Saved Credit Card
If logged-in users had previously saved a credit card, the saved card was displayed with the last four digits and the Visa or Mastercard icon during checkout. For security reasons, CVC/CVV data was not stored, requiring users to re-enter it for every purchase. During user testing (6 participants), all participants reported feeling safe entering their CVC/CVV each time and did not perceive it as an inconvenience. Concerns were expressed about potential hacking risks if CVC/CVV had been stored in the account.
Select a Saved Credit Card
If logged-in users had previously saved a credit card, the saved card was displayed with the last four digits and the Visa or Mastercard icon during checkout. For security reasons, CVC/CVV data was not stored, requiring users to re-enter it for every purchase. During user testing (6 participants), all participants reported feeling safe entering their CVC/CVV each time and did not perceive it as an inconvenience. Concerns were expressed about potential hacking risks if CVC/CVV had been stored in the account.
Next project
HSE call center
Internal Order Management System for Agents
Next project
HSE call center
Internal Order Management System for Agents
Next project
HSE call center
Internal Order Management System for Agents