Reducing medical bill friction via clear design
I created an interface from the ground up, managed stakeholders, and reduced user friction.
Summary
Truffle health is an online health service platform that allows users to easily identify, track, and pay medical bills while providing explanations for every line item and service.
The Truffle Health plan was to have their application rebuilt from the ground up and required a fresh set of eyes. With no immediate positioning, the team specified that the direction could be uniquely expressed but needed a highly functional visual presentation while remaining consistently user centered.
Introduction
Design Roles
UI UX Designer
Deliverables
User Flows, Wireframes, Research Data, Design System, Hi-fi Mockup
Process
7 Months
Service descriptions must be easily communicated
Option to digitize paper communications
Invoices must be able to be paid via mobile app
Required Features
Analysis
After analyzing and finding it particularly hard to read, I made three observations:
-
Description of services is confusing
-
No explanation of billing
-
No easy way to pay remainders
To gather more information I identified several potential users and petitioned them for testing
Participant Task:
Please review the bill document and provide feedback on your initial thoughts.
Sarah Longfield - Staff Accountant
“I’m an accountant and I struggled to make heads or tails of the whole thing.”
George Fitzpatrick - Medical Billing
“It would save hours every week if bills were easier to read for anyone who doesn’t have experience with billing.”
Insights and Discovery
To gather more information I identified several potential users and petitioned them for testing
Participant Task:
Please review the bill document and provide feedback on your initial thoughts.
Sarah Longfield - Staff Accountant
“I’m an accountant and I struggled to make heads or tails of the whole thing.”
George Fitzpatrick - Billing and Registration
“It would save hours every week if bills were easier to read for anyone who doesn’t have experience with billing.”
User Persona
Name: John Smith
Location: Twin Falls, Idaho
Occupation: IT Technical Specialist
Insurance: Regence Health, employer
Primary Pain Point:
“These bills are so confusing, I thought I already paid. I need to be able to see everything more clearly.
To ensure the project remains user centered I developed a small persona based on the testing participants from the last section.
According to the data the user must to be able to:
Signup/Login
Upload Bill/Save Bill
Pay Bill
View Service Timeline
User Flows
The wireframes address the three main features. The user must be able to:
Upload a photo
Easily understand where each number comes from
Have the option to be able to pay the bill.
Paper Wireframe
Low-fi Wireframe
Redesigned Description screen to highlight where each bill came from, as well as dates for clarity.
Built timeline section for more visual hierarchy.
Solution:
Muddled
Wordy/Confusing
After testing this layout several issues were discovered:
Option B
Presented both options, ran a user test with the previous participants, option B tested unanimously.
Testing
Description screen is too muddled.
Timeline screen is too wordy and confusing.
Problems:
A
B
A
B
After testing several color combinations, feedback was received from the team that the blue and green options best fit the values of the company:
Used blue as the primary color, perceived as cool, calming, relaxing
Used green as a complimentary color for the icon board, very grounding and synergizes well with blue
Design System
After several color variations and renditions, the final High Fidelity mock up was delivered:
Brand colors are strong and complimentary
Layout is simple and effective
Information is easy to obtain
Hi-Fi Mockups
