BespaarCheck
AI-energieadviseur voor het Nederlandse MKB
Over het project
BespaarCheck is opgebouwd als een digitale advieservaring voor ondernemers die wel willen besparen, maar niet precies weten waar ze moeten beginnen. Geen koude calculator, geen generieke leadpagina, maar een rustige route waarin uitleg, regelgeving, rekenlogica en AI-assistentie elkaar versterken.
Voor de bouw is BespaarCheck eerst volledig in Figma uitgewerkt. De hero, navigatie, CTA's, routekaart, badges, spacing en gridstructuur zijn als interface ontworpen voordat er code werd geschreven. Daardoor ontstond geen verzameling losse webblokken, maar een productervaring met vaste ritmes, duidelijke hiërarchie en een herkenbare visuele taal.
Ook de calculator is vooraf als blauwdruk ontleed. Staplogica, bedrijfsprofiel, inputvalidatie, besparingsengine, maatregelenmatrix, prioriteitenscore, UX-progressie en leadkwalificatie zijn als één datastroom uitgewerkt. Daarmee werd duidelijk welke vragen echt nodig zijn, welke berekeningen op de achtergrond plaatsvinden en hoe de bezoeker uiteindelijk een begrijpelijke vervolgstap krijgt.
Daar bovenop is de schermarchitectuur visueel ontleed in lagen: outer shell, stapnavigatie, content header, invoercomponenten, sliderlaag, CTA-laag, logic/data-laag en intelligence/output-laag. Dat maakte scherp welke delen puur interface zijn, welke delen berekening dragen en waar de uiteindelijke inzichten ontstaan.
De kern van het project is de combinatie van drie lagen. Eerst krijgt de bezoeker direct houvast: welke maatregelen bestaan er, welke verplichtingen spelen er en waarom is dit relevant voor een MKB-pand? Daarna vertaalt de calculator bedrijfstype, gebouwgrootte, verbruik, contractvorm en installaties naar een begrijpelijke indicatie. Tot slot helpt Check als AI-gids om vragen te beantwoorden, context te geven en bezoekers naar het juiste onderdeel te sturen.
Ook de uitvoering is bewust premium gemaakt. De site voelt snel, helder en betrouwbaar; de dark-mode update geeft het platform een krachtiger paars-blauw energielandschap, terwijl de light mode juist clean en zakelijk blijft. Onder de motorkap is gekozen voor een moderne componentmatige front-end, lazy-loaded secties, semantische contentstructuur, een performancebewuste assets-aanpak en een AI-ready chatlaag met fallbackgedrag. Dat is genoeg technische diepte om schaalbaar te zijn, zonder onnodig operationele details prijs te geven.
De meest recente Lighthouse-check op de live website laat zien dat de beleving niet alleen visueel sterk is: mobiel haalt BespaarCheck 95 performance, 96 best practices en 100 SEO; desktop haalt 100 performance, 100 best practices en 100 SEO. De accessibility-score staat op 89 en is daarmee al solide, met nog ruimte voor verdere finetuning. Het resultaat is een case die voelt als product, advieslaag en conversiemachine tegelijk.
Features
- AI-chatbot Check met eigen BespaarCheck-kennisbank
- Calculator die sector, gebouw, verbruik en contractvorm combineert
- Calculatorblauwdruk met staplogica, inputvalidatie, scoring, output en leadkwalificatie
- Regelgevingslaag voor informatieplicht, onderzoeksplicht en label C
- Maatregelen voor LED, solar, warmtepomp, EMS, opslag en contractoptimalisatie
- Volledig eerst uitgewerkt in Figma: hero, grid, routekaart, CTA's en componentritmes
- Light en dark mode als twee volwaardige merkervaringen
- Gemeten live Lighthouse-score: 95 mobiel performance en 100 desktop performance
Resultaten
Project Info
Een energieplatform dat voelt als advies, product en conversiemachine tegelijk.
BespaarCheck is ontworpen als een gelaagde ervaring: eerst in Figma als productinterface, daarna in code als adviesroute. Daardoor wordt een technisch onderwerp toegankelijk zonder simpel te worden.
Live Lighthouse
Meetbaar snel
Gemeten op de live BespaarCheck-site op 3 mei 2026. Mobile: 95 performance, 89 accessibility, 96 best practices, 100 SEO. Desktop: 100 performance, 89 accessibility, 100 best practices, 100 SEO.
Figma als productblauwdruk
De hero, routekaart, navigatie, CTA-states en spacing zijn eerst als complete interface in Figma ontworpen. Daardoor kon de bouw vanuit een sterk visueel systeem vertrekken.
Calculator met beslislogica
De calculator is als blauwdruk ontleed: staplogica, inputvalidatie, maatregelenmatrix, prioriteitenscore en outputflow vormen samen één route naar advies.
Check als rustige AI-gids
De chatbot is ontworpen als begeleider die context geeft, vragen opvangt en bezoekers naar calculator of regelgeving stuurt zodra dat nuttiger is dan een lang antwoord.
Regelgeving zonder ruis
Informatieplicht, onderzoeksplicht, energiebesparingsplicht en label C worden teruggebracht tot duidelijke keuzes en praktische vervolgstappen.
Sterk verteld, veilig uitgelegd.
Componentmatige React-front-end met strakke scheiding tussen content, interactie en visuele lagen.
Figma-first ontwerpaanpak waarin grid, auto-layout, routekaartmodules en CTA-verhoudingen vooraf zijn vastgelegd.
Calculatorarchitectuur met gescheiden invoer, validatie, contextmapping, scoring en output, beschreven zonder operationeel gevoelige details.
Gelaagde schermarchitectuur waarin container, stapnavigatie, inputlaag, CTA-laag en outputlaag bewust als aparte systemen zijn ontworpen.
Lazy-loaded ervaringssecties, geoptimaliseerde WebP-assets en bewust korte renderingpaden.
AI-ready chatlaag met fallbackgedrag, zonder gevoelige implementatie- of infrastructuurdetails in de case te tonen.
Wat dit project bijzonder maakt
Deze case leest nu meer als een productpresentatie: interface, logica, architectuur en output worden als samenhangend systeem getoond.
Dark mode die energie en rust combineert
De nieuwste visuele update maakt de website sterker in dark mode: een diepe paars-blauwe hero, heldere witte typografie, zachte gridpatronen en donkere routekaarten geven BespaarCheck meer diepte zonder zakelijke duidelijkheid te verliezen.
AI-chatbot die niet verkoopt, maar begeleidt
Check opent als digitale energieadviseur. De bot herkent vragen over besparen, verplichtingen, zonnepanelen, warmtepompen, gratis advies en contracten. Hij is ontworpen als begeleider: rustig, contextueel en gericht op de volgende logische stap in plaats van op harde verkoop.
Calculator die ondernemers naar actie brengt
De vernieuwde check gaat verder dan een formulier. De calculator is vooraf als technische blauwdruk uitgewerkt: staplogica, sectorprofiel, invoervalidatie, besparingsengine, maatregelenmatrix, prioriteitenscore en outputflow vormen samen één duidelijke route naar advies.
Interface die de berekening begrijpelijk maakt
Bedrijfstype, gebouwgrootte, stroom- en gasverbruik, bestaande installaties, teruglevering, contracttype en prioriteiten worden vertaald naar een duidelijke besparingsindicatie. De gebruiker ziet niet alleen inputvelden, maar een logisch beslismodel.
Gelaagde architectuur van scherm tot inzicht
De calculator is niet alleen inhoudelijk, maar ook visueel ontleed. Outer shell, step navigation, content, invoer, slider, CTA, logic/data en output zijn als losse lagen uitgewerkt. Daardoor bleef de interface rustig terwijl de onderliggende structuur veel slimmer werd.
Energiecategorieen als premium productlaag
De bespaarmogelijkheden zijn vormgegeven als een overzichtelijke productlaag: warmtepompen, zonnepanelen, energiecontracten, opslag en batterijen, laadpalen en slim energiemanagement. Daardoor voelt het platform rijker dan een leadformulier, zonder de gebruiker te overweldigen.
Een Platform, Alle Besparingen
BespaarCheck analyseert 6 verschillende energiecategorieen om jouw bedrijf de beste besparingsopties te bieden.
Warmtepompen
Bespaar tot 60% op verwarmingskosten met een moderne warmtepomp. Geschikt voor vrijwel elk MKB-pand.
Van Vraag tot Advies in 6 Stappen
Geen ingewikkelde formulieren of eindeloze vragen. BespaarCheck combineert calculator, AI-gids Check en regelgeving tot een rustige route naar gepersonaliseerd besparingsadvies.
Bedrijfsinfo
Type bedrijf & locatie
Van calculator naar AI-adviseur
De nieuwe BespaarCheck moest slimmer voelen zonder ingewikkeld te worden
Figma als productblauwdruk
Voordat de website gebouwd werd, is de volledige hero-ervaring in Figma ontworpen: 12-koloms grid, navigatie, primaire CTA, taal- en themakeuze, badges, routekaart en module-spacing. Daardoor kon de front-end exact worden opgebouwd vanuit een duidelijke productinterface in plaats van op gevoel.
Calculatorlogica als blauwdruk
De bespaarcalculator is niet simpelweg als formulier ontworpen, maar als beslismodel. De blauwdruk maakt zichtbaar hoe input, validatie, context, maatregelen, scoring en output door elkaar heen lopen, inclusief feedbackloops voor optimalisatie.
Schermarchitectuur per laag
Na de calculatorlogica is ook de volledige schermopbouw ontleed: van outer shell en stapnavigatie tot CTA-laag, logic/data-laag en outputlaag. Die exercitie zorgde ervoor dat interactie, berekening en inzicht niet door elkaar heen gingen lopen.
De vraag achter de vraag
De eerste stap was het herformuleren van BespaarCheck: niet als tool die alleen een bedrag uitrekent, maar als gids die onzekerheid wegneemt. De content, de calculator en de AI-assistent zijn daarom rond dezelfde gebruikerstaak gebouwd: begrijpen wat nu slim is.
Rekenlaag met context
De calculator gebruikt sector, gebouw, verbruik, contract en installaties om een realistischer beeld te geven van besparing, investering, CO2-reductie en terugverdientijd. De interface houdt die complexiteit uit beeld, zodat de bezoeker vooral voelt: dit is te begrijpen.
Productgevoel zonder ruis
De bespaarcategorieen zijn visueel opgetild naar een donkere, rustige interface met duidelijke kaarten, zachte beweging en sterke contrasten. Zo blijft de site zakelijk, maar voelt hij rijker dan een standaard vergelijkingstool.