Rinze Buunk CMS
Rinze op jouw feestje?
Rinze Buunk is een feestzanger van 18 die overal optreedt, van verjaardagsfeestjes tot feesttenten. Hij had een site nodig die boekingen oplevert, en een CMS dat hij zelf kon bijhouden tussen twee optredens door.
Ik heb de site in mijn eentje ontworpen en gebouwd, van het eerste gesprek tot de lancering. De publieke site is mooi geworden, maar waar ik het meest trots op ben is het CMS erachter.
Van brainstorm tot lancering
We begonnen samen met brainstormsessies: wie boekt Rinze, wat willen ze weten, en wat wil hij niet meer met de hand doen? Organisatoren willen zien wat hij kost en of hij beschikbaar is. Rinze wilde zijn agenda, foto’s en boekingsaanvragen niet langer op drie verschillende plekken bijhouden.
Daarna maakte ik een moodboard met referenties van andere Nederlandse feestartiesten en hun boekingspagina’s. We liepen het samen door en hielden vast wat bij Rinze paste: grote, smalle letters, echte podiumfoto’s en een rustig marineblauw in plaats van schreeuwerige kleuren.
Het moodboard: marineblauwe kleurstalen, lettertests en referentiesites.
Daar kwam een kleine ontwerptaal uit voort. Wireframes legden vervolgens de grote keuzes vast, zoals de schermvullende hero met het logo en de header die in het logo verandert zodra je scrolt.
Rinze Buunk
Barlow Condensed voor koppen, DM Sans voor al het andere.De publieke site
Vier pagina’s: home, boekingen, agenda en media. De boekingspagina toont meteen de pakketten en prijzen, op de agenda kun je je abonneren en de mediapagina vult zichzelf met foto’s van eerdere optredens.
Boekingen op desktop, en op mobiel is “Boek nu!” altijd één tik verwijderd.
Het CMS
Hier ging het meeste werk in zitten. Rinze is niet technisch en doet bijna alles vanaf zijn telefoon, vaak direct na een optreden. Dus in plaats van een kant-en-klaar CMS bouwde ik er een voor precies zijn werk, in het Nederlands, waarbij elk scherm één taak heeft. Op de site heet het gewoon Beheer.
Eén agenda voor alles
De agenda is een echte CalDAV-agenda. Rinze en zijn team zien hem in de agenda-app op hun telefoon, en de website leest uit diezelfde agenda. Een item is een openbaar optreden of een interne notitie, zoals een repetitie. Een optreden kan ook een besloten feest zijn: dat staat op de site als “besloten”, maar bezoekers kunnen het niet aan hun eigen agenda toevoegen.
Optredens in marineblauw, interne items gestreept, opties gestippeld.
Bewerk een optreden ter plekke, inclusief publiek of besloten.
Elke foto is een tegel; de details openen in een modal.
Vermeld in één keer dezelfde fotograaf bij een hele selectie.
Sleep om de volgorde te wijzigen. Het eerste item, ook als het een video is, wordt de cover.
Uploads die het budget niet kunnen opblazen
De hele site draait op het gratis abonnement van Cloudflare, dus opslag telt. Rinze kan alles uploaden wat zijn telefoon maakt, en de browser verkleint het voordat het geüpload wordt. Locatiegegevens worden verwijderd en video’s worden opnieuw geëncodeerd met WebCodecs. Hij hoeft nooit aan bestandsgroottes te denken en de bucket blijft klein.
Boekingsaanvragen die zichzelf regelen
Een aanvraag via de site wordt meteen een boeking en een optie in de agenda. Als de status verandert, wordt het agenda-item ook bijgewerkt, dus de agenda en de inbox kunnen niet uit elkaar lopen.
Nieuw Evenement blijft onder voorbehoud
Gecontacteerd Evenement blijft onder voorbehoud
Bevestigd Evenement wordt Normaal, nog verborgen op de site
Afgewezen Evenement wordt Geannuleerd
Gebouwd voor de telefoon
Inloggen gaat met een magic link per e-mail, dus er zijn geen wachtwoorden om te vergeten. Teamleden krijgen een van vier rollen, van eigenaar tot alleen-lezen. En elk scherm werkt op een telefoon, want daar gebruikt Rinze het echt.
De CMS-screenshots gebruiken demodata, niet de echte agenda of klanten van Rinze.
Resultaat
Rinze beheert zijn site nu zelf: hij voegt optredens toe, uploadt dezelfde avond nog foto’s en beantwoordt boekingsaanvragen vanuit één inbox die zijn agenda synchroon houdt. Voor mij was het mooiste dat ik het hele traject samen met hem deed, van de eerste brainstorm tot de laatste ronde kleine fixes vóór de lancering.