Een hovenier die niet zo van de computers is. Nu gaan zijn facturen vanzelf.
Freek is hovenier en werkt voor zichzelf onder de naam De Groene Rheede. Computers zijn niet zo zijn ding. Zijn facturen maakte hij in Word, met een online btw-calculator ernaast. Nu doet hij dat in de browser, en het meeste gaat vanzelf.
Ik heb er één app voor gebouwd. Zijn website zit erin en zijn hele administratie ook. Hieronder staat wat erin zit en hoe ik het heb aangepakt.
- Klant
- De Groene Rheede, hovenier Freek
- Vak
- Hovenier, zzp
- Gemaakt
- Website en administratie in één app
- Stand
- Live. De scrollbeleving wordt nog afgebouwd.
Het probleem
Waar het begon: facturen in Word
Een hovenier staat overdag in iemands tuin. De administratie komt daarna. Freek maakte zijn facturen in Word, en dat werkt. Tot het ergens misgaat.
- Het factuurnummer typ je zelf. Vergeet je één keer op te hogen, dan heb je twee facturen met hetzelfde nummer.
- De btw reken je zelf uit. Staan er twee tarieven op één factuur, dan wordt dat rekenwerk.
- De verplichte gegevens staan erop zolang je ze niet per ongeluk weghaalt.
- Wie al betaald heeft, houd je ergens anders bij. Of nergens.
Een groot boekhoudpakket leek me voor hem ook niks. Daar zit veel meer in dan iemand nodig heeft die gewoon een factuur wil sturen. Hij wilde er zo weinig mogelijk mee bezig zijn.
Wat er gemaakt is
Eén adres met twee kanten
Aan de voorkant staat zijn website, voor klanten. Aan de achterkant zit zijn administratie, achter een inlogscherm. Freek kiest zelf waar hij heen gaat.
01 · Het keuzescherm
Geld of een zaadje
Als Freek zijn app opent, ziet hij twee dingen in 3D. Een stapel geld brengt hem naar zijn administratie. Een zaadje groeit na een paar klikken uit tot zijn website.
Voor wie liever niet op 3D klikt, staan er twee gewone knoppen onder. Dit scherm is alleen voor Freek. Klanten komen meteen op de website.
02 · De website
Een site die opent in de tuin
De website begint met een video uit de tuin. Het logo bouwt zichzelf op: eerst groeit het plantje, dan verschijnen de letters. Daaronder staat wat Freek doet en hoe hij werkt, met de vragen die klanten hem vaak stellen.
Het contactformulier vraagt welke dag en welk dagdeel iemand het beste uitkomt. Dan kan Freek meteen een bezoek plannen.
Eerlijk is eerlijk: er komt nog een scrollbeleving bij, en de foto's zijn nu sfeerbeelden. Zijn eigen tuinen komen erin zodra hij ze aanlevert.
03 · De footer
Een krans van rozen
Onderaan de site staat een schutting van bankirai. Zodra die in beeld komt, staat de knop om een afspraak te plannen er al. Daarna groeien er vanzelf rozen omheen, als een krans.
Aan de takken verschijnen de links naar de voorwaarden, de privacyverklaring en het contactformulier. Het is het laatste wat je op de site ziet, dus daar staat de knop waar het om draait.
04 · De borderplanner
Zelf een border samenstellen
Een klein programma om mee te spelen. Je geeft aan hoeveel zon er is, wat voor grond je hebt, hoe nat het is en hoeveel onderhoud je wilt. Daarna sleep je planten in je border.
Bij elke plant staat een echte bloeifoto en een kort verhaaltje. De planner laat zien of de planten bij de plek en bij elkaar passen, en of er van april tot oktober iets bloeit.
05 · Voorwaarden en privacy
Voorwaarden om in te klimmen
Algemene voorwaarden sla je meestal over. Bij Freek klim je erdoorheen. Je begint bij de wortels van een boom en gaat per artikel omhoog, langs alles wat in de boom woont.
Elk hoofdstuk begint met een korte samenvatting in gewone taal. De privacyverklaring werkt op dezelfde manier. Zo lezen mensen wat ze met hem afspreken.
06 · CORN@ CTRL
De administratie, achter een Japanse esdoorn
Het inlogscherm heeft een Japanse esdoorn die zacht wiegt. Daarachter zit Freeks administratie. Ik noem het CORN@ CTRL. De basis is het dashboard dat ik voor mijn eigen administratie gebruik. Voor Freek heb ik het omgebouwd: minder velden, grotere knoppen.
Een factuur die verstuurd is, kan daarna niet meer stilletjes veranderen. Moet er iets rechtgezet worden, dan maakt de app een creditfactuur. Zo blijft de administratie kloppen.
- Klanten
- Iedereen voor wie hij werkt, met de gegevens op één plek.
- Offertes
- Een offerte opstellen gaat op dezelfde manier als een factuur.
- Facturen
- Het nummer loopt vanzelf op en de btw wordt per tarief uitgerekend. De verplichte gegevens staan er altijd op. Hij krijgt een PDF in zijn eigen huisstijl.
- Planning
- Welke klus wanneer, per week bekeken.
- Kosten
- Wat hij uitgeeft, naast wat er binnenkomt.
- Zijn e-mail krijgt hier ook een plek. Dat deel staat klaar, zijn mailbox moet er nog naartoe verhuizen.
De aanpak
Hoe bouw je voor iemand die niet van computers houdt?
Freek hoeft niet te weten hoe het werkt. Hij moet het kunnen gebruiken zonder mij te bellen. Daar is elke keuze op getoetst.
01
Eén hoofdactie per scherm
Op elk scherm is er één ding dat je waarschijnlijk wilt doen. Die knop is de grootste.
02
Knoppen die zeggen wat er gebeurt
“Open de administratie”. “Oefen eerst met verzonnen klanten”. Dan hoef je niets te raden.
03
Groot genoeg voor de telefoon
Alles werkt op een telefoon, met knoppen die groot genoeg zijn voor handen die net uit de tuin komen.
04
Het programma onthoudt de regels
Factuurnummers, btw en verplichte velden regelt de app. Freek vult alleen in wat hij zelf weet.
05
Eerst oefenen
Er zit een rondleiding in met verzonnen klanten. Er wordt niets opgeslagen, dus hij kan niets kapotmaken.
Het resultaat
Wat het oplevert
Freek maakt zijn facturen nu in de browser. Het nummer en de btw regelt de app, en de PDF staat meteen klaar. Klanten komen op een website die laat zien hoe hij werkt.
Af is het nog niet helemaal. De scrollbeleving komt nog, en de foto's van zijn eigen tuinen moeten er nog in. Een site mag doorgroeien.
Bekijk de website van De Groene Rheede (opent in een nieuw tabblad)
Voor wie het wil weten
Waarmee het gebouwd is
- Framework
Next.js
De website en de administratie zitten in één app, op één adres.
- 3D
React Three Fiber
Voor het keuzescherm en het logo dat uit een plantje groeit.
- Database
PostgreSQL
Bedragen staan in centen opgeslagen, zodat er bij afronden nooit een cent verdwijnt.
- Hosting
Coolify, achter Cloudflare
Draait op mijn eigen server. Geen abonnement bij een groot platform.
- Veiligheid
Security-audit
Voor de oplevering doorgelicht op lekken en zwakke plekken.
- Toegankelijk
Toetsenbord en rustige versie
Alles werkt met het toetsenbord. Wie minder beweging wil, krijgt een stilstaande versie.
Lees verder
