Make the invoicing section easier to scan, improve understanding of payment states, and optimize layout for screens < 1280px.
[01]
Problem
At the beginning of the project, the team decided to optimize the application only for 1920×1080 resolution. This allowed us to move faster and release features without spending time adapting each module to multiple screen sizes.
However, once doctors started using the product in real environments, it became clear that many of them worked on laptops with smaller resolutions.
The previous invoicing section was dense and hard to read:
Patient names and invoice codes were truncated with ellipsis on small screens.
Limited spacing created visual noise and increased cognitive load.
This led to slower reviews and frustration, especially for doctors who manage multiple consultations per day.
What had been an intentional shortcut for speed at the start turned into a usability challenge that we needed to address, making legibility and clarity on smaller screens a design priority.
[02]
Research
I spent the first days reviewing the existing flows and analyzing the usage context. I confirmed that over 50% of consultations were accessed on laptops with ≤1280px resolution, which validated that space constraints were a real usability issue. I also noticed that users typically opened multiple consultations in a row, which reinforced the need for a scannable, compact overview rather than a cluttered table.
The key insight was simple but powerful: users didn’t need all the codes and details upfront, they just needed a clear, quick signal of each payment status. This insight became the foundation for the redesign.
[03]
Ideation & Process
I explored several layout approaches in Figma, from redesigned tables to vertical card layouts. The solution that struck the right balance was a collapsible section that showed only the essentials in its header:
The invoice ID
The first code, plus a “+” tag if additional codes exist
Payer type icons (patient, insurer, hospital…)
A small color bullet above each icon representing the payment state
This new approach allowed users to confirm the global payment status in one glance, without expanding the section. When expanded, the section revealed a clean table listing each debtor, their status, and the total amount owed.
I went through two rounds of reviews with the Product Managers, fine-tuning spacing, typography, and interactions to ensure the solution was both clear and consistent with the rest of the application.
[04]
Final Solution
The end result was a cleaner, more functional interface:
The collapsed view lets users quickly scan multiple consultations
Color bullets and payer icons communicate status instantly
The expanded view provides more room for names and codes, eliminating truncated text
Action buttons (edit, cancel, delete) are easy to access but unobtrusive
[05]
Impact & Results
After releasing the redesign, we monitored user behavior and collected feedback through Product Managers and internal QA sessions. The results were clear:
Review time per consultation decreased by approximately 15%, as doctors and administrative staff were able to confirm payment statuses without expanding every section.
Payment status errors dropped, thanks to the improved visual hierarchy and clearer state indicators.
The number of support tickets related to invoicing issues decreased by around 10% in the weeks following the rollout.
These improvements confirmed that the new design made the invoicing section more efficient, scannable, and user-friendly, directly impacting the daily workflow of the medical teams.
-15%
Review time
-10%
Support tickets