Truffle Health
Introduction
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.
Required Features
-
Service descriptions must be easily communicated
-
Option to digitize paper communications
-
Invoices must be able to be paid via mobile app
Design Roles
Product Designer
Deliverables
User Flows, Wireframes, Research Data, Design System, Hi-fi Mockup
Process
13 Months
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
Insights/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.
Paper Wireframe
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.
Low-fi Wireframe
After testing this layout several issues were discovered:​
Problems:
-
Description screen is too muddled.
-
Timeline screen is too wordy and confusing.
Solution:
-
Redesigned Description screen to highlight where each bill came from, as well as dates for clarity.
-
Built timeline section for more visual hierarchy.
Testing
-
Presented both options, ran a user test with the previous participants, option B tested unanimously.
After testing several color combinations, feedback was received from the team that the blue and green options best fit the values of the company:
​
-
Blue functions as the primary color, perceived as cool, calming, relaxing.
​
-
Green functions as a complimentary color for the icon board, very grounding and synergizes well with blue.
