"Min side" for 6000 studenter på 5 VID-campuser

Frontkom er et digitalt byrå som spesialiserer seg på utdanningssektoren, og bygger nettsider for universiteter og lignende institusjoner.

Nå har de bygget en "Min side"-selvbetjeningsløsning med Enonic, React og TypeScript for VID-studenter. VID er et spesialisert universitet som tilbyr 60 studieprogrammer på bachelor-, master- og PhD-nivå. Universitetet betjener 6000 studenter og har 600 ansatte fordelt på fem fysiske campus og ett virtuelt campus.

Frontkom holdt nylig en presentasjon på Enonics kontorer, hvor seniorrådgiver Per André Rønsen og utvikler Zahar Pyrohov viste oss løsningen.

Se opptak (på engelsk):

Hva studentene trenger

Ved refleksjon over studentlivet er det mange hensyn å ta når man starter på en ny campus. Ved VID har studentene fremhevet flere utfordringer.

For det første er det plattformoverbelastning. Studentene blir overveldet av ulike plattformer for informasjonsdistribusjon, inkludert VID-portalen, Canvas, meldingsplattformen, TimeEdit for timeplaner, Nettskjema for skjemaer, Inspera, ServicePortalen og Sikresiden. Denne mengden plattformer kan være overveldende og lite tiltalende for studentene å navigere.

For det andre er det irrelevant informasjon. Studentene opplever en overflod av informasjon, hvor mye ikke angår dem individuelt. Å håndtere dette innebærer å filtrere ut unødvendig innhold for å gjøre relevant informasjon mer tilgjengelig.

Til slutt er det problemet med dårlig timing. Studentene trenger tidsriktige oppdateringer om viktige saker som praksisplasser og eksamener. Tidspunktet for når denne informasjonen presenteres er avgjørende, men utfordrende å håndtere på tvers av de ulike plattformene.

Ideen om en "Min side"

De ansatte ved VID kom opp med en innovativ løsning for å håndtere utfordringene studentene står overfor: "Min side". Denne løsningen har som mål å forenkle studentlivet ved å konsolidere informasjon og strømlinjeforme tilgangen.

Prosjektmålet var å bistå studentene under deres onboarding-prosess og gi et omfattende verktøy gjennom hele deres tid ved VID. Min side integrerer informasjon fra alle eksisterende plattformer til ett sentralisert sted, noe som eliminerer behovet for flere pålogginger.

I tillegg tilbyr systemet personalisering ved å filtrere informasjon basert på hver students studieprogram, studieår og campuslokasjon, enten de er i Bergen, Oslo eller andre steder. Denne skreddersydde tilnærmingen sikrer at studentene mottar relevant informasjon, noe som gjør deres akademiske opplevelse mer håndterbar og effektiv.

Hva VID ønsket

For å bygge Min side mottok Frontkom først spesifikasjoner fra kunden, som ble presentert kortfattet i en liten lysbildefremvisning. Som et teknisk team satte Frontkom pris på denne tilnærmingen, da den ga klare mål samtidig som de kunne være involvert i implementeringsdetaljene.

Spesifikasjonene inkluderte nøkkelbeslutninger tatt på institusjonsnivå for å sikre konsistens på tvers av ulike prosjekter. Disse inkluderte bruk av Enonic XP som grunnplattform, et strategisk og modent valg som muliggjorde strømlinjeformet teknisk integrasjon.

Sikkerhet og samsvar ble prioritert, sammen med et mobil-først design for å sikre tilgjengelighet. Kunden vektla viktigheten av et brukervennlig system med intuitiv navigasjon og lettforståelige grensesnitt. De ga også høyoppløselige wireframes og mock-ups, som var uvurderlige for å forstå prosjektets retning fra starten.

Arkitektur

Arkitekturen til VID Min side involverte en enkel app som kommuniserte med flere datakilder. Frontkoms prosess startet med interne møter for å bestemme den beste arkitektoniske tilnærmingen. Det første diagrammet fra disse møtene indikerte ulike datakilder.

Den første tilnærmingen som ble vurdert var å behandle Enonic XP som bare en annen datakilde sammen med FEIDE for autentisering, FS for studentinformasjon, TimeEdit for timeplanlegging, Canvas for innboksmeldinger osv. Denne metoden ville inkludere et mellomliggende integrasjonslag (REST-API) og en lett frontend. Denne tilnærmingen var levedyktig fordi lignende integrasjoner hadde blitt vellykket implementert for andre universiteter, om enn ikke på XP.

Den andre tilnærmingen var mer Enonic-sentrisk, og brukte Enonic XP som applikasjonsplattform på en headless måte. Dette stemte bedre med VID Universitets digitale strategi. Teamets erfaring med å bygge mange Next.js-applikasjoner gjorde det til et praktisk valg for frontenden.

Det tredje alternativet involverte en fullstack-implementering innenfor Enonic XP. Dette var tiltalende fordi Enonic XP tilbød omfattende funksjonalitet ut-av-boksen, noe som forenklet prosessen ved å eliminere behovet for ekstra servere og DevOps-prosesser.

Til syvende og sist var avgjørelsen mellom disse tre tilnærmingene, hver med sine fordeler basert på tidligere integrasjoner, samsvar med digital strategi og enkel implementering.

Tsup

Thomas Sigdestad, CTO i Enonic, introduserte en fjerde arkitektonisk tilnærming, basert på Tsup, en enkel og rask måte å bunte TypeScript-biblioteker. Dette var en hybrid av den andre og tredje tilnærmingen, og som et kompromiss tilbød den flere fordeler.

Den primære fordelen fra et front-end-perspektiv var betydelig raskere hot reloading, spesielt ved bruk av TypeScript – opptil 15 ganger raskere. Denne tilnærmingen tillot også håndtering av mye av logikken i Next.js, noe som gjorde autentisering mer sentralisert og håndterbar.

Enonics proaktive veiledning og støtte i denne prosessen ble sterkt verdsatt, et nivå av assistanse som ikke ofte sees med andre open-source CMS-plattformer. Denne samarbeidsorienterte tilnærmingen guidet til slutt avgjørelsen og implementeringen, og utnyttet styrkene til både Enonic XP og Next.js samtidig som effektivitet og enkel utvikling ble sikret.

Frontend: Slik ser det ut

Utviklingsprosessen for VID Min side gikk jevnt med støtte fra Enonic, som muliggjorde rask fremdrift. Parallelt begynte teamet å prototypere ved bruk av Vercel for drift. Denne tilnærmingen fasiliterte raske iterasjoner på UX og UI, og muliggjorde sanntidstesting og justeringer basert på brukertilbakemeldinger. Etter å ha raffinert prototypene, integrerte teamet det endelige designet i Enonic.

Utviklingsstrategien med kunden vektla prioritering av de mest kritiske komponentene først, spesielt integrasjonene. Denne fasevise tilnærmingen sørget for at essensielle funksjonaliteter ble adressert før de utvidet videre.

Min side-dashbordet tilbyr et brukervennlig grensesnitt designet for å strømlinjeforme studentaktiviteter. Det starter med en personlig hilsen, "God ettermiddag, Morten Midtveis," skreddersydd for en typisk student som har vært ved VID i et par år. Hoveddashbordet inneholder "hovedoppgaver," som er de mest brukte verktøyene og lenkene, sammen med en oppgaveliste presentert i et trekkspillformat for enkel håndtering.

Utviklerne spilte en betydelig rolle i utformingen av UX, og brakte en praktisk og effektiv tilnærming til designet. Denne praktiske involveringen tillot dem å finjustere grensesnittet, og sikre at det var rett frem og funksjonelt.

Når man ruller nedover, finner brukerne sin personlige timeplan for dagen, hentet fra TimeEdit, og deres innboks, hentet fra Canvas. Hendelser og nyheter spesifikke for hver campus administreres av redaktører gjennom Content Studio, noe som muliggjør målrettet informasjonsdistribusjon. Dashbordet inkluderer også en meny med ulike alternativer, effektivt håndtert av Content Studio, og en seksjon for alle de essensielle verktøyene.

Spesiell oppmerksomhet ble gitt til onboarding-prosessen for førstegangsbrukere, som tok opp potensielle problemer som forsinkelser i brukerautentisering aktivering. Denne nøye vurderingen sikret en jevn førsteopplevelse for nye studenter.

Når det gjelder onboarding, for å sikre en jevn prosess her, ble det utviklet en interaktiv veiviser. Når studentene får tilgang til plattformen for første gang, guider denne veiviseren dem gjennom oppsettet, og gir kun den mest essensielle informasjonen. Imidlertid ble det klart at en betydelig mengde informasjon måtte gis før brukerne kunne få full tilgang til dashbordet. Denne trinnvise tilnærmingen hjalp med å strømlinjeforme den innledende opplevelsen og sikret at studentene hadde alle nødvendige detaljer konfigurert for å få mest mulig ut av plattformen fra starten.

Brukertilbakemeldinger

Etter å ha avduket VIDs Min side for brukerne og etter den offisielle lanseringen, var tilbakemeldingene overveldende positive. Kunden uttrykte stor tilfredshet og lettelse over plattformens mottakelse. Studentene satte pris på konsolideringen av flere plattformer til én, med kommentarer som "Dette er et verktøy vi har savnet," som fremhevet plattformens nytte og bekvemmelighet.

En bemerkelsesverdig funksjon var det integrerte autentiseringssystemet. Når studentene logget inn på Min side, ble de automatisk logget inn på flere andre plattformer også, noe som tillot sømløs tilgang selv når de navigerte til eksterne nettsteder.

Ved VID inkluderte spesifikk tilbakemelding ros for Enonics tilgangskontroll og brukervennligheten av Content Studio. Redaktørene fant plattformen intuitiv, og krevde minimal opplæring på grunn av velutformede maler.

VID Min side er nå live på minside.vid.no, og har nylig blitt lansert uten rapporterte problemer. Den driftes på Enonic, og den generelle responsen har vært svært positiv.

FEIDE-integrasjon

Nå til det mer tekniske.

Den første integrasjonen var med FEIDE (sikker pålogging og datadeling i utdanning og forskning), ved å bruke OIDC ID-leverandøren fra Enonic Market. Prosessen med å implementere autorisasjon gjennom FEIDE var rask og møtte alle sikkerhetskrav. De viktigste oppgavene involverte riktig konfigurering av leverandøren, justering av tjenesten på FEIDE-siden og å sette riktige tillatelser for innholdet.

Fra FEIDE mottok Frontkom grunnleggende data som navn og e-post til studentene. Imidlertid er det viktigste attributtet levert av FEIDE den unike identifikatoren. Denne identifikatoren er garantert unik på tvers av hele utdanningssektoren, og utgjør et essensielt element for vår integrasjon.

Felles Studentsystem

Den andre integrasjonen var med FS (Felles Studentsystem), et sentralt studentinformasjonssystem for høyere utdanning i Norge. For denne integrasjonen brukte Frontkom GraphQL API.

Gjennom denne integrasjonen mottok Frontkom omfattende data, inkludert studentenes startdatoer, programdetaljer, gruppe- og klasseinformasjon, og kursregistreringer. I tillegg ga FS detaljerte data om alle programmer, kurs og campus ved VID.

For å identifisere studentene brukte Frontkom den unike identifikatoren fra FEIDE, som viste seg å være svært nyttig. Denne integrasjonen tillot Frontkom å hente all nødvendig studentinformasjon sømløst, og sikret nøyaktige og oppdaterte data på tvers av VID Min side.

Andre API-er

Deretter integrerte Frontkom med TimeEdit, ved å bruke et SOAP-basert API for å lagre unike individuelle timeplaner for hver student. For identifikasjon brukte Frontkom attributter fra FEIDE.

Tilsvarende brukte Frontkom REST API-et for Canvas for å motta meldinger og varsler fra ansatte.

I stedet for direkte autorisasjon for hver ressurs, benyttet Frontkom FEIDE. Denne tilnærmingen tillot brukerne å få samtidig tilgang til både TimeEdit og Canvas uten å kreve ekstra pålogginger.

Bruk av Enonic

Frontkom utnyttet de standard funksjonene til Enonic for VIDs Min side-prosjekt, inkludert sider, deler, oppsett, maler, tjenester og oppgaver. De utnyttet også Enonics robuste innholdsforvaltningskapabiliteter, som ga kunden fleksibilitet til å lage og tilpasse nettstedets innhold og struktur etter behov.

Enonics funksjoner inkluderte automatisk menyoppretting, planlagt innholdspublisering og rike tekstområder, som muliggjorde en WYSIWYG (What You See Is What You Get) opplevelse for redaktører. Dette brukervennlige grensesnittet krevde minimal opplæring, et punkt som ble fremhevet av positive tilbakemeldinger fra redaktørene ved VID.

Personalisering

Som etablert i begynnelsen, var hovedmålet med VIDs Min side-prosjekt å organisere informasjon for studentene effektivt. For å oppnå dette ble hver innholdstype – enten det var oppgaver, nyheter, artikler, arrangementer, landingssider, skoleinformasjon eller administratormeldinger – segmentert basert på grupper av studenter.

Segmentering ble bestemt av ulike faktorer, inkludert campus, studieår, programmer, kurs, klasser og grupper. Denne tilnærmingen sikret at hver student mottok relevant og skreddersydd informasjon, noe som forbedret deres generelle opplevelse og engasjement med plattformen.

Utfordringer

Under utviklingen av VIDs Min side møtte Frontkom flere utfordringer. Fire sentrale utfordringer skilte seg ut:

1. Treg sideinnlasting: I starten lastet sider sakte fordi systemet behandlet data i sanntid, noe som forårsaket forsinkelser på flere sekunder. Frontkom adresserte dette ved å implementere lazy loading og starte bakgrunnsprosesser for fremtidige studentoppføringer.
2. Personalisering av innhold: Personalisering av innhold for studentene krevde betydelige serverressurser, noe som førte til forsinkelser i sideinnlastingen. Løsningen var å bruke Enonic cache-biblioteket for å lagre menyer, noe som reduserte belastningen på serveren og forbedret ytelsen.
3. Ustabilitet med GraphiQL for FS: GraphiQL API-et for FS var fortsatt under testing og forbedring, noe som forårsaket ustabilitet på grunn av pågående endringer. Frontkom avbøt dette ved å lagre nylige brukerdata i Enonic som en cache, og ga en mer stabil og pålitelig datahentingsprosess.
4. Personalisert data for ansatte: Mens ansatte kunne bruke FEIDE for autorisasjon til Min side, lagret ikke FS deres data. Frontkom løste dette ved å bruke Groups API fra Sikt, noe som muliggjorde personlig datatilgang for ansatte.

Disse løsningene bidro til å overvinne utfordringene, og sikret en mer effektiv og pålitelig plattform for både studenter og ansatte ved VID.

Fremtidig teknisk utvikling

Frontkom planlegger å lage en engelsk versjon av VID Min side-portalen. Dette vil bli mulig ved bruk av lag-funksjonaliteten i Content Studio, som støtter flere språk ved å tillate oppretting av språklag for prosjekter.

I tillegg har Frontkom som mål å forbedre kommunikasjonen med studentene ved å implementere push-varsler. De første stegene for dette har allerede blitt tatt, da prosjektet ble bygget som en progressiv webapplikasjon.

Til slutt har Frontkom til hensikt å introdusere nye funksjoner for å forbedre studentengasjement. Disse funksjonene vil inkludere avstemningssystemer, undersøkelser og tilbakemeldingsmekanismer. Teamet jobber for øyeblikket med å integrere Nettskjema-API, et verktøy som gir skjemaer og undersøkelser, for å lette disse nye funksjonalitetene.