Uitdaging

Een website voor een SaaS-bedrijf in volle groei is nooit af. Er komen nieuwe producten bij, nieuwe solutions voor nieuwe teams, nieuwe product-pagina's, nieuwe verhalen per persona. De grootste uitdaging lag dus niet in het bouwen van één mooie site, maar in het opzetten van een systeem waarin het Bizzy-team zelf pagina's kan dupliceren, uitbreiden en herschikken zonder dat het design ergens scheurt.

Daarbovenop kwam de mobile vertaling. Hartstikke had een strak desktop-design afgeleverd met template-pagina's (home, product, product detail, persona), geïnspireerd op de nieuwe visuele taal van Notion. Mijn opdracht was om dat gedachtengoed niet alleen visueel, maar vooral ook structureel om te zetten in Framer.

Aanpak

Ik ben gestart met het volledige design te ontleden in een bibliotheek van herbruikbare componenten. Elk blok op elke pagina is een component met varianten, props en regels. Een kleurtje aanpassen, een extra item toevoegen, een variant omwisselen: allemaal doenbaar vanuit het CMS zonder een enkele layout aan te raken.

De grootste en meest ingezette bouwsteen is de tabs-component. Op de homepage, op de product pagina's, op de solution pagina's, overal keert hij terug, steeds in een andere vorm. Daarom bouwde ik hem volledig dynamisch: het team kiest zelf hoeveel tabs of stappen er in staan, welke content erin zit, en welke variant (stijl, layout, gedrag) wordt gebruikt. Eén component, meerdere gezichten, nul duplicatie onder de motorkap.

Die tabs werken ook mobile-first door een eigen mobile variant. Tabs op desktop schuiven en switchen moeiteloos, maar op mobiel is een horizontale tab-navigatie vaak krap en ongemakkelijk. Ik ontwierp en bouwde hier een oplossing die op mobiel anders gedraagt dan op desktop, zonder dat het content-team daar twee keer aan moet werken. Eén keer invullen, juist uitkomen op beide.

Een andere eyecatcher is de floating logo bar. Op de homepage staat een rij klantlogo's zichtbaar boven de fold. Bij het scrollen verankert die balk aan de onderkant van de pagina en blijft mee reizen als een subtiele bevestiging van wie Bizzy al bedient. Het is het soort detail dat je niet aan het design ziet maar wel voelt als je de site gebruikt.

De rest van het werk ging in de mobile design en ontwikkeling. Aangezien Hartstikke enkel het desktop design had afgeleverd, ontwierp en bouwde ik alle mobile versies zelf, in lijn met hun visuele taal en de logica van de componenten.

Resultaat

Bizzy heeft nu een website die meegroeit in plaats van mee vastloopt. Nieuwe solution voor een nieuwe persona? Dupliceren, invullen, live. Extra stap in een flow op de product pagina? Gewoon een extra tab toevoegen in het CMS. Voor een scaleup met het tempo van Bizzy is dat geen luxe, maar de enige werkbare manier om een website levend te houden.

Voor mij was dit project een ode aan modulair denken. Hoe minder dingen je twee keer moet bouwen, hoe meer ruimte er overblijft voor de echt interessante details: de mobile varianten die écht werken, de sticky interacties die je niet opmerkt tot je ze mist, en de kleine overgangen die het geheel laten ademen.