WhiteNWise
Business utilities, payments and accountancy under one roof.
- ROLE
- Design and full-stack build
- STACK
- Next.js · TypeScript · Tailwind CSS · Vercel
- LIVE AT
- whitenwise.com
// THE PROBLEM
WhiteNWise brokers five different things — energy, water, card payments, legal and accountancy — and is paid by suppliers rather than by clients. That is a hard proposition to land: a business owner arriving cold has to understand a multi-service offer, believe the "zero cost to you" claim, and then act, all before they lose interest.
Utilities brokerage also competes on a number the visitor cannot see. Until someone knows roughly what they would save, every call to action is an abstraction, and a plain contact form asks them to take the whole thing on faith.
// THE SYSTEM
The savings calculator is the centre of the page rather than a buried tool. Business-type presets and sliders for electricity, gas, card volume and water produce a live annual estimate broken down per utility, alongside a current-versus-projected spend comparison.
Each of the five service lines gets its own structured section, so a visitor who only came for card terminals can find that without wading through energy copy.
Supplier marks run as a continuous strip, which is the fastest way to establish that this is a broker with real supplier relationships rather than a lead-capture page.
The "how it works" flow is reduced to three steps with the effort explicitly on the broker's side, addressing the real objection: switching sounds like work.
Built on Next.js and Tailwind and deployed on Vercel, with the calculator computing entirely client-side so results are instant.
// WHAT SHIPPED
- Live at whitenwise.com.
- The savings estimate is available before any form, so the primary CTA follows a number rather than a promise.
- All five service lines are addressable from one page without diluting any of them.
Building something like this?
Tell me the shape of the project and I'll come back with how I'd approach it.
START A PROJECT