Introduction
As a UI/UX designer at 3D Predict, I took on a project to upgrade the payment process within the doctor's portal. The main aim was to automate invoice generation and make payment easier for our clients. This case study will cover the problem, goals, design approach, and outcomes of the project.
The interactive prototype can be found at the end of this page.
Problem
The current doctor's portal does not automatically generate invoices, making doctors reach out to technical support for invoice generation. This manual process wasted time and caused inefficiencies. Also, the portal only allowed card payments, ignoring some doctors' preference for invoices. This lack of a smooth payment process affected the user experience and operational efficiency.
Goals
• Automate invoice generation upon aligner shipment.
• Allow invoice-based payments within the portal.
• Provide instant payment notifications and status updates.
• Make payment documents and receipts easily accessible.
• Improve the overall user experience and streamline the payment process.
• Automate invoice generation upon aligner shipment.
• Allow invoice-based payments within the portal.
• Provide instant payment notifications and status updates.
• Make payment documents and receipts easily accessible.
• Improve the overall user experience and streamline the payment process.
UI Design
I kept the design simple, focusing on clarity and ease of use. Following Apple's human interface design guidelines, I aimed for easy navigation and progressive disclosure. The color palette included white, black, and sky blue for a clean and attractive look.
I incorporated my programming knowledge into my design to make the UI functional and clear, with reusable components for easy development. The "My Payments" page had a simple layout, showcasing a drop-down filter for pending and paid cases, and the tables were designed using my SQL knowledge for efficient data management. I also designed the "Transaction History" page to offer easy access to payment documents and receipts.
UX: User Flow
I did user research to understand the doctor's preferences, shaping the user flow accordingly. A flowchart, made in Microsoft Visio, outlined the steps from the doctor's dashboard through invoice generation, payment confirmation, to the payment history.
Business Outcome
The revamped Doctor's Portal payment process tackled previous issues by making the payment process simpler for our clients.
By automating invoice generation and offering invoice-based payments, there is improved efficiency, and the process catered to clients' preferences.
The user-friendly UI, shaped by research and design principles, ensures a smooth payment experience, enhancing overall user satisfaction within the portal.
By automating invoice generation and offering invoice-based payments, there is improved efficiency, and the process catered to clients' preferences.
The user-friendly UI, shaped by research and design principles, ensures a smooth payment experience, enhancing overall user satisfaction within the portal.
View the Interactive Prototype below, preferably in fullscreen ; )
FIGMA PROTOTYPE LINK - https://www.figma.com/proto/MXOGMTHTB3dy8tLw8ROKxV/3D-Predict?type=design&node-id=0-1&viewport=-1146%2C718%2C0.08&t=tXj797pmiJf998S1-0&scaling=scale-down&starting-point-node-id=75%3A2
