Conflict Resolution in Checkout
When the cybersecurity team at Ashley Furniture initiated an update to the payment gateway, a potential conflict emerged between security compliance and user experience. The proposed change introduced a new payment modal that required users to enter their credit card details in a pop-up window—something users typically associate with phishing or fraud.
As the Director of UX, I led the effort to find a solution that upheld both security integrity and user trust—a balance that would prove crucial in maintaining conversion rates and customer confidence.
Business Requirements vs. User Needs
| Business Requirement | User Needs |
| Implement the vendor’s updated payment gateway modal to ensure compliance with cybersecurity standards. | Maintain a seamless, trustworthy checkout experience without unexpected pop-ups. |
| Ensure PCI and tokenization compliance. | Feel confident their payment data is processed securely within Ashley’s checkout flow. |
| Minimize development disruption to stay on schedule. | Complete purchases quickly, without confusion or doubt. |
Project Goal
Design a solution that integrates the updated payment gateway without disrupting user trust or increasing checkout abandonment, while fully meeting cybersecurity and compliance requirements.
Research
Methods
- Usability Testing: Observed 10 users completing checkout with the proposed modal.
- Heuristic Evaluation: Compared modal design against eCommerce best practices.
- Competitive Benchmarking: Analyzed how leading retailers (Amazon, Wayfair, Target) structure their checkout experiences.
Findings
- 90% of participants were reluctant to enter credit card details in the modal.
- 60% of sessions resulted in abandonment or extended hesitation.
Common reactions included:
“This looks like a pop-up scam.”
“Am I being redirected somewhere else?”
These findings validated the risk: introducing the modal would harm user trust and conversion.
Design
Challenge
The service provider development team stated that the modal was mandatory and could not be re-implemented differently. The UX concern was valid—but so were their security requirements.
This became an opportunity to collaborate creatively rather than compromise.
Solution
Drawing from previous experience with modal workarounds in a enterprise platform, I proposed an alternate implementation:
- Remove modal styling: Eliminated shadows and overlays that made it appear as a pop-up.
- Anchor form in place: Fixed the location to match where the credit card fields traditionally appeared.
- Maintain compliance: Preserved all backend security protocols and tokenization.
Working directly with the payment gateway team, we achieved a seamless visual experience without disrupting the required security layer.
Before
Before – Proposed Payment Gateway Modal
User is unexpectedly prompted with a modal to enter sensitive payment details.
After
After – Final Checkout Experience
Credit card fields integrated naturally into the checkout page, maintaining user trust and visual consistency.
Impact
- User Trust Preserved – No post-launch reports of confusion or fraud concerns.
- Conversion Stability Maintained – Checkout completion rates remained consistent with pre-update benchmarks.
- Cross-Team Collaboration Strengthened – UX and Cybersecurity teams established a new protocol for co-reviewing future security updates.
- Process Template Created – Documented a best-practice pattern for handling future third-party gateway changes.
Learnings
This project proved the power of early UX involvement. By joining technical discussions from the start, we caught potential issues before they became costly fixes. What began as departmental tension turned into collaboration and innovation through open communication. It also reminded us how fragile user trust is—especially around financial data. Even small inconsistencies can create doubt. In the end, this became a model of balancing user empathy with business and technical demands—a true UX win born from conflict.