Mars Veterinary Health
Eliminating friction in the wallet management flow for Mars Veterinary Health's SaaS platform, cutting average task time by 78%.
Year:
2023-25
Industry:
Healthcare
Role:
UI/UX Designer
Duration:
3 weeks
The Challenge
Mars Veterinary Health (MVH) operates a global network of partner hospitals. Their internal SaaS platform supports clinic staff in day-to-day operations. The product had been fast-tracked into production to meet business deadlines, leaving significant design and technical debt across multiple domains.
VETERINARY HOSPITAL STAFF WERE BLOCKED FROM DAILY FINANCIAL TASKS
The existing payment settings screen showed a remove icon on each saved card. But for the primary card, that icon was disabled with no explanation. A green checkmark indicated primary status, but nothing labelled it as such.
This resulted in only 20% of users correctly identify their default card in the existing interface, and clients who needed to remove their primary card hit a wall.
The Research
UNDERSTANDING REAL PAIN POINTS BEFORE TOUCHING DESIGNS
Before any design work began, I immersed myself in how hospital staff actually used the payment management flow. I chose three methods that would give me both qualitative depth and competitive context.
USABILITY TESTING EXPOSED A 20% SUCCESS RATE ON THE CORE TASKS
I ran a moderated usability study with 5 participants, asking each to remove their primary payment card. The task should have taken under a minute. Instead it averaged nearly five.
4m 38s
Avg. Time on Task
20%
Task Success Rate
60%
Drop-off Rate
🔒 Disabled state, no feedback
The remove icon was visible but non-functional. Users tapped it repeatedly with no response — no tooltip, no error, no guidance.
😵💫 No path to workaround
Users had no way of knowing they could set a different card as primary. The testing indicated that users relied on independently reasoning this out.
✅ Green check ≠ "Primary"
The primary card indicator relied on a green checkmark with no label. Only 1 of 5 participants correctly identified it without guessing.
📞 Support escalation risk
3 of 5 participants either gave up entirely or expressed intent to contact support, a costly outcome for a self-serve flow.
🔒 Disabled state, no feedback
The remove icon was visible but non-functional. Users tapped it repeatedly with no response — no tooltip, no error, no guidance.
😵💫 No path to workaround
Users had no way of knowing they could set a different card as primary. The testing indicated that users relied on independently reasoning this out.
✅ Green check ≠ "Primary"
The primary card indicator relied on a green checkmark with no label. Only 1 of 5 participants correctly identified it without guessing.
📞 Support escalation risk
3 of 5 participants either gave up entirely or expressed intent to contact support, a costly outcome for a self-serve flow.
🔒 Disabled state, no feedback
The remove icon was visible but non-functional. Users tapped it repeatedly with no response — no tooltip, no error, no guidance.
😵💫 No path to workaround
Users had no way of knowing they could set a different card as primary. The testing indicated that users relied on independently reasoning this out.
✅ Green check ≠ "Primary"
The primary card indicator relied on a green checkmark with no label. Only 1 of 5 participants correctly identified it without guessing.
📞 Support escalation risk
3 of 5 participants either gave up entirely or expressed intent to contact support, a costly outcome for a self-serve flow.
The Process
WHO ARE WE ACTUALLY DESIGNING FOR?
I identified four user personas: Junior CSR, Senior CSR, Veterinary Technician, and Doctor of Veterinary Medicine. Through analysis of the interview findings, both CSR roles emerged as the primary users.
They owned the payment management workflow day-to-day and bore the most friction from the current UI. This scoping decision shaped every design choice that followed.
I made a deliberate decision to skip traditional wireframing and move directly into lo-fi layout explorations. Since we were redesigning an existing structure (not building from scratch), abstract wireframes would have been immediately discarded. Tight feedback loops with the Finance and Design teams allowed us to converge on direction quickly.
Iterations Prior to Feedback
After the Finance team evaluated the layout variations for the Manage Wallet side sheet. We selected the most compact variants because larger options introduced unnecessary negative space without adding functional value. In addition, most clients held 1–3 cards at most, justifying the decision to proceed with the smaller side sheets.
Prior to shipping, I verified my approach with the Design team to ensure accessibility standards and design system alignment. Valuable feedback was given and minor visual tweaks were made before shipping the final design.
The Solution
The Shipped Design Solution
1. Confirmation Dialogue for Card Removal
Unlike the previous implementation, the redesign allows direct removal of a primary card. A confirmation dialogue, stating the consequence, handles the safety concern without blocking the user entirely. Participant feedback confirmed this felt reassuring rather than obstructive.
2. Explicit "Primary" Label
The green checkmark was removed in favor of a "Primary" label. This single change eliminated the identification failure seen in 1 of 5 participants. All participants in testing identified the card immediately without hesitation.
1. Confirmation Dialogue for Card Removal
Unlike the previous implementation, the redesign allows direct removal of a primary card. A confirmation dialogue, stating the consequence, handles the safety concern without blocking the user entirely. Participant feedback confirmed this felt reassuring rather than obstructive.
The high-fidelity prototype covered all use cases, demonstrated element interactivity, and was handed off to engineering through Figma's Dev Mode. I stayed closely involved through implementation to ensure the final build matched the approved designs.
The Impact
The Numbers Told a Clear Story
Post implementation, I retested the user flows with the same 5 participants, having every metric moved in the right direction.
1m 2s
Avg. Time on Task
↓ 78% vs before
100%
Task Success Rate
↑ 80pp vs before
0%
Drop-off Rate
↓ 60pp vs before
The Reflection
What I'd do Differently
This project taught me valuable insights into payment UX while also highlighting the relationship between timeline pressure and maintaining research integrity.
More Projects
Mars Veterinary Health
Eliminating friction in the wallet management flow for Mars Veterinary Health's SaaS platform, cutting average task time by 78%.
Year:
2023-25
Industry:
Healthcare
Role:
UI/UX Designer
Duration:
3 weeks
The Challenge
Mars Veterinary Health (MVH) operates a global network of partner hospitals. Their internal SaaS platform supports clinic staff in day-to-day operations. The product had been fast-tracked into production to meet business deadlines, leaving significant design and technical debt across multiple domains.
VETERINARY HOSPITAL STAFF WERE BLOCKED FROM DAILY FINANCIAL TASKS
The existing payment settings screen showed a remove icon on each saved card. But for the primary card, that icon was disabled with no explanation. A green checkmark indicated primary status, but nothing labelled it as such.
This resulted in only 20% of users correctly identify their default card in the existing interface, and clients who needed to remove their primary card hit a wall.
The Research
UNDERSTANDING REAL PAIN POINTS BEFORE TOUCHING DESIGNS
Before any design work began, I immersed myself in how hospital staff actually used the payment management flow. I chose three methods that would give me both qualitative depth and competitive context.
USABILITY TESTING EXPOSED A 20% SUCCESS RATE ON THE CORE TASKS
I ran a moderated usability study with 5 participants, asking each to remove their primary payment card. The task should have taken under a minute. Instead it averaged nearly five.
4m 38s
Avg. Time on Task
20%
Task Success Rate
60%
Drop-off Rate
🔒 Disabled state, no feedback
The remove icon was visible but non-functional. Users tapped it repeatedly with no response — no tooltip, no error, no guidance.
😵💫 No path to workaround
Users had no way of knowing they could set a different card as primary. The testing indicated that users relied on independently reasoning this out.
✅ Green check ≠ "Primary"
The primary card indicator relied on a green checkmark with no label. Only 1 of 5 participants correctly identified it without guessing.
📞 Support escalation risk
3 of 5 participants either gave up entirely or expressed intent to contact support, a costly outcome for a self-serve flow.
🔒 Disabled state, no feedback
The remove icon was visible but non-functional. Users tapped it repeatedly with no response — no tooltip, no error, no guidance.
😵💫 No path to workaround
Users had no way of knowing they could set a different card as primary. The testing indicated that users relied on independently reasoning this out.
✅ Green check ≠ "Primary"
The primary card indicator relied on a green checkmark with no label. Only 1 of 5 participants correctly identified it without guessing.
📞 Support escalation risk
3 of 5 participants either gave up entirely or expressed intent to contact support, a costly outcome for a self-serve flow.
🔒 Disabled state, no feedback
The remove icon was visible but non-functional. Users tapped it repeatedly with no response — no tooltip, no error, no guidance.
😵💫 No path to workaround
Users had no way of knowing they could set a different card as primary. The testing indicated that users relied on independently reasoning this out.
✅ Green check ≠ "Primary"
The primary card indicator relied on a green checkmark with no label. Only 1 of 5 participants correctly identified it without guessing.
📞 Support escalation risk
3 of 5 participants either gave up entirely or expressed intent to contact support, a costly outcome for a self-serve flow.
The Process
WHO ARE WE ACTUALLY DESIGNING FOR?
I identified four user personas: Junior CSR, Senior CSR, Veterinary Technician, and Doctor of Veterinary Medicine. Through analysis of the interview findings, both CSR roles emerged as the primary users.
They owned the payment management workflow day-to-day and bore the most friction from the current UI. This scoping decision shaped every design choice that followed.
I made a deliberate decision to skip traditional wireframing and move directly into lo-fi layout explorations. Since we were redesigning an existing structure (not building from scratch), abstract wireframes would have been immediately discarded. Tight feedback loops with the Finance and Design teams allowed us to converge on direction quickly.
Iterations Prior to Feedback
After the Finance team evaluated the layout variations for the Manage Wallet side sheet. We selected the most compact variants because larger options introduced unnecessary negative space without adding functional value. In addition, most clients held 1–3 cards at most, justifying the decision to proceed with the smaller side sheets.
Prior to shipping, I verified my approach with the Design team to ensure accessibility standards and design system alignment. Valuable feedback was given and minor visual tweaks were made before shipping the final design.
The Solution
The Shipped Design Solution
1. Confirmation Dialogue for Card Removal
Unlike the previous implementation, the redesign allows direct removal of a primary card. A confirmation dialogue, stating the consequence, handles the safety concern without blocking the user entirely. Participant feedback confirmed this felt reassuring rather than obstructive.
2. Explicit "Primary" Label
The green checkmark was removed in favor of a "Primary" label. This single change eliminated the identification failure seen in 1 of 5 participants. All participants in testing identified the card immediately without hesitation.
1. Confirmation Dialogue for Card Removal
Unlike the previous implementation, the redesign allows direct removal of a primary card. A confirmation dialogue, stating the consequence, handles the safety concern without blocking the user entirely. Participant feedback confirmed this felt reassuring rather than obstructive.
The high-fidelity prototype covered all use cases, demonstrated element interactivity, and was handed off to engineering through Figma's Dev Mode. I stayed closely involved through implementation to ensure the final build matched the approved designs.
The Impact
The Numbers Told a Clear Story
Post implementation, I retested the user flows with the same 5 participants, having every metric moved in the right direction.
1m 2s
Avg. Time on Task
↓ 78% vs before
100%
Task Success Rate
↑ 80pp vs before
0%
Drop-off Rate
↓ 60pp vs before
The Reflection
What I'd do Differently
This project taught me valuable insights into payment UX while also highlighting the relationship between timeline pressure and maintaining research integrity.
More Projects
Mars Veterinary Health
Eliminating friction in the wallet management flow for Mars Veterinary Health's SaaS platform, cutting average task time by 78%.
Year:
2023-25
Industry:
Healthcare
Role:
UI/UX Designer
Duration:
3 weeks
The Challenge
Mars Veterinary Health (MVH) operates a global network of partner hospitals. Their internal SaaS platform supports clinic staff in day-to-day operations. The product had been fast-tracked into production to meet business deadlines, leaving significant design and technical debt across multiple domains.
VETERINARY HOSPITAL STAFF WERE BLOCKED FROM DAILY FINANCIAL TASKS
The existing payment settings screen showed a remove icon on each saved card. But for the primary card, that icon was disabled with no explanation. A green checkmark indicated primary status, but nothing labelled it as such.
This resulted in only 20% of users correctly identify their default card in the existing interface, and clients who needed to remove their primary card hit a wall.
The Research
UNDERSTANDING REAL PAIN POINTS BEFORE TOUCHING DESIGNS
Before any design work began, I immersed myself in how hospital staff actually used the payment management flow. I chose three methods that would give me both qualitative depth and competitive context.
USABILITY TESTING EXPOSED A 20% SUCCESS RATE ON THE CORE TASKS
I ran a moderated usability study with 5 participants, asking each to remove their primary payment card. The task should have taken under a minute. Instead it averaged nearly five.
4m 38s
Avg. Time on Task
20%
Task Success Rate
60%
Drop-off Rate
🔒 Disabled state, no feedback
The remove icon was visible but non-functional. Users tapped it repeatedly with no response — no tooltip, no error, no guidance.
😵💫 No path to workaround
Users had no way of knowing they could set a different card as primary. The testing indicated that users relied on independently reasoning this out.
✅ Green check ≠ "Primary"
The primary card indicator relied on a green checkmark with no label. Only 1 of 5 participants correctly identified it without guessing.
📞 Support escalation risk
3 of 5 participants either gave up entirely or expressed intent to contact support, a costly outcome for a self-serve flow.
🔒 Disabled state, no feedback
The remove icon was visible but non-functional. Users tapped it repeatedly with no response — no tooltip, no error, no guidance.
😵💫 No path to workaround
Users had no way of knowing they could set a different card as primary. The testing indicated that users relied on independently reasoning this out.
✅ Green check ≠ "Primary"
The primary card indicator relied on a green checkmark with no label. Only 1 of 5 participants correctly identified it without guessing.
📞 Support escalation risk
3 of 5 participants either gave up entirely or expressed intent to contact support, a costly outcome for a self-serve flow.
🔒 Disabled state, no feedback
The remove icon was visible but non-functional. Users tapped it repeatedly with no response — no tooltip, no error, no guidance.
😵💫 No path to workaround
Users had no way of knowing they could set a different card as primary. The testing indicated that users relied on independently reasoning this out.
✅ Green check ≠ "Primary"
The primary card indicator relied on a green checkmark with no label. Only 1 of 5 participants correctly identified it without guessing.
📞 Support escalation risk
3 of 5 participants either gave up entirely or expressed intent to contact support, a costly outcome for a self-serve flow.
The Process
WHO ARE WE ACTUALLY DESIGNING FOR?
I identified four user personas: Junior CSR, Senior CSR, Veterinary Technician, and Doctor of Veterinary Medicine. Through analysis of the interview findings, both CSR roles emerged as the primary users.
They owned the payment management workflow day-to-day and bore the most friction from the current UI. This scoping decision shaped every design choice that followed.
I made a deliberate decision to skip traditional wireframing and move directly into lo-fi layout explorations. Since we were redesigning an existing structure (not building from scratch), abstract wireframes would have been immediately discarded. Tight feedback loops with the Finance and Design teams allowed us to converge on direction quickly.
Iterations Prior to Feedback
After the Finance team evaluated the layout variations for the Manage Wallet side sheet. We selected the most compact variants because larger options introduced unnecessary negative space without adding functional value. In addition, most clients held 1–3 cards at most, justifying the decision to proceed with the smaller side sheets.
Prior to shipping, I verified my approach with the Design team to ensure accessibility standards and design system alignment. Valuable feedback was given and minor visual tweaks were made before shipping the final design.
The Solution
The Shipped Design Solution
1. Confirmation Dialogue for Card Removal
Unlike the previous implementation, the redesign allows direct removal of a primary card. A confirmation dialogue, stating the consequence, handles the safety concern without blocking the user entirely. Participant feedback confirmed this felt reassuring rather than obstructive.
2. Explicit "Primary" Label
The green checkmark was removed in favor of a "Primary" label. This single change eliminated the identification failure seen in 1 of 5 participants. All participants in testing identified the card immediately without hesitation.
1. Confirmation Dialogue for Card Removal
Unlike the previous implementation, the redesign allows direct removal of a primary card. A confirmation dialogue, stating the consequence, handles the safety concern without blocking the user entirely. Participant feedback confirmed this felt reassuring rather than obstructive.
The high-fidelity prototype covered all use cases, demonstrated element interactivity, and was handed off to engineering through Figma's Dev Mode. I stayed closely involved through implementation to ensure the final build matched the approved designs.
The Impact
The Numbers Told a Clear Story
Post implementation, I retested the user flows with the same 5 participants, having every metric moved in the right direction.
1m 2s
Avg. Time on Task
↓ 78% vs before
100%
Task Success Rate
↑ 80pp vs before
0%
Drop-off Rate
↓ 60pp vs before
The Reflection
What I'd do Differently
This project taught me valuable insights into payment UX while also highlighting the relationship between timeline pressure and maintaining research integrity.