Casestudie: philembassy.no (plattformoppgradering, egenutviklet rammeverk og mobilførst)

Klienten

Den filippinske ambassaden i Norge representerer Filippinene overfor fem nordiske land: Danmark, Finland, Island, Norge og Sverige. philembassy.no er ambassadens primære digitale kanal: kontaktpunktet for filippinere bosatt i Norden som trenger konsulatjenester, og for norske borgere som planlegger reise til Filippinene.

Tjenestetilbudet er bredt: passutstedelse og fornyelse, visum for utenlandske statsborgere, notarielle tjenester og juridisk attestering, balikbayan-programmet for den filippinske diasporaen, seaman's visa, sivilregistrering og løpende informasjon om bilateral relasjon mellom Norge og Filippinene. For mange av brukerne er nettsiden ikke valgfri lesning: den er stedet de går for å ordne noe praktisk og tidskritisk.

Oppdraget

Nettsiden hadde vært i drift siden 2007 på Drupal 7 med en layout designet for stasjonære skjermer. Ti år er lang tid på internett, og tre problemer hadde samlet seg opp:

Plattformen var utdatert. Drupal 7 er ikke kompatibel med Drupal 8: en oppgradering er i praksis en ny installasjon med full migrering av innhold, brukere og konfigurasjon. Det var nødvendig å gjøre det uansett, men det ga oss også anledning til å gjøre det riktig.

Nettsiden fungerte ikke på mobil. Over halvparten av all netttrafikk globalt kommer nå fra mobiltelefoner. For ambassadens brukere: filippinere bosatt i Oslo og andre norske byer som sjekker om passet er klart eller leter etter åpningstider fra telefonen, var den faste desktop-layouten en reell barriere. Google beveger seg dessuten mot mobile-first indexing, noe som gjør mobiloptimalisering til et synlighetsspørsmål i tillegg til et brukeropplevingsspørsmål.

Informasjonsarkitekturen var ikke tilpasset brukernes behov. En ambassanenettside er ikke en presentasjonsside: det er et arbeidsverktøy. Passregler, visumkrav og kontaktveier måtte struktureres slik at brukerne raskt finner akkurat det som gjelder dem, ikke scrolle gjennom lange generiske sider.

Løsningen

Groundwork: et egenutviklet rammeverk

I stedet for å legge et eksisterende tema over den nye Drupal 8-installasjonen, utviklet vi Groundwork (et modulært, mobilfirst front-end-rammeverk for Drupal 8) spesifikt for å løse behovene til philembassy.no og fremtidige prosjekter av samme type.

Groundwork er bygget med mobilfirst som arkitektonisk premiss fra første linje: grunntilstanden er en én-kolonners layout optimalisert for den minste skjermen, og kompleksitet legges til etter hvert som skjermbredden øker. Rammeverket definerer fem responsive bruddpunkter:

Gridet er bygget på CSS Flexbox med 12 kolonner og BEM-metodologi. Typografisystemet bruker modular scale og px2rem-konvertering for konsekvent og tilgjengelig tekstskalering. Byggprosessen er automatisert med Gulp: SCSS med autoprefixer, csscomb og sourcemaps.

Komponentbiblioteket: navigasjonsmenyer, skjemaer, accordions, dropdowns, tabeller, søkefelter, paginering og meldingsbokser, er alle utformet for berøringsskjerm og tilpasset Drupals standard markup.

Informasjonsarkitektur og interaksjon

Med Groundwork som fundament ble informasjonsarkitekturen bygget rundt ett prinsipp: brukeren skal raskt nå det som gjelder dem, uten å måtte lese gjennom innhold som ikke er relevant.

Forsidekort for direkte oppgavenavigasjon. Det første brukeren møter på forsiden er ikke en velkomstmelding eller en beskrivelse av ambassaden: det er en samling handlingskort som tar dem direkte dit de trenger å gå. Kortene er formulert som brukerens egne oppgaver, ikke som ambassadens tjenestestruktur:

• Renew your passport
• Check if you need a visa
• Report the birth of your child
• Apply for Dual Citizenship
• Passports Ready for Release
• Special Power of Attorney
• Guidelines for Au Pairs
• Contact the Embassy

En bruker som kommer til forsiden for å fornye passet sitt behøver ikke å forstå navigasjonsstrukturen, finne "Consular Services" og deretter "Passport": de klikker direkte på det som gjelder dem. Særlig viktig på mobil, der menunavigasjon i dype hierarkier er tungvint. Kortene er bygget med Groundwork-komponentene og skalerer naturlig fra ett-kolonners mobillayout til et rutenett på bredere skjermer.

Passregler etter søkertype: akkordion. Kravene varierer markant avhengig av hvem som søker: fornyelse av e-pass, fornyelse av gammelt pass, mindreårige, navneskifte ved ekteskap eller skilsmisse, nytt pass og tapt eller skadet pass har alle ulike dokumentasjonskrav. Vi strukturerte dette med ett akkordion per søkerkategori. Brukeren ser alle kategoriene på én gang, åpner kun den som er relevant, og slipper å scrolle forbi krav som ikke gjelder dem. Akkordionkomponenten er en del av Groundwork og fungerer fullt ut på berøringsskjerm.

Visumkrav etter land, med JavaScript-filtrering. Visumkrav for innreise til Filippinene varierer etter statsborgerskap og dekker 196 land. En alfabetisk liste ville vært ubrukelig. Løsningen er en nedtrekksliste der brukeren velger land og siden viser kun gjeldende informasjon. De nordiske landene er plassert øverst, adskilt fra den fulle alfabetiske listen. Alt innhold er forhåndsrendret i HTML. JavaScript håndterer visning og skjuling uten serverrunde-tur.

Kontaktskjema med avdelingsruting. Ambassaden mottar henvendelser på tvers av svært ulike saksfelt. Et skjema uten kategorisering ville gjort saksbehandling uhåndterlig. Skjemaet inneholder et obligatorisk kategori-felt med syv alternativer: pass, visum, attestering, sivilregistrering, dobbelt statsborgerskap, annet og nettsidetilbakemeldinger, som ruter hver henvendelse til riktig arbeidsflyt. Alle innsendinger lagres i databasen via contact_storage uavhengig av e-post, slik at ingenting kan forsvinne i et spamfilter.

Boknavigasjon for konsulatinnhold. Konsulatseksjonens sider er organisert som en Drupal-bok med en høyresidekolonne som alltid viser hele innholdsstrukturen og fremhever gjeldende side. Brukere kan navigere lineært med forrige/neste-lenker: nyttig for å lese gjennom krav i rekkefølge før en time.

Modulstakken

Drupal-installasjonen er satt opp med et gjennomtenkt sett kontribusjonsmomenter tilpasset ambassadens operative behov:

Kommunikasjon og skjemaer: contact_storage, captcha, recaptcha, smtp, formblock

Innholdspublisering: scheduler (planlagt publisering av kunngjøringer), views_slideshow (hjemmesidens bildekarusell), smart_trim (teasere i listevisninger), imce (filbehandling for ansatte), ckeditor_youtube, field_group, conditional_fields

Navigasjon og søk: menu_block, menu_link_attributes, search_autocomplete, search404, custom_search

SEO og synlighet: metatag, pathauto, redirect, sitemap, google_analytics

Ytelse og etterlevelse: advagg (CSS/JS-aggregering og minifisering), eu_cookie_compliance, extlink

Resultatet

philembassy.no er nå live på Drupal 8 med Groundwork som front-end-fundament. Prosjektet løste alle tre problemene det startet med: plattformen er oppgradert og vedlikeholdbar, nettsiden fungerer på alle skjermstørrelser, og informasjonsarkitekturen er strukturert rundt brukernes faktiske behov fremfor ambassadens interne organisasjonskart.

For en institusjon der mange brukere er i en tidssensitiv situasjon: de skal ordne et pass før en reise, søke om et visum innen en frist, eller melde en hendelse til konsulatet, er tilgjengelighet og klarhet ikke et estetisk spørsmål. Det er en del av tjenestekvaliteten.

Groundwork vil i tillegg danne grunnlaget for fremtidige Drupal-prosjekter og er bygget for å generaliserere utover dette oppdraget.

Merknader

Dette prosjektet ble utviklet under Noceda Media Lab: vårt tidligere navn. Fra 2017 opererer vi som Ibenta. John Filipstad (tidligere John Noceda) er utvikleren bak både philembassy.no og Groundwork-rammeverket.

Jobber du med et offentlig nettsted som trenger modernisering? Ta kontakt.