Product Designer
Product Design · Payments UX
2024
Payment migration with continuity of experience
An Australian paint retailer needed to replace its payment infrastructure with Windcave. I designed the experience to preserve context, visual consistency, and control during checkout. The work was implemented according to the specification. Post-launch metrics are covered by the client’s NDA.
Checkout · Windcave · International Client · Implemented
Product Designer
Product Design · Payments UX
2024
Payment migration with continuity of experience
An Australian paint retailer needed to replace its payment infrastructure with Windcave. I designed the experience to preserve context, visual consistency, and control during checkout. The work was implemented according to the specification. Post-launch metrics are covered by the client’s NDA.
Checkout · Windcave · International Client · Implemented
Product Designer
Product Design · Payments UX
2024
Payment migration with continuity of experience
An Australian paint retailer needed to replace its payment infrastructure with Windcave. I designed the experience to preserve context, visual consistency, and control during checkout. The work was implemented according to the specification. Post-launch metrics are covered by the client’s NDA.
Checkout · Windcave · International Client · Implemented
Context and problem
A gateway migration involves infrastructure, but also changes the moment when people provide their payment details. The previous checkout used different fonts, buttons, and fields from the rest of the site and did not offer a clear path back to the cart.
The integration needed to keep the experience recognizable and respect the gateway’s customization limits. The hypothesis was that visual continuity and an explicit return to the cart would reduce uncertainty. The case study presents no measurement that demonstrates this effect on abandonment.
Evidence
I analyzed the integration documentation to distinguish customizable elements from fixed ones before designing screens. I also compared checkout patterns used in the Australian context, including familiar payment experiences, to discuss visual identity, return paths, and feedback.
The demonstrable problems in the previous flow were visual discontinuity and the lack of an explicit cancel or return action. Market expectations served as design references, without claiming universal behavior among Australian consumers.
Constraints and trade-offs
The hosted payment page allowed CSS customization within structural limits. The timeline was fixed, and implementation needed to align with the existing design system. Engineering assessed the integration options and their security requirements.
I mapped the site’s tokens to Windcave’s capabilities. Where there was no exact equivalent, we prioritized typography and the most visible buttons, accepting minor differences that avoided solutions with disproportionate maintenance needs.
Decisions and solution
1. Keep payment in a modal overlay
We compared page redirection, an embedded form, and a modal overlay. The client-approved proposal kept the site visible in the background and placed the payment form within a visual structure aligned with the retailer. The choice addressed context and implementation constraints; it did not demonstrate reduced abandonment.
2. Provide a clear way out
The "Back to cart" action allowed people to review their order or reconsider payment without relying on the browser’s back button. The text label made the consequence more explicit than a standalone icon.
3. Align the structure with the design system
I specified the header, order summary, button hierarchy, typography, and modal dismissal. Loading, processing, error, and success states had defined behaviors to reduce ambiguity during implementation.
Documented impact
The redesign was implemented according to the specification. The client approved the proposal before development, and engineering received documentation of interaction states and customization constraints.
Post-launch conversion metrics are covered by an NDA. No A/B test against the redirection alternative was presented. Visual continuity and clearer recovery are therefore verifiable deliverables; reduced abandonment and increased conversion remain unproven in this material.
My role and collaboration
I analyzed Windcave’s documentation and recorded customization limits.
I proposed the modal approach and documented alternatives and rationale for client approval.
I mapped the tokens and designed the structure around the payment form.
I specified all interaction states and handed over the material to the client’s engineering team.
The client approved the scope and approach; engineering was responsible for integration and implementation. The presentation respects the confidentiality of the metrics.
Reflection
The migration created an opportunity to address existing problems, such as the lack of an explicit return path and visual inconsistency. In a future project, I would advocate for instrumentation before the change and an evaluation design that allowed alternatives to be compared. Without that follow-up, the business benefit remains a hypothesis.
Evidence
I analyzed the integration documentation to distinguish customizable elements from fixed ones before designing screens. I also compared checkout patterns used in the Australian context, including familiar payment experiences, to discuss visual identity, return paths, and feedback.
The demonstrable problems in the previous flow were visual discontinuity and the lack of an explicit cancel or return action. Market expectations served as design references, without claiming universal behavior among Australian consumers.
Constraints and trade-offs
The hosted payment page allowed CSS customization within structural limits. The timeline was fixed, and implementation needed to align with the existing design system. Engineering assessed the integration options and their security requirements.
I mapped the site’s tokens to Windcave’s capabilities. Where there was no exact equivalent, we prioritized typography and the most visible buttons, accepting minor differences that avoided solutions with disproportionate maintenance needs.
Decisions and solution
1. Keep payment in a modal overlay
We compared page redirection, an embedded form, and a modal overlay. The client-approved proposal kept the site visible in the background and placed the payment form within a visual structure aligned with the retailer. The choice addressed context and implementation constraints; it did not demonstrate reduced abandonment.
2. Provide a clear way out
The "Back to cart" action allowed people to review their order or reconsider payment without relying on the browser’s back button. The text label made the consequence more explicit than a standalone icon.
3. Align the structure with the design system
I specified the header, order summary, button hierarchy, typography, and modal dismissal. Loading, processing, error, and success states had defined behaviors to reduce ambiguity during implementation.
Documented impact
The redesign was implemented according to the specification. The client approved the proposal before development, and engineering received documentation of interaction states and customization constraints.
Post-launch conversion metrics are covered by an NDA. No A/B test against the redirection alternative was presented. Visual continuity and clearer recovery are therefore verifiable deliverables; reduced abandonment and increased conversion remain unproven in this material.
My role and collaboration
I analyzed Windcave’s documentation and recorded customization limits.
I proposed the modal approach and documented alternatives and rationale for client approval.
I mapped the tokens and designed the structure around the payment form.
I specified all interaction states and handed over the material to the client’s engineering team.
The client approved the scope and approach; engineering was responsible for integration and implementation. The presentation respects the confidentiality of the metrics.
Reflection
The migration created an opportunity to address existing problems, such as the lack of an explicit return path and visual inconsistency. In a future project, I would advocate for instrumentation before the change and an evaluation design that allowed alternatives to be compared. Without that follow-up, the business benefit remains a hypothesis.