Revising Payment Portal

Project Goal:
The primary objective of this project was to redesign the payment processing experience, modernizing the interface to align with current branding standards and significantly improve user confidence. To kick off the process, we were provided with five foundational page layouts that helped shape the initial concept. Building on these, we mapped out all user and task flows to ensure a seamless and intuitive payment experience from start to finish.

Remaining on the Zuora payment platform was a strategic choice to address security and compliance requirements. While Zuora’s framework limited the extent of customization possible on the payment forms, it allowed us to focus on optimizing user experience while relying on a robust, industry-standard security solution.

Tools & Methods: 

  • Stakeholder interviews and demos to gather requirements and insights
  • Collaborative audits and redlining sessions with UI partners
  • Figma for interface design and prototyping
  • Miro for workflow mapping, brainstorming, and comparing new vs. old flows
  • User research sessions, including Voice of Customer (VOC) and Voice of Organization (VOO) interviews
  • Cross-functional reviews with UX, development, product management, content, and legal teams
  • Responsive and adaptive design to ensure usability across devices
Using miro we mapped out the user's current flow and screens they see to find where we could improve flows and interfaces.
Comparison of the old and the updated interface used in the payment portal
While working on the flows for the updated payment portal, we also made sure to take into account responsive and adaptive views.

The process

The project began with a comprehensive audit of the existing payment interface and workflows. We engaged directly with users, stakeholders, and internal experts to identify the main sources of confusion and friction. Feedback revealed that the old interface’s outdated look and unclear flows often led to hesitation and uncertainty during the payment process.

We mapped out all user and task flows in Miro. This allowed us to pinpoint critical UX issues, such as unclear payment timing, fragmented error handling, and a lack of transparency around costs and deadlines. These insights directly informed our design and content decisions.

Due to the security-sensitive nature of payment processing, we remained on the Zuora platform. This ensured industry-standard security and compliance while we focused on enhancing the user experience within those constraints. We improved interface language, consolidated error pages, and streamlined workflows. Transparency was increased by making estimated amounts and payment deadlines visible throughout the process.

Collaboration with Content and Legal teams ensured that all legal copy was accurate and compliant.

Results & Impact

The redesigned payment portal delivered a modern, trustworthy, and efficient user experience. The updated interface, clearer language, and improved transparency reassured users and made the payment process more intuitive. Streamlined workflows and simplified error handling led to higher transaction completion rates, while updated legal content and process transparency ensured regulatory compliance. These improvements reduced user hesitation and supported business goals by minimizing abandoned transactions and enhancing customer satisfaction.

Additional Highlights

  • Component Library: We designed a reusable component library for the payment portal, expediting development and ensuring consistency.
  • Payment Form Enhancements: Features like a toggle for selecting payment options reduced friction and improved usability.
  • Flow Optimization: By reusing components and refining flows, we reduced development time and improved the overall experience.
The payment portal is on a separate platform from our main web application. Working with the development team we designed a component library that helped with creating reusable elements in the portal pages.
While working on the interface, we found where we could reuse components to reduce the development time required.
Using the toggle to allow the user to select their payment option was one way we reduced friction to paying invoices.

Collaboration and Interface Consistency:

Throughout the project, I worked closely with the development team and product management to refine the user interface. Together, we focused on creating and implementing UI components that would deliver a more consistent look and feel with our main platform, despite the restrictions imposed by working within the Zuora payment system. This included designing reusable elements and ensuring that visual and interaction patterns matched our broader brand standards, which helped unify the user experience across platforms.

Lessons Learned:

  • Early collaboration with security and development teams was essential for understanding platform constraints and prioritizing feasible improvements.
  • Focusing on user trust and addressing specific pain points—like the perception of a phishing risk—had an outsized impact on user confidence and conversion rates.
  • Leveraging collaborative tools like Figma and Miro enabled rapid iteration and alignment across teams, even within the limits set by third-party platforms.
  • Regular user research and feedback cycles, including both VOC and VOO sessions, ensured that updates addressed real concerns and delivered measurable improvements in both usability and trust.
  • This project reinforced the importance of balancing security, compliance, and user experience in payment-related design work.