Bill Pay

Multiple legacy systems

In the rapidly evolving financial technology landscape, our company faced a pressing issue: multiple outdated payment products were causing friction for both users and internal teams. Each product had its own interface, workflow, and user experience, leading to confusion, inefficiencies, and a fragmented user journey. Patients struggled with inconsistent features, clunky interfaces, and a lack of integration, while healthcare providers and our internal support teams were overwhelmed with redundant queries and troubleshooting.

A single, modern alternative

Recognizing the urgent need for modernization, my team set out to design a single, consolidated payments product that would seamlessly integrate the functionalities of the old systems. The goal was ambitious: create a user-friendly, intuitive interface that would not only meet the diverse needs of our users but also streamline operations and reduce the burden on providers and our support teams.

End-to-end design process

Over the course of six months, I:

• Completed a competitive analysis to understand how other companies handle online payments
• Launched user surveys to further understand our patient's payment preferences
• Conducted user interviews to probe further into my findings so far
• Developed personas to communicate themes from research
• Facilitated workshops with the cross functional team to help us align on the business problem
• Mocked up and tested low- and mid-fidelity prototypes
• Revised mockups numerous times based on feedback
• Handed off final designs for the MVP design

For a more comprehensive explanation of each activity, check out my blog: From Insights to Interface

Core improvements

We overhauled several key aspects of the payment process, resulting in:

1. Intuitive navigation: Designed a clean and simple interface with clear labels and easy-to-follow steps
2. Single payment portal: Consolidated the two systems into one seamless portal, reducing complexity
3. Clear instructions: Provided concise and clear instructions at each step of the payment process
4. Responsive design: Ensured the solution was fully responsive, allowing patients to make payments on any device.
5. Security features: Integrated robust security features to protect patient information and build trust

Promising beginnings

After launching the new payment product through a beta program with 15 clients, we observed:

• Increased collection rates: Patients made 37% more payments to their healthcare providers using our new service compared to previous tools
• Increased patient satisfaction: User satisfaction scores improved by 60%, with patients reporting a much easier payment experience
• Reduced payment processing time: The time required to complete a payment decreased by 36%, benefiting both patients and office staff

Next steps

• Ongoing feedback: Continue to gather feedback from patients as we move out of beta testing to identify areas for further improvement
• Scalability: Ensure the solution can scale to accommodate future growth and additional functionality

What I learned

One of the key lessons from project was the critical importance of clear communication between design and development teams. During the implementation phase, we encountered a slight miscommunication: the developers opted to use a pre-built React library for the UI components, which did not align with the visual language of the design I had handed over. This decision resulted in a slightly disjointed user experience that deviated from our initial cohesive and polished look.

In hindsight, this highlighted the necessity for detailed design documentation and regular check-ins throughout the development process. It also underscored the value of fostering an environment where both designers and developers feel empowered to raise concerns and collaborate closely to ensure the final product faithfully adheres to the original design vision.