BespaarCheck
AI-energieadviseur voor het Nederlandse MKB
Live op elk scherm
Verse opname van de live site
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.
De kern 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.
De uitvoering is bewust premium. De site voelt snel, helder en betrouwbaar; de dark-mode update geeft het platform een krachtiger paars-blauw energielandschap, terwijl de light mode clean en zakelijk blijft. Onder de motorkap zit een moderne componentmatige front-end met lazy-loaded secties en een AI-ready chatlaag — genoeg technische diepte om schaalbaar te zijn.
Het resultaat is meetbaar: op de live site haalt BespaarCheck 95 performance mobiel en een vlekkeloze 100 op desktop, met 100 SEO. 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
- Regelgevingslaag voor informatieplicht, onderzoeksplicht en label C
- Maatregelen voor LED, solar, warmtepomp, EMS, opslag en contractoptimalisatie
- Light en dark mode als twee volwaardige merkervaringen
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.
Calculatorarchitectuur met gescheiden invoer, validatie, contextmapping, scoring en output, beschreven zonder operationeel gevoelige details.
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.
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.
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.
Vergelijkbaar
project?
Plan een gratis gesprek van 30 minuten. Vrijblijvend, zonder verplichtingen.
Plan gratis gesprek