🇺🇸
An UX and UI challenge
Project Context:
Auba is a payment solution that simplifies the process of settling multiple invoices for companies. Our challenge was to create an intuitive platform that offered a seamless and efficient experience for users, allowing them to process payments more quickly and with fewer errors.
Objective:
Improve the user experience in processing multiple invoices by reducing the necessary time and errors committed.
User Research and Understanding
To better understand our users, we used a combination of interviews, surveys, and usage data analysis. We conducted 15 interviews with current and potential users, and collected responses from 50 online surveys.
​
User persona:​
Financial Manager
“I spend too much time correcting errors in invoice processing.”
Overview:
The Financial Manager is responsible for overseeing the financial operations within a company, with a key focus on processing invoices and managing payments efficiently.
Goals:
• Process invoices quickly and efficiently.
• Reduce payment errors to ensure smooth financial operations.
Frustrations:
• The current invoicing system is slow and error-prone, leading to inefficiencies.
• The system is difficult to use, which increases the time spent on correcting errors and managing payments.
Behavior:
• The Financial Manager relies heavily on the invoicing system for daily tasks.
• They need a reliable, user-friendly system that minimizes errors and maximizes efficiency.
Needs:
• A faster, more efficient invoicing system.
• A user-friendly interface that reduces the likelihood of errors.
• Tools and features that streamline the invoice processing workflow.
Impact:
An improved system would allow the Financial Manager to focus more on strategic financial management tasks rather than spending excessive time on correcting errors, ultimately contributing to better overall financial health for the company.
​
User Journey
We mapped the user journey, identifying pain points and opportunities for improvement at each stage of the process. We used this to inform our product design.
​
Navigation Flowchart:
We created detailed flowcharts highlighting the main steps and decisions made by the user, simplifying content hierarchy and navigation.
Iterative Process
The iterative process was crucial to ensure that the final design met user needs. Below is a more detailed view of the process:
​
1. Initial Sketches:
We gathered the team for brainstorming sessions, where we created initial paper sketches to explore different design ideas.
Preliminary Evaluation: We evaluated the sketches based on criteria such as simplicity, clarity, and alignment with user goals.
2. Low-Fidelity Wireframes:
Converting selected sketches into low-fidelity wireframes using tools like Balsamiq and Sketch.
Internal Feedback: We shared the wireframes with the internal team and collected initial feedback on structure and navigation flow.
3. Iteration:
Based on internal feedback, we made quick adjustments to the wireframes, refining the design and addressing any concerns.
Click-Through Testing: We created simple clickable prototypes to test basic navigation and identify preliminary usability issues using Maze.
4. High-Fidelity Prototypes:
We developed high-fidelity prototypes that incorporated detailed visual elements and complex interactions.
Feedback: We presented the prototypes to key stakeholders to obtain approval and feedback, ensuring all business needs were met.
Prototypes and Usability Testing​
Usability testing was crucial to validate our design and ensure it was intuitive and efficient. Details of our testing process:​
We chose 10 representative users from our target audience for each round of testing, ensuring a diversity of profiles.
​
• We developed realistic scenarios based on common tasks users would need to perform, such as selecting and processing multiple invoices.
​
• The team conducted remote tests, observing how users interacted with the prototypes.​ We documented usability issues found, such as navigation difficulties and confusion with specific terms.​ Once we get collected feedback to identify patterns and priority areas for improvement.
​
• We implemented changes in the prototypes based on the findings, such as simplifying menus and improving the clarity of instructions.
​​
UI Concepts
Payment Dash
This screen displays a comprehensive view of multiple invoices selected for payment.
Users can easily review, filter, and manage invoices, ensuring a streamlined payment process.
The intuitive interface allows users to confirm and process payments efficiently, reducing errors and saving time.
​
​It enables users to review selected invoices, see the total amount due, and proceed with the payment. The detailed payment information section provides transparency and clarity, enhancing the overall user experience.
Payment process
The multi-invoice payment flow, allowing users to review and select multiple invoices for payment. The interface provides a clear overview of selected invoices, total amounts, and payment details, ensuring a streamlined and efficient payment process.
Payment Details
This screen shows how the user can check the payment details beforehand and make sure everything is correct.
Personal payments
A personal payments function is also available. In other words, in addition to payments sent to company invoices, users can enter profiles for payments to self-employed service providers, for example.
Responsiveness
Mobile representation of selected invoice screens and the payment flow. The responsive design ensures a seamless user experience across all devices, allowing users to manage invoices and process payments efficiently on mobile platforms.
Results:
Reduced Processing Time
15 to 7 minutes
The average time to process invoices has been reduced from 15 to 7 minutes.
Decreased Error Rate
10% to 2%
The error rate was reduced from 10% to 2%.
Increased User Satisfaction
60% to 85%
User satisfaction increased from 60 per cent to 85 per cent.
Learnings and Conclusion
Communication was key: constant communication with stakeholders was crucial to the project’s success. Rapidly iterating based on user feedback helped refine the design and improve usability. Additionally, deeply understanding user needs and frustrations ensured the final product was well-received.
Â
Business Impact:
The new interface not only improved user satisfaction but also increased the company’s operational efficiency, resulting in significant time savings and reduced costs associated with processing errors.
Â
Next Steps:
• Continue improving the platform based on ongoing user feedback.
• Implement monitoring metrics to ensure the user experience continues to be optimized.
