Gjensidiges designsystem i Enonic med SSR

Gjensidige holdt nylig en presentasjon på Enonic-kontoret, hvor de presenterte sitt innovative designsystem og integrasjonen av dette i Enonic-plattformen.

I dette tilhørende blogginnlegget forteller Bobby Westberg, fagleder for frontend i Gjensidige, og Thorstein Thorrud, arkitekt og utvikler på teamet, om reisen med å implementere Gjensidiges nye bedriftsidentitet i deres digitale plattformer ved hjelp av Enonic.

Se presentasjonen her:

Introduksjon til Gjensidige

Gjensidige er Norges største forsikringsselskap med en prestisjefylt historie på over 200 år. Med mer enn 4000 ansatte i syv land er deres teknologiteam en robust enhet på 350, som arbeider med ulike aspekter fra kjerneforsikringssystemer til frontend-applikasjoner.

Drømmen og realiseringen

Reisen deres begynte rundt 2019. Gjensidige hadde en visjon om en helt ny måte å integrere deres spesiallagde løsninger som Enonic levering og innlogging med et React-basert designsystem. Gjensidige ønsket et system hvor alle team, fra webapplikasjonsutviklere til CMS-integratorer, kunne jobbe sammen uten å trenge et CMS-eksklusivt designsystem.

I dag er denne visjonen en realitet, som støtter over 2000 sider på flere språk og håndterer millioner av brukerinteraksjoner årlig.

Utviklingen av designsystemet

Designsystemet deres var opprinnelig en enkel CSS-fil, men har utviklet seg til å bli ‘Builders Core’, et omfattende React-basert bibliotek. Det brukes av omtrent 150 utviklere, som sikrer konsistens, ytelse, tilgjengelighet og brukervennlighet på tvers av deres digitale tilstedeværelse.

Dette systemet gir Gjensidiges designere og utviklere muligheten til å kommunisere effektivt og opprettholde deres bedriftsprofil på tvers av ulike applikasjoner og nettsteder.

Den tekniske ryggraden: Builders Platform

Builders-plattformen er et sett med mikrotjenester som oppretter og drifter redaksjonelle sider for Gjensidige-domener. Det er en monorepo driftet på GitHub og levert til deres skyplattform GAP. Den består av viktige komponenter som webserveren (Enonic), CMS-et Content Studio, serverside-renderede React-komponenter, serverside-bildekomprimering, Varnish-cache og mye mer.

Dette oppsettet muliggjør sømløs integrasjon av redaksjonelt innhold med designsystemet.

Implementeringen av den nye bedriftsidentiteten

Tidlig i 2022 gjennomgikk Gjensidige en større redesign, som krevde en overhaling av deres designsystemkomponenter. Utfordringen var å støtte det nye designet samtidig som de opprettholdt eksisterende løsninger.

De løste dette ved å slå sammen komponenter til en enkelt NPM-pakke og implementere tekniske forbedringer som Vite bundler-integrasjon og Tree-shakable kode.

Migrering og distribusjon

Gjensidiges migreringsstrategi innebar bruk av funksjonsswitcher i deres Views API og Content Studio, slik at de kunne bytte komponenter som ble rendret basert på det nye designsystemet.

Denne tilnærmingen gjorde det mulig for redaktører å bygge nye sider samtidig som de opprettholdt de nåværende, noe som førte til en jevn overgang til det nye designet på alle deres Enonic-sider.

Resultater og lærdommer

Etter migreringen så Gjensidige betydelige forbedringer i deres Siteimprove-tilgjengelighetspoeng, som økte fra over 80 til over 90 %. Deres karbonutslippsscore og Lighthouse-rapport reflekterer også effektiviteten og bærekraften til deres plattform.

Denne reisen har ikke bare forbedret deres digitale tilstedeværelse, men også forsterket viktigheten av et sammenhengende og tilpasningsdyktig designsystem i en stor organisasjon.

Q&A Høydepunkter

Under Q&A-en adresserte Gjensidige flere viktige punkter:

• Data og kontrollere: De opprettholdt datakonsistens under migreringen samtidig som de oppdaterte kontrollere for å imøtekomme nye design.
• Figma og Storybook: Deres designtokens stammer fra Figma, som mates inn i deres Storybook, som fungerer som sannhetskilde.
• Enonic-installasjoner: Hvert land opererer på separate Enonic-installasjoner, alle selvdriftet på Kubernetes i Azure.

Oppsummert er Gjensidiges integrasjon av et nytt designsystem i Enonic et bevis på deres forpliktelse til innovasjon, effektivitet og brukeropplevelse. Denne reisen har satt en ny standard for å håndtere digitale identiteter i store organisasjoner.