Fjordland lykkes med Next.js og designsystem

Introduksjon

Fjordland er en anerkjent norsk merkevare eid 51 % av TINE-samvirket. De er spesielt kjent for sine ferdigretter, og deres merkeportefølje inkluderer Yoplait, Safari, Bremykt, Brelett og Kos.

TINE og Fjordland er for tiden i gang med en betydelig digital transformasjon. Etter å ha brukt Enonic som sitt CMS siden 2005, sto TINE og Fjordland overfor utfordringer knyttet til utdaterte prosesser, suboptimal teknologibruk og fragmenterte løsninger.

Med mange interne endringer og et ønske om modernisering besluttet TINE og Fjordland å investere i nye rammeverk som kunne tilby den beste opplevelsen for både utviklere og redaktører.

Utfordring

Etter hvert som årene gikk, ble TINEs digitale løsninger generelt – og Fjordlands spesielt – tungvinte og komplekse å vedlikeholde og utvikle. Dette skyldtes manglende fokus.

Videre var Fjordlands nettside ikke mobilvennlig – en kritisk mangel når over 80 % av brukerne besøker siden via mobile enheter. Fjordland-paraplyen inkluderte også fem forskjellige nettsteder bygget på ulike CMS-plattformer, hver med sitt eget byrå, design og funksjoner. 

Eksisterende rammeverk som Freemarker og Thymeleaf var dessuten utdaterte, noe som nødvendiggjorde en løsning for å samle alle merkene på én plattform. Med et fragmentert system og mangel på sentralisert kompetanse ønsket Fjordland å ta i bruk en mer langsiktig strategi for å utnytte styrkene på tvers av selskapet.

Løsning

For å møte disse utfordringene valgte Fjordland å implementere Next.js som sitt nye rammeverk gjennom den ferdige Next.XP-integrasjonen levert av Enonic. Denne løsningen ble kombinert med TINEs eget designsystem, KREM.

Valget av Next.js ble tatt for å oppnå den beste utvikleropplevelsen, slik at utviklerne kunne arbeide utelukkende med React og TypeScript uten behov for å vedlikeholde data. Dette ga også tilgang til et modent og pålitelig frontend-rammeverk med et stort utviklermiljø.

I implementeringen av den nye løsningen ble Next.js valgt for sin React-renhet, fleksibilitet og sterke utviklermiljø. Tailwind CSS ble brukt for stilisering. Next.js-applikasjonen driftes i Azure, mens Enonic kjører parallelt. Denne oppsetningen øker driftskompleksiteten noe, men gir betydelig fleksibilitet for Fjordland.

KREM er TINEs eget designsystem, utviklet for å standardisere UI-komponenter på tvers av alle merkevarer. Tidligere hadde TINE TIFF (TINE Frontend Framework), men dette var ikke vedlikeholdt og krevde modernisering. Med KREM har de nå “én kilde til sannhet” for design, som ikke bare gir et enhetlig utseende, men også støtter universell utforming og tilgjengelighet.

Designsystemet er basert på TINEs merkevarehåndbok, men har blitt utvidet for å dekke digitale behov som hover-effekter og interaktive elementer – områder som tidligere ikke ble imøtekommet.

Når det gjelder innhold, er alt sentralisert i Enonic. Den nye løsningen forenkler oppdatering og vedlikehold av produktdata på tvers av nettsteder, samt artikler og oppskrifter.

I redaktørgrensesnittet til Content Studio kunne redaktører tidligere gjøre endringer både gjennom innholdsskjemaet og den visuelle sidebyggeren. Nå er redigering utelukkende delegert til innholdsskjemaet, også for landingssider ved bruk av blokker. Denne forenklingen har gjort redaktøropplevelsen mer intuitiv.

Mens den tidligere redaktørordningen ga stor fleksibilitet, resulterte den ofte i kaotiske “frie tøyler”-situasjoner. Den nye tilnærmingen, som ofrer noe fleksibilitet, gir en mer strukturert og strømlinjeformet arbeidsflyt. Dette har økt produktiviteten og konsistensen, og gjort det enklere for redaktører å oppdatere og vedlikeholde innhold.

TINE har også etablert et designsystemforum som møtes hver 14. dag. Her diskuterer nettsideeierne og redaktørene behov, deler erfaringer og samarbeider om nye funksjoner. Utviklingen av nye komponenter, som for eksempel en karusell, har blitt godkjent på denne måten, da det sees på som relevant og nyttig på lang sikt for flere TINE-merkevarer.