MULTI-INVOICE FORM

Design an intuitive web form that allows customers to seamlessly pay multiple invoices in a single transaction, while supporting various payment methods.

OVERVIEW

To complement our existing single-invoice payment form, I was tasked with designing a new form that enables clients to pay multiple invoices simultaneously and choose from various payment methods.

PROBLEM

The previously designed multi-invoice payment form was never launched and lacked usability. With the company’s rebranding efforts underway, the form required a visual update to align with the new brand identity and improve usability.

ACTION

Competitive Analysis, Design System, & UI Exploration

I conducted a brief competitive analysis of similar multi-invoice payment forms to gather insights on effective UI patterns. Utilizing our updated design system, I iterated on various layouts and workflows to enhance usability and align with industry best practices.

Design system table components

Design system colors, text style, floating tab, and contained tab specifications.

Design system specifications for colors, text style, floating tab, contained tab

I explored workflows ranging from rigid to fluid—where rigid workflows guide users through a defined, step-by-step process, and fluid workflows offer a more flexible path, allowing users to navigate freely to complete tasks.

Rigid workflow

Hybrid workflow

Fluid workflow

Initial Design Attempt

In a UX team review session, I presented five design concepts. The feedback was positive, with two designs selected for further exploration based on their potential to enhance the user experience. In the end, the team chose the fluid workflow option, where the invoice table and payment methods are placed side by side for greater convenience in selecting invoices and a payment method.

Design 1 with rigid workflow

Design 2 with hybrid workflow

Enhancing Table Usability and Surcharge Visibility: Changes Requested

Presenting the final design to the VP of Product Development highlighted the need to reduce table columns to prevent cumbersome horizontal scrolling. Additionally, the CTO emphasized making the surcharge information more prominent.

Reduce table columns

Make surcharge prominent

Mobile Layout Optimization

To eliminate vertical scrolling on desktop, I streamlined the content and layout effectively. Adapting this design for mobile posed challenges, which I overcame by implementing an accordion pattern from earlier design explorations. This approach allowed for a compact, user-friendly mobile layout.

Mobile layout for selecting payment method.

Mobile Layout Usability Testing

To ensure the mobile form's usability, my fellow designer and I conducted usability testing sessions with the Support team, leveraging their direct experience with customer interactions. We focused on evaluating:

Visibility of critical information (e.g., Invoice Total, Remaining Balance)
Ease of adjusting payment amounts
Efficiency in selecting preferred payment methods
Clarity of payment details
Ability to send email receipts post-transaction

Prototype Interview Guide Test Results

RESULTS

Streamlined Content & Efficient Workflow Design

By removing unnecessary columns and elements, we eliminated horizontal scrolling and ensured key information remained above the fold—crucial for capturing user attention in B2C environments.
Surcharge details are now prominently displayed alongside Subtotal and Total Amount in an equation format, maintaining consistency with the single-invoice form.
The updated UI aligns with our new brand identity.

Final form: saved card

Final multi-invoice form with surcharge info.

Final form: new card with surcharge

Refined Mobile Layout

Usability testing revealed two key improvements:

Terminology Update: The term "Payment Amount" under payment methods was unclear. So, we relabeled it as "Subtotal" to better reflect its purpose.
Enhanced Filtering: Invoices were initially listed by creation date. Based on Support team feedback, we introduced filtering options by Due Date (Oldest First), Payment Amount (Highest to Lowest), and Invoice Number (Highest to Lowest) to improve navigation.

RETROSPECTIVE

Incorporating diverse feedback can be challenging, but asking targeted questions helps clarify intent, align user needs with business goals, and streamline the design process by minimizing unnecessary revisions.