Simplifying Complex Financial Logic through Design Consistency and UI Audit

Role: Junior Product Designer

Focus: Systems Thinking, UI Audit & Consistency, Information Architecture, Technical Documentation.

Tools: Design Brief, UI Audit Table, Financial Logic Diagram, Updated Figma File/Handoff.

Company: Commure/Athelas (Healthcare SaaS)

Context:

The Patient Responsibility (PR) Explainability system is a critical HealthTech interface used by front-office staff to manage and explain patient financial balances. The system integrates complex financial data from multiple sources (EHR, Colossus, Insights). Our challenge was that complex terminology (like "locked credits") and visual inconsistencies led to high user confusion and a large volume of support tickets. The goal was to unify the UX patterns and simplify the display of financial logic, ensuring staff could confidently answer patients' questions about "why, how, and when" their charges occurred.

The Challenge

The Patient Responsibility (PR) Explainability interface was designed to help front-desk teams understand and explain patient balances. However, the existing implementation suffered from three major pain points:

Inconsistency

The UI lacked visual and behavioral consistency with the rest of the product, causing confusion and a disjointed user experience.

Complexity

The complex financial logic (integrating data from Colossus, EHR, and Insights) and concepts like "locked credits" often caused user confusion.

Lack of Confidence

Front-desk staff lacked the clarity needed to confidently explain "why, how, and when" charges and payments occurred to patients.

Primary Objective

Redesign the PR experience to make financial data clear, consistent, and explainable, ensuring front-desk teams can answer patient balance questions accurately.

Methodology: Design Audit and Unification

My contribution was defined by a detailed, four-phase Design Brief and Roadmap. This approach ensured a scalable redesign focused on consistency and clarity.

Phase

Goal

Key Deliverables

1. Understanding

2. UI Audit

3. Organization

4. Improvements

Define financial logic and scope.

Identify all design inconsistencies and patterns.

Structure the Figma file for handoff and long-term use.

Propose actionable UX/UI enhancements.

Context Summary, Financial Logic Diagram.

UI Audit Table, Component and Pattern List.

Organized Figma file, Annotated Handoff Guide.

Improvement Opportunities List, Annotated Mockups.

Key Design Contributions

Financial Logic Clarification: Created a Financial Logic Diagram (Phase 1) to map out how charges, credits, and payments interact, providing a clear foundation for the redesign and technical alignment with engineers.
UI Pattern Unification: Documented and proposed changes to visual and behavioral patterns (Phase 2) to achieve consistency across all PR-related apps.
Developer Handoff: Structured and annotated the Figma file (Phase 3) for clarity, ensuring a seamless and efficient handoff process for the engineering team.

Impact and Key Takeaways

Metric Improvement: The design was aimed at reducing confusion and support tickets related to unclear patient balances, and improving comprehension and efficiency for billing teams.
Key Learning (UX Maturity): This project demonstrated my ability to apply high-level UX maturity by taking ownership of the maintenance and scalability of an existing product, rather than just designing new features. I focused on establishing core consistency and design patterns for the long-term success of the product.
Professionalism: Delivering a detailed Design Brief and Roadmap proved my capability to manage a project independently and collaborate strategically with PMs and Engineering Leads.