Loading...
Back to Case Studies
WebUI/UXDesign System
UI/UX Reskin – FlexiPay Public Payment Portal
A full visual refresh of FlexiPay, the white-label payment portal ratepayers across multiple Australian councils use to set up direct debits and pay council notices, rebuilt mobile-first on a new design system.
Government & Municipal Payments
2026
Overview
FlexiPay is a white-label payment service that lets ratepayers set up direct debit payments or make one-off payments for council notices. They can scan the QR code on their notice, or enter their eNotices reference number manually, to get started. Each council presents the service under its own branding, labels and configuration.
Ratepayers across multiple Australian councils use FlexiPay to enter reference numbers, choose payment schedules and pay. The portal needed a full visual refresh to a new design system, with a mobile-first experience that works smoothly on phones, tablets and desktops, while keeping each council’s branding intact.
Our services covered UI/UX implementation, front-end engineering, design systems, email template design and QA.
Key Features
- Rebuilt the public portal interface on ASP.NET Core 8 and Razor, implementing every screen from the new Figma designs for desktop and mobile. This covered manual and QR reference number entry, contact details, schedule selection, payment and result screens.
- Built a design token system using CSS custom properties, with a layered stylesheet structure that lets each council’s branding override the base styles without cross-tenant leakage.
- Reskinned the notification pages and email templates with the latest FlexiPay branding, giving ratepayers a consistent look from the portal through to their inbox.
- Preserved existing tenant configuration, including per-council labels, auto-payment warnings and direct debit date limits, so nothing live in production was affected.
- Extended the design system to cover screens without finished designs, following the established patterns.
Project Details
IndustryGovernment & Municipal Payments
PlatformsWeb
Year2026
Tech Stack
ASP.NET Core 8RazorCSS Custom PropertiesFigma
Have a similar project?
Tell us what you're building and we'll show you how we'd approach it.
Book Consultation
