CRS

Designing an accessible mobile invoice payment experience for a legacy desktop-first product

CRS

Designing an accessible mobile invoice payment experience for a legacy desktop-first product

CRS

Designing an accessible mobile invoice payment experience for a legacy desktop-first product

CRS

Designing an accessible mobile invoice payment experience for a legacy desktop-first product

Summary

Summary

I led the mobile design effort for Customer Invoice Portal, translating a complex desktop invoice structure into accessible, responsive layouts that preserved usability on smaller screens.

Project Overview

  • My role: Product Designer

  • Project status: in-progress

  • Team: Partnered with another Product Designer, Scrum Master, Frontend and Backend Developers

  • Tools: Figma (Design and Make), Jira, CoPilot (copywriting)

Context and Problem

Customer Invoice Portal is a secure online portal where customers can view, manage, and pay invoices. Following an internal compliance audit, the portal needed updates to meet WCAG 2.2 AA accessibility standards, improve mobile responsiveness, and provide more accessible navigation options.

Because the existing experience was designed for desktop without responsive behavior in mind, key workflows were difficult to adapt to smaller screens without content overflow or usability issues. This was especially challenging in the invoice selection and payment flow, where table-based layouts made complex invoice information difficult to translate into a mobile-friendly experience.

Context and Problem

Customer Invoice Portal is a secure online portal where customers can view, manage, and pay invoices. Following an internal compliance audit, the portal needed updates to meet WCAG 2.2 AA accessibility standards, improve mobile responsiveness, and provide more accessible navigation options.

Because the existing experience was designed for desktop without responsive behavior in mind, key workflows were difficult to adapt to smaller screens without content overflow or usability issues. This was especially challenging in the invoice selection and payment flow, where table-based layouts made complex invoice information difficult to translate into a mobile-friendly experience.

Proposed mobile flow (320–767px) for a one-time payment

Constraints

  • Legacy desktop-first product: The mobile experience needed to introduce responsive and accessibility-focused improvements while staying visually and functionally aligned with the existing desktop product.


  • No accessible mobile precedent: The product had no existing mobile experience that met accessibility standards, requiring new responsive patterns to be defined from the ground up.


  • Product inconsistency: Years of incremental development created inconsistent UI patterns across the product, requiring careful alignment around reusable components and visual standards.


  • Complex invoice data: Dense invoice information needed to remain complete, understandable, and actionable on smaller screens without disrupting existing payment workflows.

Constraints

  • Legacy desktop-first product: The mobile experience needed to introduce responsive and accessibility-focused improvements while staying visually and functionally aligned with the existing desktop product.


  • No accessible mobile precedent: The product had no existing mobile experience that met accessibility standards, requiring new responsive patterns to be defined from the ground up.


  • Product inconsistency: Years of incremental development created inconsistent UI patterns across the product, requiring careful alignment around reusable components and visual standards.


  • Complex invoice data: Dense invoice information needed to remain complete, understandable, and actionable on smaller screens without disrupting existing payment workflows.

Design approach and workflow

Given the problem and these constraints, I approached the project by identifying where the desktop-first experience would break down on smaller screens, then defining responsive patterns that preserved invoice clarity, accessibility, and alignment with the existing product.

  • Audited the existing workflow: Reviewed invoice selection, payment flow, table structures, and navigation paths to identify where desktop layouts could create overflow, unclear hierarchy, or usability issues on mobile.


  • Prioritized invoice information: Mapped which invoice details needed to remain visible, actionable, or secondary on smaller screens, helping translate dense table-based layouts into mobile-friendly patterns.


  • Defined responsive patterns: Created reusable layout and component patterns that supported complex invoice data while staying visually and functionally consistent with the desktop product.


  • Designed for accessibility: Applied WCAG 2.2 AA considerations to navigation, content structure, and interaction patterns throughout the workflow.


  • Validated feasibility with engineering: Partnered with frontend and backend developers early to understand technical constraints, align on what information to display, and refine designs before handoff.


This approach shaped the final solution across layout, accessibility, and responsive invoice patterns.

Design approach and workflow

Given the problem and these constraints, I approached the project by identifying where the desktop-first experience would break down on smaller screens, then defining responsive patterns that preserved invoice clarity, accessibility, and alignment with the existing product.

  • Audited the existing workflow: Reviewed invoice selection, payment flow, table structures, and navigation paths to identify where desktop layouts could create overflow, unclear hierarchy, or usability issues on mobile.


  • Prioritized invoice information: Mapped which invoice details needed to remain visible, actionable, or secondary on smaller screens, helping translate dense table-based layouts into mobile-friendly patterns.


  • Defined responsive patterns: Created reusable layout and component patterns that supported complex invoice data while staying visually and functionally consistent with the desktop product.


  • Designed for accessibility: Applied WCAG 2.2 AA considerations to navigation, content structure, and interaction patterns throughout the workflow.


  • Validated feasibility with engineering: Partnered with frontend and backend developers early to understand technical constraints, align on what information to display, and refine designs before handoff.


This approach shaped the final solution across layout, accessibility, and responsive invoice patterns.

Design approach and workflow


Given the problem and these constraints, I approached the project by identifying where the desktop-first experience would break down on smaller screens, then defining responsive patterns that preserved invoice clarity, accessibility, and alignment with the existing product.


  • Audited the existing workflow: Reviewed invoice selection, payment flow, table structures, and navigation paths to identify where desktop layouts could create overflow, unclear hierarchy, or usability issues on mobile.


  • Prioritized invoice information: Mapped which invoice details needed to remain visible, actionable, or secondary on smaller screens, helping translate dense table-based layouts into mobile-friendly patterns.


  • Defined responsive patterns: Created reusable layout and component patterns that supported complex invoice data while staying visually and functionally consistent with the desktop product.


  • Designed for accessibility: Applied WCAG 2.2 AA considerations to navigation, content structure, and interaction patterns throughout the workflow.


  • Validated feasibility with engineering: Partnered with frontend and backend developers early to understand technical constraints, align on what information to display, and refine designs before handoff.


This approach shaped the final solution across layout, accessibility, and responsive invoice patterns.

User flow: How a user navigates the payment experience on the portal

Solution

Solution

  • Accessible, system-aligned design: Used existing design system components where possible to maintain consistency across the product ecosystem while aligning the mobile experience with WCAG 2.2 AA accessibility standards. 

  • Collaborative design alignment: Partnered with another designer to align layout decisions, component usage, and interaction patterns across the experience, helping create a more consistent mobile interface.

  • Mobile-friendly navigation: Designed navigation patterns that created a clearer, more mobile-friendly way for users to move through the portal.

Designers agreed on two breakpoints: 320–767px and 768px and up

  • Responsive invoice cards: Translated dense table-based invoice data into card-based layouts, with each card representing one invoice and preserving the key details users needed to review, select, and act on invoices.

  • Clear engineering handoff: Documented design decisions with detailed annotations, mapped desktop table data points to their corresponding mobile card locations, and provided an interactive prototype to help engineers understand content hierarchy, responsive behavior, and how invoice information should translate across breakpoints.

The prototype of the proposed MVP design

Next Steps

The core design work is complete and currently in peer review. Next steps include broader design team review, then engineering feedback and refinement before final handoff.

Next Steps

The core design work is complete and currently in peer review. Next steps include broader design team review, then engineering feedback and refinement before final handoff.

Next Steps

The core design work is complete and currently in peer review. Next steps include broader design team review, then engineering feedback and refinement before final handoff.

Return to Home

Next Project