Service Business Portal & Dispatcher UI
Northstar Home Services
Material UIPortal UXService Business
jalbright.dev/demo-northstar
A concept demo for a fictional home services company, combining a lead-generation website with a customer portal and dispatcher workspace built on Material UI. Northstar Home Services is a fictional brand — not a real business.
01
The Challenge
Defining the problem
Most service businesses need more than a brochure website: they need intake forms that collect usable job details, a customer portal that reduces back-and-forth with the office, and an internal interface that makes dispatch work easier instead of noisier. For this concept, the challenge was designing a system that could feel trustworthy and conversion-focused on the public-facing side while still supporting denser operational workflows like appointment tracking, invoice management, and live job triage.
The Approach
Crafting the solution
I built the demo on Next.js App Router and introduced Material UI in an isolated route segment so the design system could power a distinct application-style experience without bleeding into the rest of the site. The public pages use a restrained blue-and-orange service brand with subtle motion and clear calls-to-action, while the portal and dispatch surfaces shift into a calmer, utility-first layout built from MUI primitives like AppBar, Drawer, Stepper, Table, Chip, and DataGrid. Shared mock data keeps the marketing, booking, customer, and admin views connected so the whole demo reads like one believable product instead of a set of disconnected screens.
02
03
The Results
Outcomes & highlights
- Isolated Material UI integration inside a Next.js App Router demo
- Multi-step service request flow with validation and review states
- Customer portal for appointments, invoices, and property history
- Dispatcher dashboard with technician coverage and job queue management
- Responsive experience across marketing, portal, and admin surfaces