Redesigning invoice lists for mobile-first small businesses

The Xero Accounting App is used by small businesses to manage their finances on the go. However, the previous design of invoice lists wasn't fully accessible and made it difficult for users to quickly assess cash flow. This led them to rely on the desktop experience for clarity.

As part of the rollout of Xero’s new design system, I took the opportunity to redesign the invoice lists on mobile, focusing on improving scannability and surfacing key information.

A survey with 17 small business owners revealed that across different invoice statuses and tasks, contact name and total amount were the most important signals. Together, they answered three key questions:

• Who owes me?
• How much?
• What should I do first?

With this in mind, I ran ideation and prioritisation workshops with design and engineering to identify the highest-impact opportunities that would best highlight contacts and amounts.

The redesign surfaced overdue and near-due invoices first, with days overdue and due shown inline to support faster decisions.

Flexible sorting was introduced within the lists, allowing users to organise invoices by contact name, amount, due date, or issue date. This gave users clearer control over how they prioritise work day to day.

The redesign (shipped on Android in October 2022 and iOS in March 2023) improved accessibility across the invoice lists, aligning it with modern standards and making key information easier to absorb. Users were able to locate invoices more quickly, reducing time spent scanning and navigating.

The modernisation to Xero’s new design system reduced technical debt, enabling the team to more easily introduce future enhancements and maintain consistency across the app.