Innholdsdrevet Design

Din nye nettside eller app skal ha et design du kan være stolt av

center narrow-body full-width bg-yellow

Kontakt oss
 

En metodikk for suksess

Nøkkelen til et godt design er en gjennomtenkt designprosess. Gjennom 15 år har vi utarbeidet en designmetodikk som gjør designprosessen spennende og skaper resultater, enten det gjelder nettsider eller mobile apper.

Vår designprosess er delt inn i tre hovedfaser:

  • Innsikt og analyse
  • Innholdsstrategi og interaksjonsdesign
  • Grafisk design
Designprosess

1. Innsikt og Analyse

Workshop med prosjekteiere

I første workshop gjør vi ekspertintervjuer av alt fra toppledelse til kundeservice.

Vi diskuterer:

  • Hva er organisasjonens digitale målsetninger?
  • Hvem er brukerne, partnere og “konkurrenter”?
  • Hvordan brukes dagens kommunikasjonskanaler?

Leveranse: Konkrete digitale målsetninger og målekriterier

Møte hos Frontkom

Datainnsamling

Med konkrete målekriterier setter vi nå opp tracking av eksisterende nettsted for å skaffe den nødvendige innsikten om hvor godt disse oppfylles i dag. Slik får vi et godt sammenligningsgrunnlag for det videre arbeidet.

Dette inkluderer for eksempel tilbakemeldingsskjemaer, måloppsett i Google Analytics og brukerundersøkelser via e-post.

Leveranse:

  • Dashboard med kontinuerlig oppdaterte nøkkeltall (KPI)
  • Liste over anbefalte tiltak
Analyse dashboard spørsmål

Evaluering av eksisterende designprofil og frontend

Sammen går vi gjennom dagens designprofil og retningslinjer for markedsføring. Videre ser vi på faktiske eksempler for å se i hvilken grad designprofilen etterleves, og hvordan materialet fremstår i dag.

Deretter gjør vi en gjennomgang av deres eksisterende nettsted, for å tydeliggjøre hvilke elementer som bør forbedres. 

Leveranse:

  • Anbefalte tiltak for å forbedre designprofil og retningslinjer
  • Rapport på brukeropplevelse, Ytelse/hastighet, SEO og sikkerhet
Evaluering av nettside

Gjennomgang av eksisterende innhold

Vi gjør oss kjent med alle typer innhold i dagens nettsted, ved å se på både frontend og backend (admin), samt kjøre en automatisert gjennomsøk av nettsiden (scrape) hvis det er snakk om svært mye innhold.

Leveranse: Basert på gjennomgangen, setter vi opp en delt oversikt med elementer som:

  • Innholdstype
  • Målgruppe
  • Kvalitet
  • URL-logikk
  • Egnet for eksport m.m.

Dokumentet brukes til videre innholdsarbeid og teknisk oversikt.

gjennomgang av dagens innhold

Workshop: Kjernemodellen

Kjernemodellen er en metodikk for innholdsdrevet design. Målet er å gjøre nettstedet mest mulig brukervennlig! 

Metodikken gjør at vi løser de vanligste problemene sett fra et brukerperspektiv, for eksempel at brukeren finner ikke det han/hun leter etter eller at landingssider blir fylt opp med irrelevante elementer skaper frustrasjon

Kjernemodellen gjør at vi utvikler innhold som er:

  • Passende: Innholdet er rett både for organisasjonen og brukeren
  • Nyttig: Hensikten med hver side er tydelig
  • Brukersentert: Tenk som sluttbrukeren
  • Nødvendig: Slett unødvendig innhold!  
kjernemodell_mal

Aktiviteter i workshop

Frontkom workshop arbeidsmøte kjernemodellen
For all nøkkelsider:
  • Finne og definere kjernesider
  • Trafikk inn og ut til siden
  • Kjerneinnhold: sentrale landingssider
  • Prioritere elementer på siden

Workshopen utvides med et dedikert fokus på brukerreisen der det er relevant. Vi setter da opp en rekke målgrupper (eller personas), og diskuterer oss igjennom sluttbrukerens “kundereise”. Dette resulterer i en tidslinje som tydeliggjør brukerens potensielle frustrasjoner.

Leveranse:

  • Personas
  • Vurderinger for CMS-implementering
  • Wireframes av kjernesider

2. Innholdsstrategi og interaksjonsdesign

Wireframes

Wireframes (trådskisser) brukes for å prioritere rekkefølge, layout og innhold for ulike elementer på ulike sidemaler.

Dette arbeidet blir påbegynt i workshop og fortsetter i mer selvstendig arbeid.

Som regel gjør vi første wireframes for mobil, for å spisse fokuset mot nettstedets toppoppgaver.

Vi lager som regel en wireframe per sidemal, eller noen ganger flere, for å ta hensyn til ulike typer innhold. Et solid arbeid med wireframes er en effektiv måte å sikre at nettstedet oppnår hovedhensiktene.

For hver wireframe, vurderer vi også hvem som skal besørge innhold for siden, og hvem som skal vedlikeholde den og hvilken rolle siden har i organisasjonens digitale strategi.

Trådskisse - wireframe

Innholdsutvikling

I innholdsutviklingen er kundens fagkunnskap gull verdt, og som regel gjør kunden som gjør det meste av innholdutviklingen, f.eks skrive tekster. Frontkom setter rammer, hjelper til med verktøy og kvalitetssikrer arbeidet. Noen sentrale elementer i innholdsarbeidet er:

  • Stikkord: Enkelhet, lesbarhet, skannbarhet.
  • Format: Burde denne teksten vært en illustrasjon? En video?
  • Fokus: Kunne denne teksten henvendt seg til én målgruppe, og dermed vært kortere og mer presis?
  • Struktur og kategorisering: Kan vi forenkle kategoriseringen? Rettledning for universell utforming

Sidekart

En sidestruktur i et visuelt hierarki gir nyttig oversikt over “innholdstreet”.

Sidekartet gjenspeiles i både brødsmuler, meny og andre navigasjonselementer. Det kan også være nyttig innad i organisasjonen for å klargjøre ansvarsområder for ulike deler av innholdet.

Sidekart

Brukertesting

Nytt design testes med uerfarne brukere. Dette gir innsikt for nye designiterasjoner. Et typisk forløp, er at fem ulike personer er innom kontoret på samme dag. Vi gir noen konkrete oppgaver uten videre instruksjon, og lar brukeren selv prøve seg fram.

Eksempelvis: “Kontakt lederen for vann- og avløp” eller “Se siste video fra offentlige møter”.

brukertesting

3. Grafisk design

Stilplansjer og visuelle designforslag

Hva slags følelser skal merkevaren og løsningen gi brukeren? Vi enes om et stiluttrykk gjennom å sammenstille stilplansjer med inspirasjon.

Vi utarbeider helhetlige designforslag som viser ulike retninger vi kan gå i visuelt.

Leveranse: Ett eller flere designforslag av kjernesider

Stilplansjer

Visuelt design av sidemaler og blokker

Nettstedet består av ulike typer sider, men også av ulike typer gjenbrukbare blokker. Når designretningen er satt, designer vi ut disse, og klargjør de for en sidebygger i CMS.

  • Speile organisasjonens verdier og image
  • Lesbarhet på tvers av alle enheter
  • Fleksibilitet for fremtiden

Leveranse: Klikkbar prototype

iphone-wordpress

Designsystem

Et designsystem eller styleguide er en designprofil for web. Den er klikkbar, responsive og viser alle de viktigste designelementene.

Med godt dokumenterte klikkbare prototyper vedlikeholder vi frontenddesignet i en skalerbar arkitektur. 

Designsystem

Responsivt design

HTML og CSS utarbeides “mobil først” med brytningspunkter fra de minste skjermbreddene og trinnløst opp til nettbrett, og videre til desktop fullbredde. Dette speiles i utarbeidelse av både wireframes, visuelt design, og teknisk implementering. Resultatet er en 100% responsiv løsning som er gjennomtestet på alle skjermbredder.

CSS optimaliseres for ytelse også for eldre mobiler med dårlig nettilgang. Når det er nyttig, implementerer vi også Google sin Accellerated Mobile Pages-standard (AMP). Dette er nyttig for bedre visning av innhold på mobile flater ved Google-søk. Rent teknisk, struktureres CSS etter markedsledende prinsipper som gjenbrukbare Sass-moduler. Det sikrer at videreutvikling er effektivt, og at siden laster fortest mulig.

CMS-et tilpasser automatisk bildefilens størrelse til ulike kontekster, basert på blant annet skjermbredde. Frontend testes på 20 ulike nettlesere på PC, Mac, Android, iOS og Windows mobile.

Allershopping responsivt design

Universell Utforming

Tilgjengelighet er et perspektiv vi har med i alle faser. Det er likevel verdt å sette at tid til å gjøre vurderinger kun med tanke på Universell Utforming. Frontkom leverer utelukkende prosjekter som støtter Difi’s anbefalte standard (WCAG 2.1 AA). 

Underveis i utviklingen, gjør vi automatiserte og manuelle tester med skjermlesere, analyseverktøy og tester. Tidlig i designprosessen implementerer vi prinsippene for tillatte farger, kontraster, skriftstørrelser og dokumentstruktur. Videre gjør vi koding etter beste praksis for universell utforming.

Frontkom har et godt samarbeid med Difi rundt implementering av UU. Dersom kritieriene for UU endres i fremtiden, vil vi implementere endringene i tråd med nye forskrifter. Vår tolkning av kravene baseres på Difis 50 indikatorer for web.

universell utforming på web