Project Overview
ClaimExchange.io (CEIO) is GTG's new provider-facing portal — purpose-built to replace the provider workflows currently handled by Bravo (Health.HelloCGI.com) and realize the GTG CEO's vision of a two-sided marketplace for claims clearinghouse services. By building a modern, scalable provider portal, GTG positioned itself to expand beyond its primary client relationship and offer white-labeled clearinghouse services to other organizations — connecting providers and payers on both sides of the claims ecosystem.
This engagement was a ground-up UX and product design initiative. Starting with no established design system and an early-stage legacy interface, I led the comprehensive redesign of 100+ screens across every major feature area — from login and authentication through claims submission, remittance, patient management, and user administration.
The redesigned portal needed to handle significant complexity: multiple provider organizations, multiple insurance payers, role-based permission structures, and a claims lifecycle spanning 20+ distinct states from submission through payment.
Project Scope
To maintain alignment across the development team and stakeholders throughout an 8-week sprint, I created and maintained a comprehensive scope of work document that served as the single source of truth for every feature area — color-coded by current scope, future scope, and research topics.
My Role
This engagement was a collaborative effort between product strategy and frontend development. I worked directly with a colleague on the frontend team on a weekly cadence — providing design support so they were never a bottleneck for the broader engineering team. My focus was on translating product requirements into design-ready specifications, exploring UI patterns, and ensuring design and development stayed aligned throughout delivery.
Scope Definition
Created the comprehensive scope of work document directly from the platform feature audit I had completed when first joining GTG — mapping every existing Bravo feature one-to-one into CEIO to establish the MVP scope. Future feature enhancements identified in the scope document came from GTG's CEO, and were color-coded separately to distinguish current scope from the longer-term product vision.
Design System Transition
The team initially worked with a different design system before discovering how efficiently DaisyUI and Tailwind CSS could accelerate development. I supported the transition to DaisyUI, helping a colleague on the frontend team convert components from the original system while layering custom components on top for healthcare-specific interactions — claim status states, permission indicators, and data display patterns unique to the portal.
UX Research & Design Exploration
Researched alternatives to the existing Bravo wizard-based webform for claims submission — leveraging Claude AI to explore layout options and evaluate approaches. Built interactive HTML/DaisyUI prototypes to rapidly test claims submission layouts and user management patterns before committing to Figma. Applied the same research-first approach to user management flows. Designed 100+ screens across all feature areas, with Figma Make prototypes documenting key interaction patterns.
Developer Handoff & QA
Created detailed Linear tickets that embedded screen recordings of existing Bravo flows, linked the relevant business process flow diagrams, and included Figma Make videos of the new designs — giving developers everything they needed in one place for async implementation. Conducted QA review of the built application, documented bugs and improvement opportunities, and provided copy review across all portal surfaces.
Feature Area Design
The redesign covered every major surface of the portal. Each feature area required its own user flow mapping, component design, and permission-aware layout — with consistent navigation patterns across all contexts.
Full redesign of provider registration, email invitation flows, email verification, password reset, MFA implementation, and login troubleshooting. Documented with Figma Make interaction videos for async developer review.
Webform submission workflows across all four service lines with side-by-side form and claim preview layouts. File upload via Dropbox integration. Pre-adjudicated claim triage with warning and failure identification. Recent claims dashboard with 8 filter states.
Payment tracking, remittance detail pages, recent activity monitoring, and downloadable statements (PDF and CSV). Designed explanation of provider payment page with appeal and 835 EDI download options as future scope.
Patient search by certification or account number, eligibility and benefits verification, patient summary and claim history views, and overseas referral letter management. Future scope includes patient forms and preauthorizations.
Role-based user management supporting multi-provider access — add, edit, delete users, manage permissions, invite new users via email, and add users across multiple provider organizations. Designed interaction videos for developer handoff.
Complete navigation architecture redesign — permission-aware side nav with collapsible sections, folder-based organization for multiple payees, breadcrumb navigation with provider/payer dropdown selectors. Contact support integration with Linear ticket creation and CKC article linking.
Key Design Decisions
Navigation Architecture
The most technically complex design challenge was the navigation system. Providers often work with multiple insurance payers and may belong to multiple provider organizations — requiring a nav that could handle context switching without losing state. I designed a permission-based side nav with collapsible sections, folder-based payee organization with count indicators, and a breadcrumb system with dropdown selectors for quick provider/payer switching.
Design System — DaisyUI + Custom Components
The team initially worked with a different design system before recognizing that DaisyUI and Tailwind CSS would be significantly more efficient for the development workflow. I supported Ben in transitioning from the original system to DaisyUI, establishing custom color tokens for healthcare-specific states — claim validation, processing, queued, submitting, and completed — and creating custom components where DaisyUI's defaults didn't meet the portal's clinical requirements, including removing default rounded corners throughout for a more professional feel.
Claims Lifecycle Visualization
I developed a comprehensive process flow diagram mapping the entire claims journey — from creation through batch submission validation, CEIO claims management, PH adjudication, and payment processing. The flow documents 20+ distinct claim states and became the reference document for both design decisions and developer ticket creation.
Async Documentation Strategy
Working within a lean, distributed team where real-time reviews weren't always possible, I developed a self-contained ticket approach for developer handoff. Each Linear ticket included screen recordings of the existing Bravo flows for context, links to the relevant business process flow diagrams, and embedded Figma Make videos of the new CEIO designs — so developers had everything they needed to implement without requiring a synchronous meeting.
Challenges
Healthcare providers frequently work with multiple insurance payers and may administer multiple provider organizations simultaneously. Designing navigation that allowed seamless context switching without data loss or confusion required multiple design iterations. The solution involved folder-based side nav organization, count badges for payee folders, and dropdown selectors embedded in breadcrumbs — allowing users to switch contexts in one interaction rather than navigating back through menus.
Introducing context-aware floating action buttons on key pages (dashboard, claims) to reduce click depth for primary actions proved more complex than anticipated — particularly on the claims page where the FAB conflicted with the data table layout and scrolling behavior. This required close collaboration with engineering to resolve z-index and scroll state conflicts before the pattern could be applied consistently.
With 100+ screens across six feature areas, maintaining clear scope boundaries was critical. I color-coded the scope document throughout — black for current scope, green for complete, pink for future scope, teal for research topics — which gave the entire team at-a-glance project status and prevented scope creep from derailing sprint timelines.
With development happening across different timelines and team members, real-time design reviews weren't always possible. I created Figma Make videos demonstrating key interaction patterns, wrote Linear tickets with comprehensive before/after comparisons, and maintained detailed scope documentation — enabling any team member to understand design intent and implementation requirements without requiring a synchronous meeting.
