Cevinio – Invoice Processing
Intro.
The invoice processing module at Cevinio is essential for reviewing and handling incoming invoices, where users must assess, correct, and approve exceptions like discrepancies or missing references. The original system provided minimal guidance: the interface was outdated, information was scattered across multiple screens, and users easily lost oversight, especially with invoices containing many line items.
To solve these issues, the module was completely redesigned with a focus on usability, clarity, and efficiency. Information is now presented centrally, interactions are more intuitive, and the approval process is significantly simplified. This resulted in faster processing, fewer errors, and better support for organizations’ financial processes.
Problem Statement.
Challenges for users
- Excessive scrolling led to loss of overview.
- Icons and actions were not always clear.
- Relevant information was hard to find.
- The interface looked outdated and was illogically structured.
- Different user roles had different information needs, but all received the same interface.
Goal for client
- Increase efficiency.
- Improve usability.
- Provide a modern, consistent UI.
Solution.
Grouping and structuring information
The invoice processing page was redesigned and divided into four clear blocks:
- Invoice header information (basic data, details, PO info, attachments, log).
- Invoice line items, grouped by line type.
- The invoice image itself.
- Actions, depending on user role.
Since different users have different information needs, I introduced four view modes. Each user can select the layout that best fits their workflow, for example, positioning the invoice left and data right, or vice versa. Users mainly handling invoice lines can view them in full screen width, ideal for invoices with dozens of line items.
This flexibility gave users more control and made workflows more efficient, allowing everyone to tailor the system to their preferences.
Smart tab navigation
There was too much information for a single screen, so header details were split into tabs (Invoice, Details, PO info, Attachments, Log).
Users reported that clicking between tabs took too many actions. In the new version, a scrollable tab system keeps the active tab visible as you scroll, maintaining context and overview.
Bulk actions for efficiency
AP agents sometimes had to edit multiple invoice lines, which was slow and error-prone. Bulk actions now allow users to select multiple lines and apply a cost center or approval in one step, saving time and reducing chances for mistakes.
Improved collaboration & feedback
Previously, users had to look up advice in the logs. In the new UI, advice is shown directly with clear icons. Invoices with advice requested or given have a distinct visual marker and extra information via tooltip, making collaboration faster and more transparent.
Result.
The renewed module was enthusiastically received by clients. While the project was recently completed and there are no quantitative numbers yet, initial feedback confirms a substantial improvement in user experience. Key outcomes:
- Less scrolling and improved overview.
- Flexible views by role and preference.
- More efficient invoice processing via bulk actions.
- Instant, clear feedback for approvals and advice.
Reflection.
This project highlighted the importance of breaking down complex processes into clear structures, always considering different user roles. Combining user tests with iterative design produced valuable insights: what seemed logical in theory often uncovered improvements in practice.
If I were to do this project again, I would involve end users even earlier, gathering feedback from the first wireframes onward. In future projects, I also want to focus more on quantitative measurements (such as saved minutes or fewer errors), to better demonstrate impact.