Hoe meubelmerk Pode profiteert van een headless aanpak met Storyblok

Steeds meer organisaties kiezen voor een headless CMS bij het bouwen van een nieuw online platform. Ook bij iO gaan we vaak uit van een headless aanpak. Zo hebben wij de combinatie van het Storyblok CMS en Next.js gebruikt om van de nieuwe website van meubelmerk Pode een totale merkbeleving te maken. In dit artikel vertellen we hoe dat in de praktijk ging.

Pode | iO

Een merkervaring zoals die in een fysieke showroom

Het meubelmerk Pode is opgericht in 2008 en is onderdeel van het Nederlandse design meubelmerk Leolux Furniture Group. Voor Pode is design meer dan alleen een meubelontwerp. Door complete series aan bij elkaar passende meubels en accessoires te bieden, zorgt Pode voor harmonie in heel het huis.

Voor de nieuwe website van Pode was het hoofddoel om dit merkgevoel goed over te brengen. Daarom was het voor Pode van groot belang om de overstap van een functionele website naar een ervaringsgericht digitaal platform te maken waarmee de bezoeker wordt inspireert - zónder in te leveren op functionaliteiten of prestaties. Vooral als design meubelmerk is het essentieel dat de merkervaring en het ‘gevoel’ authentiek overkomt op de websitebezoeker. Ons doel was duidelijk: vanaf het eerste contactmoment moet het merk ademen en de bezoeker moet een merkervaring krijgen die gelijk staat aan de merkervaring van een fysieke showroom.


Youtube thumbnail

Wat betekende Pode’s ambities voor de keuzes in techniek?

1. Onbegrensde creativiteit door headless
Qua techniek hadden we complete vrijheid nodig om onze visie op de digitale merkbeleving voor Pode.eu te realiseren. Traditionele CMS’en zijn beperkt in wat er in de front-end mogelijk is. Dit komt door de manier waarop de front-end direct gekoppeld is aan de back-end en zo een groot deel van de opmaak en designs bepaalt. Bij een headless CMS is dat niet het geval.

Dankzij de architectuur van een headless CMS beheer je al je content in één afzonderlijk systeem en laad je deze vervolgens naar de verschillende front-ends door middel van API’s. Hierdoor krijg je meer creatieve vrijheid en flexibiliteit omdat de front-end nu niet meer wordt beperkt door de standaardoplossingen die bij een traditioneel CMS wel van kracht zijn. Precies wat wij voor dit project nodig hadden.

Lees hier meer over de invloed van een headless CMS op je gebruikerservaring.

2. Moderne frameworks
Ook wisten wij dat we voor de realisatie van de digitale merkbeleving gebruik wilden maken van een modern front-end framework dat de mogelijkheid biedt om ambitieuze User Interfaces te maken. Het door Facebook ontwikkelde React is bijvoorbeeld een moderne manier om alles dynamischer, interactiever en intuïtiever te maken. Frameworks als deze zijn niet meer direct aan het CMS gekoppeld. Hierdoor werkt het ook goed voor bijvoorbeeld een online portal of smartwatch app.

3. Een flexibel CMS
Omdat de front-end voor dit project zo ambitieus is, was het belangrijk dat we voor een solide back-end optie zouden kiezen die eenvoudig is om op te zetten. Er zijn veel traditionele CMS’en waarbij het tijdrovend is om de servers in te richten, het CMS te installeren en te configureren. Gelukkig zijn er tegenwoordig ook veel SaaS (software as a service) CMS’en waarbij het opzetten van een backend, door een plug-and-play-methode, veel minder tijd kost. Dat zou ons in staat stellen om het overgrote deel van onze tijd in de front-end te steken en de merkervaring te perfectioneren.

“Door te kiezen voor een SaaS CMS zouden we het overgrote deel van onze tijd kunnen steken in de front-end om zo de Pode merkervaring te perfectioneren.”

The right tools for the job

Met deze bovenstaande 3 pijlers in gedachten zijn we op zoek gegaan naar de juiste tools. Vanuit onze ervaring met dit soort projecten wisten we al snel wat mogelijk goede opties waren. Daarom hebben wij gekozen voor de volgende oplossingen:

Storyblok: headless en SaaS

Wij hebben voor Pode voor een headless CMS gekozen omdat we gebruik wilden maken van de grenzeloze creativiteit de deze oplossing biedt. Ook was het in het geval van Pode belangrijk dat we data vanuit meerdere bronnen, zoals de stoffen en kleuren van meubels, konden tonen. Met een headless CMS is dat makkelijk te realiseren.

Storyblok was in onze optiek een uitstekende keuze om Pode.eu op te bouwen. Dit headless SaaS CMS is makkelijk te implementeren en biedt veel flexibiliteit voor integraties en API’s. Ook geeft Storyblok veel ruimte om maatwerk toe te passen. Veel headless opties bieden in meer rigide en gesloten systeem waardoor je beperkt aanpassingen kunt maken. Voor ons was het essentieel dat er geen restricties waren.

Ook voor content editors biedt Storyblok een aantal voordelen. Het is namelijk mogelijk om in realtime de aanpassingen die je in het CMS maakt, te zien in de front-end. Als je de pagina opent, krijg je naast de editing tool een live preview van de website te zien. Zo blijft de focus op de ervaring die de bezoeker krijgt en is het eenvoudig om foutjes in de opmaak te herkennen.

Pode | iO

Next.js: eindeloze creativiteit met topprestaties

Het eerdergenoemde front-end framework React is in essentie een UI library waarmee je mooie en moderne UI’s kan bouwen. Helaas houden daar de mogelijkheden voor React op. Een website die op React gebouwd is, moet elke keer als de site geopend wordt de codebase downloaden, opbouwen en genereren. Dat is slecht voor de prestaties en voor SEO. Omdat we niet wilden inleveren op prestaties en functionaliteit van de website was dit voor ons geen optie.

Gelukkig is daar Next.js. Next.js is een compleet en volwassen framework ontwikkeld op basis van React, waarmee je echt productiewaardige oplossingen bouwt. Next.js is in feite een schil om React heen wat zorgt voor een snelle website en goede vindbaarheid met SEO. Verder voorziet Next.js in functionaliteiten als routing, image optimization en internationalization. Next.js biedt tevens de mogelijkheid om eenvoudig plugins aan het ecosysteem toe te voegen voor bijvoorbeeld micro-animaties en pagina transities.

Dit was precies wat wij nodig hadden om voor Pode een ongeëvenaarde merkbeleving te realiseren met alle functionaliteiten, topprestaties van een snelle website en goede vindbaarheid via SEO.

Conclusie

De combinatie van Storyblok en Next.js stelde ons in staat om alles wat we voor ogen hadden te bewerkstelligen. Dit komt vooral omdat wij de twee oplossingen als één van de beste headless CMS-en en één van de beste front-ends beschouwen. Een pluspunt is daarbij ook dat Storyblok en Next.js fijn op elkaar inspelen. Met de headless structuur van Storyblok konden we zonder restricties volop inzetten op de front-end. De focus op de front-end werd versterkt door de SaaS-eigenschappen van Storyblok. Het vernieuwde Pode.eu konden we met Next.js volledig in het teken zetten van beleving en inspiratie.

Wil je meer weten over Storyblok? Download dan de whitepaper 'Efficiënt content beheren en publiceren met Storyblok'.

Jordy van Raaij
Over de auteur
Jordy van Raaij
Technology & Innovation Strategist - iO

Vanuit een jarenlange passie voor technologie houdt Jordy zich bezig met het onderling verbinden van technologie, business, markttrends & concurrentie-inzichten. Liefst overziet hij de ontwikkeling van nieuwe, innovatieve businessmodellen en technologische roadmaps - om zo elke klant te helpen toekomstbestendig te worden én te blijven.

Gerelateerde artikelen

Blijf op de hoogte. Schrijf je in op onze nieuwsbrief

  • Laat je inspireren: onze strategen, technologen en creatievelingen delen hun kennis en inzichten.

  • Blijf up-to-date: ontvang relevante content over merkstrategie, bedrijfstransformatie, digitale ecosystemen of data-intelligentie.

  • Mis niks: ontdek onze nieuwe cases en blijf op de hoogte van onze laatste ontwikkelingen.