DaVita Kidney Care’s diverse suite of software solutions for Physicians all have one thing in common: to make the lives of Nephrologists and their supporting staff easier while still meeting regional regulations.
I was tasked with redesigning the Invoice & Attestation software—which was created to get Physicians and Medical Directors paid faster while ensuring that they sign off on all of their monthly duties as stated by local law.
Since the design changes would mainly consist of minor workflow tweaks, I need to gain a thorough understanding of the legacy systems and what could and could not be accomplished.
After a thorough understanding of DaVita’s back-end limitations, I focused in on the area where UX and UI overlap and how both could be utilized to draw the user’s attention to what they needed most since Nephrologists and Physicians in general keep a very busy schedule, find themselves on-the-go, and experience decision fatigue regularly.
I spent an ample amount of time with the product owner who also led the QA team. Having someone that has been in and around a software product for a while and knows the back-end/legacy systems like the back of their hand is a UX designer’s best friend.
Understanding the complex system of user roles and how legal requirements can change for each of them depending on their primary modality can get complex fast. Getting everything nailed down in the beginning is key.
UX v. UI
Throughout any case study, I like to show images of the evolution of a design when permitted. In this particular case, I’d like to focus on the finer aspects of spacing, text size and color to effectively draw the user’s attention to what they need—this area is where UX and UI overlap.
The example above can be clearly read, especially the left side of the card. However, once you look deeper, the groupings on the right are not as clear as they could be. Since most Physicians quickly scan their invoices while on-the-go, grouping becomes incredibly important.
A status indication is always important, but in this case, it’s not entirely necessary that it is the focal point in the center of all of the information; the status is very much secondary or even tertiary. With that in mind, let’s take a look at the second iteration:
Splitting the items vertically was easier to read and it separated the two main actions: answering state-required attestation questions and accepting or disputing an invoice. With the vertical separation, the user was also more likely to be able to separate the two tasks visually.
The final element that came into play was the status indicator that is in faint grey text—the reason behind this is so that Physicians and Medical Directors (who are notoriously short on time) would be able to quickly scan an entire list of “cards” to view which tasks they’d already signed off on (completed both their invoice and attestation actions), and which tasks were yet to be completed; missing an invoice would mean that payment arrives slower, and no working person wants that.
Let’s take a look at how the use of universal colors can make a full list quickly scannable:
Once the status indication bar was added, it allowed the user to quickly scan and recognize:
Grey = action needs to be taken or task is “incomplete”
Green = task was completed/accepted
Red = an invoice was addressed but was disputed rather than accepted
In the even that a first-time user didn’t understand the universal color-scheme of the status indication bars, the non-clickable status indication text was underneath both the Attestation and Invoice action buttons to keep the user informed if they wanted to look deeper on a status without having to drill deeper.
Further grouping also helped the user to expedite the user’s process. Moving the action button and non-clickable status text to the very right side of the card with plenty of white space allowed Physicians to quickly scan and sign off on a potentially long list of cards.