HPS Portal Framework
One reusable front-end foundation for Employer, Broker, and Member portals, adapted for healthcare and insurance carriers including Nationwide, Cigna, Principal, and Beazley.
One Foundation for Many Clients
HPS built Employer, Broker, and Member portals for dozens of healthcare and insurance carriers. Each carrier needed a portal that matched its own brand, while HPS needed a common foundation developers could reuse and adapt instead of rebuilding the front end for every client.
I designed and built that reusable front-end foundation.
One Framework, Three Layers
I organized and documented the framework in three layers so developers could work from the same structure and rules:
Layout
The grid, containers, forms, and table patterns shared across every portal.
Navigation
The shared header, main menu, submenus, top-level navigation, and logged-in states.
Skin
The CSS layer that applied each carrier's colors, typography, and branding without changing the underlying structure.
The generic framework could be adapted to Nationwide , Beazley , and other client brands while preserving the shared portal structure underneath.
Built for Developers, Not Just Designers
This wasn't just a document showing colors and components. I wrote the official HPS UI Design Guidelines and Coding Standards with real markup developers could copy and use. It included specific rules, such as logo dimensions capped at 380×60px, and even a "Select All" button on every code example.
I also built a jQuery review tool to make code reviews clearer. It showed the problem markup, linked it to the relevant coding standard, and displayed the corrected code beside it. Instead of simply telling a developer something was wrong, the tool showed what needed to change and why.
Before Figma Existed
Before tools like Figma made interactive prototypes easy, I built full portal experiences directly in HTML. Registration, account management, billing, claims, and employee management were clickable, so stakeholders could move through the experience instead of reviewing a stack of static screens.
I also built interactive site maps for the portals. Each item linked directly to its prototype page — Login, Registration, Password Reset, Coverage, Billing, EFT Accounts, and more — so the structure and the working screens stayed connected.
Yes, It Still Works.
More than a decade later, the original HTML prototypes, documentation, interactive site maps, and jQuery review tool still run in a modern browser.