

Financial Health, by Sirono
Designed for: Sirono LLC
Sirono aims to improve the financial experience for medical companies. "The idea is that any Contact Center Agent who speaks with a patient will have the information and tools to be able to have a discussion about the financial obligations. Essentially, any Contact Center agent becomes a collector." As is often the case, time was not on our side. I joined the project two months before we needed an interactive prototype for clients.

Financial Health
With such a short time frame it was important to build on what we already knew. Our users are calling patients and collecting payment info over the line. They didn't have the ability to view a lot of information. It had to be a quick, fluid process from start to finish.
For this project I chose Figma. On a short production timeline it was important to get feedback from shareholders as quickly as possible. We had the user flow already; the design of the app just had to match their experience within Salesforce.
Testing methods
Due to timeline limitations and, in later iterations, the COVID-19 situation, live user testing with each iteration could not be done.
Each version, including seemingly minor design changes, was shared with our team and stakeholders. I valued their opinion of my design decisions. Even if I couldn't test with users I could get valuable feedback from team members with a wide array of experiences of their own. I sought feedback at every stage of the process from as many eyes as I could get; good design is iterative and collaborative.
User flow and wireframes
We had a well defined user flow. A simple version, explained in this diagram:
The user is performing their normal call duties with the patient.
They can see our app to check the patient's financial standing.
If the patient was consistently paying their bills no action was required; if they were not they could access more information and eventually take a payment from the patient.
But for now this app inside the Salesforce page was our MVP. Our focus was getting this app properly built to get info on the patient and begin the longer process of taking payments.


The devil's in the details
With the overall structure in place we had to focus on those elements that would support it.
The top row features up to seven icons while the top-right corner has a banner that displays the patient's overall financial status. These are designed to quickly alert the call center worker to the patient's status. If I'm scheduling an appointment with a patient, it may also interest me to see a big red badge on my screen, telling me I should go over billing.
The seven icons on the top row give quick bits of easily digestible info. Is the patient a large donor/VIP for the medical center? Do they have outstanding debt? Are we missing info?
These sprites pushed us to pivot several times. We tried them on the bottom. We tried different iconography. We tried showing the descriptions without an on-hover. In the end we stuck with this version as it best served our users' needs. Keeping it up top lets the user start with the quick bits of important info. Rather than using descriptions in small type we let the color do the talking; green, yellow, and red are a color pattern users recognize for positive, neutral, and negative.
We poured over these details many times. Arrows or triangles? Hamburger menu or boxes? 'Take Payment' row or button? In such a rapid process teamwork drove us on many decisions; open discussion brought logic, logic guided design decisions. But the caller wouldn't stop here.
