MULTI-INVOICE FORM

Design an intuitive web form that enables customers to seamlessly pay multiple invoices in a single transaction, offering flexibility through various payment methods.

OVERVIEW

I was tasked to design a web form enabling clients to pay multiple invoices simultaneously using various payment methods. This addition complements our existing single-invoice payment form, streamlining the billing process and improving the overall user experience.

PROBLEM

The previously designed multi-invoice payment form was never launched. With the company's rebranding efforts underway, the form required a visual update to align with the new brand identity. Additionally, its current design lacks user-friendly features, hindering a seamless payment experience.

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

Preliminary option 1

Preliminary option 2

Preliminary option 3

Initial Design Attempt

In a peer design review session, I presented five design concepts for the multi-invoice payment form. The feedback was positive, with two designs selected for further exploration based on their potential to enhance user experience.

Design 1 chosen for further exploration

Design 2 chosen for further exploration

Enhancing Table Usability and Surcharge Visibility: Change of Requirement

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 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 and Effective Layout

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.
The updated UI aligns with our new brand identity.
Surcharge details are now prominently displayed alongside Subtotal and Total Amount in an equation format, maintaining consistency with the single-invoice form.

Final form saved sard

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. 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.