Client project · Labor union benefits
Benefits Fund Member Portal & Online Payments
Put a union benefits fund's premium collection online: more than 3,500 members have paid over 4,500 premiums through the new portal since March 2026.
- Client
- Philadelphia Federation of Teachers Health & Welfare Fund
- Industry
- Labor union benefits
- Timeline
- Oct 2025 to present
- Year
- 2025
- Platforms
- Web
Results at a glance
The challenge
Baseline · slowest page, throttled mobile test7,285 msto show its main content
- More than 3,600 members needed to activate accounts and pay prescription, vision and COBRA premiums online, and each benefit bills on its own calendar: RX twice a year, vision yearly with proration, COBRA monthly with back-payments.
- Billing state was calculated on the fly, differently for each benefit, so the member's dashboard, the staff's unpaid list and the amount charged could drift apart.
- Member records, payments and uploaded documents are sensitive, and staff need different levels of access to them.
- The public site had to keep the old site's links working, and the slowest page took 7,285 ms to show its main content on a throttled mobile test.
- Payment windows and deadlines fall on calendar dates, so a time-zone mistake could open or close a window a day early for some members.
- Every billing change had to be proven against realistic data without touching real members or their payments.
About the project
Designed and built pfthw.org for the Philadelphia Federation of Teachers Health & Welfare Fund, which provides prescription, vision and COBRA continuation benefits to more than 3,600 union members. The public site explains each benefit, lists dental providers and publishes plan documents. Members activate an account, see each benefit's status and coverage dates, and pay premiums online by card or bank transfer through Stripe. Behind it, staff get an admin console with tiered roles, member and payment management, secure document uploads, targeted email blasts and an audit log. The billing engine stores every owed payment as a database row that scheduled jobs create and track, so the member's dashboard, the staff view and the charge always agree.
What we delivered
Scope
- Site rebuild
- Member portal
- Online payments (Stripe)
- Billing engine
- Admin console
- Secure document uploads
- Email blasts
- Accessibility & performance
What it does
Public site
Benefit pages for active employees and retirees, FAQs, a searchable list of more than 5,000 dental providers, downloadable plan documents and a contact form. 25 permanent redirects carry the old site's URLs to their new pages.
Member portal
Members activate their account from an emailed link. The dashboard shows each benefit's status, coverage dates and the next payment, with any late or lapsed state explained in plain words.
Online payments
Card or bank transfer (ACH) through Stripe Checkout, so card details never touch the fund's servers. A signed webhook records each payment against the premium the member owes.
A billing engine built on stored payments
Every owed payment is a row in the database, created by a nightly job when its payment window opens, with a fallback on dashboard load if the job missed it. Database indexes allow only one row per member per billing cycle, and a nightly job applies payment deadlines. Live for vision and COBRA, and switched on for RX in September 2026.
Secure document uploads
Staff send a member a private upload link, and members can also submit documents from the site. Each file is sent on its own, so a submission of up to 20 files is not stopped by the hosting platform's 4.5 MB request limit. Uploads go to private storage, staff approve them or request changes, and a daily job deletes documents the office no longer needs to keep. Staff have sent more than 1,100 requests to over 700 members since May 2026.
Admin console
Member and payment management, CSV imports, unpaid-payment lists, email blasts to targeted groups, and an audit log. 3 role tiers (viewer, editor, admin) enforced on the server, and row-level security in the database keeps members to their own records.
Tested against a real database
A dedicated test database with fixture members runs over 200 database tests and 64 browser tests on every pull request that changes code, and nightly. Date logic is unit-tested in 5 time zones.
Our approach
Built account activation by emailed link and a dashboard that shows each benefit's status, coverage dates and next payment, with payments by card or bank transfer through Stripe Checkout and a signed webhook that records each one.
Rebuilt billing so every owed payment is a stored row: a nightly job opens each payment window, a fallback on dashboard load covers a missed run, database indexes allow one row per member per cycle, and a nightly job applies deadlines.
Enforced access in two layers: 3 staff role tiers checked on the server, and row-level security in the database that keeps members to their own records. Added an audit log and security headers, and ran 3 security audit rounds.
Added 25 permanent redirects for the old URLs, moved hero images through the image pipeline, and fixed contrast and heading issues: the slowest page went from 76 to 96 and every audited page reached 100 for accessibility.
Routed all date logic through shared UTC helpers and ran the date unit tests in 5 time zones.
Built a dedicated test database with fixture members and plans, seeded with production's billing settings: over 200 database tests and 64 browser tests run on every pull request that changes code, and nightly.
Inside the project
Select a screenshot to view it full size.
Staff search and filter every member by benefit and status (sample data)
Every owed payment is its own row, with its coverage period and status (sample data)
The unpaid list across all three benefits, filtered by type, status and cycle (sample data)
Plan prices, billing cycles and go-live switches, set by staff instead of in code
Every email the site sends, previewed with sample data before it goes out
Plain-language benefit guides, like this side-by-side medical plan comparison
Retirement planning guide for members approaching retirement
Searchable provider directories members can sort, filter and export
Before: the Fund's previous site, as archived in February 2026
The outcome
- More than 3,500 members have paid over 4,500 premiums online, by card or bank transfer, since March 2026. The first online RX cycle alone brought in more than 3,200 payments.
- More than 3,600 members have signed in to the portal.
- Staff have sent more than 1,100 document requests to over 700 members through the secure upload portal since May 2026.
- On 75% of real mobile visits the main content appears within 1,186 ms, with INP 101 ms and CLS 0: every Core Web Vital in Google's good range.
- The slowest page's mobile Lighthouse performance went from 76 to 96, its LCP from 7,285 ms to 2,801 ms (62% less) and its weight from 1,998 KB to 1,243 KB (38% less). Accessibility went from 91 to 100 on the homepage and is 100 on all 11 audited pages. On the live site in October 2026, the home, documents and dental provider pages score 100 for accessibility, best practices and SEO.
- 169 merged pull requests, with over 200 database tests and 64 browser tests running in CI.
Built with
Next.js
React
TypeScript
Supabase
PostgreSQL
Stripe
Tailwind CSS
shadcn/ui- React Email
Resend- Playwright
Vercel
More projects like this
Have a project like this in mind?
Tell us what you're building. We'll show you how we'd approach it and what it would take, the same way we did for Philadelphia Federation of Teachers Health & Welfare Fund.