Digital Invoice
Redesigned Millennium’s paper invoice into an interactive digital experience, improving readability, usability, and information structure.
Role
UX Designer
Team
2 UX Designers
1 dev team
Scope
User Research; UX Design; Prototyping; User Testing;
the client
Millennium is one of Portugal’s leading financial institutions, offering a wide range of banking and financial services to individuals, businesses, and corporate clients. As a key player in the banking sector, Millennium is known for its commitment to digital innovation, continuously improving its online and mobile banking experiences to meet evolving customer needs.
Context
In the financial sector, invoices are a crucial touchpoint between banks and their customers. However, the bank’s existing paper invoice was difficult to read, had issues with information handling, and lacked clarity in structure. Customers frequently contacted support for clarifications, resulting in increased operational costs. This project was an opportunity to improve the user experience and leverage digital transformation by designing an interactive invoice that could be more intuitive and efficient.
Our team was already a pioneer in interactive invoices in Portugal, having won Gold in M&P’s Digital category (2017) for a previous project. This experience positioned us uniquely to tackle this challenge and set a new benchmark for financial document design.
Responsibilities
- Heuristics analysis
- Stakeholder 2-session workshop: organising and moderating;
- Design low and high-fidelity mockups + prototyping
- Usability testing: preparation, moderation and analysis.
Understanding the Problem: Challenges
1
Identifying user pain points with the existing paper invoice. Customers found it overwhelming due to poor information hierarchy, small fonts, and a cluttered layout, leading to confusion and unnecessary calls to customer support.
2
Collaborating across multiple departments (Finance, Customer Service, Compliance, and Digital Banking) to redefine the invoice’s information architecture while ensuring it met regulatory requirements.
3
Designing a fully digital invoice that could accommodate subpages and interactive elements, allowing users to explore detailed breakdowns, payment options, and transaction histories seamlessly.
Research & Discovery
Heuristics Analysis: Identifying Key Usability Issues
We began with a comprehensive research phase to ensure our design was data-driven.
To assess the existing paper invoice, we conducted a heuristic evaluation based on Jakob Nielsen’s usability principles. We identified several critical usability issues:
Poor information architecture:
- The most critical details (e.g., due date, total amount, minimum payment) were buried among less relevant information;
- Users had to scan the entire document multiple times to find what they needed.
Confusing Terminology & Financial Jargon:
- Terms like "Statement Balance," "Billing Cycle," and "Outstanding Amount" were not clearly defined;
- No contextual explanations were provided, leading to frequent customer support inquiries.
Lack of Visual Clarity & Readability Issues:
- Font sizes were too small, making it difficult for users (especially older customers) to read;
- Low contrast between text and background contributed to accessibility challenges, violating WCAG readability guidelines.
No Actionable Elements
- The invoice did not provide easy payment options or interactive components;
- Customers had to manually input payment details into their banking app, increasing friction in the payment process.
a page of millennium bcp's invoice in 2017
Customer & Stakeholder Feedback: What We Learned
To validate our heuristic findings, we conducted a survey for a small sample of existing customers and internal stakeholder discussions.
Customer Pain Points (Survey)
“I had to call support multiple times to have my invoice explained to me because it’s too complex for me to read.”
“I always check three times before paying because I don’t trust that I’ve read the correct amount.”
“I wish I could just click to pay instead of manually typing everything into Millennium’s app.”
Stakeholder Priorities (Internal Meetings)
Customer Service Team: Reduce the volume of invoice-related inquiries.
Compliance & Legal: Ensure transparency while maintaining regulatory standards.
Finance & Product Teams: Encourage faster payments and reduce missed due dates.
Key takeaway: All teams agreed that a digital, interactive invoice could significantly improve usability and customer satisfaction—while reducing operational costs.
Competitive Analysis: Learning from Fintech Innovators
To ensure our solution was not just an improvement but a best-in-class experience, we analyzed digital invoices and statements from modern fintech companies like Revolut, Wise, N26, and Nubank.
bank
Invoice Strengths
What We Could Improve
Revolut
Clean, minimalist UI with clear transaction details.
Lacked deep invoice breakdown and contextual tooltips.
N26
Intuitive navigation and one-tap payments.
Could improve the hierarchy of due dates & amounts.
Nubank
Excellent use of color and typography to highlight key information.
Too much reliance on visuals over text.
Design Workshop
To align all stakeholders, we facilitated a two-part design workshop involving representatives from Finance, Customer Service, Legal, and Digital teams:
Part 1:
Stakeholders were divided into four groups and asked to reorganize the invoice’s content based on logical grouping and priority levels. Each group then sketched a rough layout for the new invoice and presented their ideas. Based on these, I worked on two different mockups to be evaluated on a second session.
Part 2:
In the second part of the workshop, our objective was to refine the group proposals and define a Minimum Viable Product (MVP) version of the interactive invoice.
We developed two slightly different information architectures, each prioritizing key content in distinct ways. Using these structures as a foundation, we created multiple design proposals for the main pages—focusing on the areas that groups had identified as most relevant to customers.
Participants were encouraged to sketch layouts, use post-its, or provide direct feedback on existing drafts. As they shared insights and voted on the strongest ideas, we synthesized the top concepts into a clear direction, setting the stage for the high-fidelity mockups.
User Testing & Validation
To validate the new invoice’s usability, we conducted a series of user tests with a sample of 6 participants:
Think-Aloud
Users navigated the prototype while verbalizing their thought process
Eye-tracking
Heatmaps helped us understand which sections attracted attention and whether users followed the intended reading path.
Task-based
Users were given real scenarios (e.g., “Find your past due amount” or “Understand why your bill increased this month”) to ensure information was easily accessible.
Findings & Improvements
- Users found the new invoice significantly easier to read, thanks to improved hierarchy and typography.
- The ability to expand/collapse sections allowed users to customize their experience based on the level of detail they needed.
- Tooltips and contextual explanations reduced customer confusion, minimizing the need for support calls.
Conclusion
The Interactive Invoice
The final solution transformed the invoice from a static, hard-to-read document into a dynamic, user-friendly experience. Key features included:
- Clear visual hierarchy for essential information (e.g., due date, amount due)
- Expandable sections for deeper insights.
- Tooltips & contextual help to explain complex financial terms
- Direct payment integration, allowing users to pay instantly
measurable impact (only for enterprise customers)
- Customer Support Calls dropped by 35% for invoice-related inquiries
- User satisfaction increased by 42%, as measured by post-interaction surveys.
- Adoption rates exceeded expectations, with a 70% opt-in rate within the first three months
Learnings
what worked well
- Cross-functional collaboration allowed us to balance business, regulatory, and user needs.
- User-centered design ensured the solution addressed real pain points.
- Iterative testing & feedback loops led to a polished, validated product.
Challenges & Solutions
- Stakeholder Alignment: Balancing diverse perspectives was challenging, but workshops provided a structured, inclusive process.
- Regulatory Constraints: We worked closely with compliance teams to ensure clarity without sacrificing legal requirements.