PAYMENT PORTAL
Ionic framework based, single source payment portal allowing customers to make invoice payments through third party services and processors.
Early UI flow for Done app.
Invoice Payments
Single source, cloud payment platform providing invoice creation and online payment solutions for Sage accounting software customers.

The Challenge

Sage accounting software customers are relying on antiquated, manual invoicing processes and need a way to provide secure, digital payment processors to their customers. Legacy accounting products do not have integrated online payment solutions and are infrequently updated.

Customer Research

Based on abundant feedback from multiple Sage product sales teams and technical support staff, direct invoicing and online payment acceptance are critically necessary features for enabling these products to maintain continued market share. To further explore this feedback, I connected with Sage customers across multiple products to discover recurring scenarios and pain points:

The Invoice Payments Ecosystem



In order to facilitate multiple legacy Sage products connecting to a single source payment services solution, it was essential to collaborate with representatives from each product team to align upon a basic solution flow that incorporated all necessary security touchpoints.

The elephant in the room: aging, infrequently updated, legacy desktop applications with embedded, outdated web browsers. The UI for connecting payment processors, which would occur within the embedded browser, must be extremely lightweight and have minimal transitions, hover states, and scalable content.

The silver lining: the customer-facing payment portal is being built from scratch and the team had carte blanche to utilize the full capabilities of a modern architecture platform (we chose Ionic).
Early end to end overview of Invoice Payment Portal relative to third party payment services activation and invoice email with 'Pay Now' CTA.
Low Fidelity wireframe for customer-facing Payment Portal Invoice Payment.

Solution Integration Design

Adding invoice payments could not disrupt the current invoice creation flows or create additional technical debt for Sage legacy products. I needed to work closely with Sage product teams to create unified and seamless payment experiences while making minimal revisions to existing legacy product workflows.

To help stakeholders from each product team understand the scope of their integration, I created user flow maps to showcase end to end invoice payment experiences. To help product teams identify the UI features that they would be responsible for, I created more detailed user flows incorporating early screen mockups.
Early end to end user flow of Invoice Payment Portal relative to third party payment services activation.
Advanced, detailed user flow with mock screens from desktop product touchpoints and payment solutions portal.

Iterative Design

After gaining alignment and approval from stakeholders on integration user flows, the focus turns to the hierarchy and navigation of each portion of the invoice payments journey.

Progressing to higher-fidelity screens and interactive prototypes provides the development team with a blueprint for visual design and user interactions. The higher-fidelity prototypes are also presented to key stakeholders for approval before detailed development begins.

Screen design for single source Customer Payment Portal.
Clickable user flow prototype for Stripe payment processor integration.
Screen design for Sage Payment Center responsive web application.

Learnings

Next Project
© 2024 All rights reserved.
Thanks for dropping by!