Payment Portal

UX / UI Design
Project Overview
The payment portal redesign was initiated to support the company’s shift toward enabling customers to purchase products online without the need for a salesperson phone call. However, the existing portal’s interface appeared suspicious and untrustworthy, discouraging users from completing transactions.

Redesigned the existing portal to improve trust and usability, refining interaction patterns within older Zuora platform constraints. Partnered with a UX designer on journeys and flows, updated sales‑team forms, and streamlined steps for a clearer, more consistent payment experience.
My Contributions
  • Partnered with the UX designer, who led the overall user journeys and flows, while I focused on refining the detailed interaction patterns and ensuring consistency with design standards
  • Collaborated with stakeholders and cross-functional teams to align design improvements with business and technical requirements
  • Worked within the constraints of an older version of the Zuora application, the same platform powering the new online purchasing area, which imposed similar form limitations
  • Increased clarity with improved cost visibility and clearer communication of payment steps and deadlines
  • Updated payment forms for customers working with sales teams to ensure a consistent and trustworthy experience across purchase channels
  • Redesigned the existing payment portal to improve trustworthiness, professionalism, and user confidence in submitting payment details
  • Ensured the redesign maintained regulatory compliance
Using miro, we mapped out the current user flow to find where we could make improvements. Including design improvements to the layout.
This project was initiated to redesign the existing payment portal to improve user trust and confidence in submitting payment details, addressing concerns about the previous interface’s professionalism and clarity. Working within the constraints of an older version of the Zuora application—which also powered a separate new online purchasing area—I partnered with the UX designer, who led the development of the overall user journeys and flows, while I focused on refining the detailed interaction patterns and ensuring consistency with design standards.

From the beginning, I collaborated with developers to understand and work within the platform’s technical limitations, and worked closely with the project manager to keep milestones on track and aligned with business priorities. My efforts targeted key UX issues, including clarifying payment steps, consolidating redundant workflows, and simplifying error handling for a smoother, more consistent experience. I also updated payment forms for customers who still purchased through sales teams, creating a cohesive and trustworthy experience across purchase channels.

Throughout the process, I coordinated with stakeholders to balance regulatory compliance, usability improvements, and technical constraints. The resulting redesign delivered a clearer, more trustworthy, and user‑friendly payment portal—all while accommodating legacy platform limitations and supporting the company’s evolving business needs.
ConstructConnect
Miro whiteboards
Taskflows
Collaboration
Figma
The payment portal is a transitional layout between our marketing site and web application, so we took cues from both sites to bridge the user. Working with the development team, we created a mini-library for the components and styles used for this platform. This allowed us to reuse several elements in different areas of this platform without worrying about changes or changing the main components for the separate marketing and data sites.
UI Design
Migrated and rebuilt Adobe XD components to Figma
UX / UI Design
Boost user trust, improve clarity, and streamline payment process.
UX / UI Design
Updated to enhance security, usability, and streamline access
UX / UI Design
Updated the FieldCenter iPad app for better user alignment.