Fra strategi til visuelt design
Martin Vikesland

• Strategi og brukeropplevelse
• Strategi (The Boston Consulting Group)
• Forskning og innovasjon (Norges forskningsråd)
• Strategi og innovasjon (Handelshøyskolen BI)
• MSc Strategy & International business
• Siviløkonom

”…en praktisk guide i 6 steg”

Strategien må gjennomsyre
nettstedet!

Steg 1: Forankrede forretningsmål

Steg 1: Forankrede forretningsmål
Webstrategi

Steg 1: Forankrede forretningsmål
Posten vil... Juni 2006
Fokusintervjuer
Konseptuelle føringer
Innspill til informasjonsarkitektur og kundeopplevelse

Steg 1: Forankrede forretningsmål
Webstrategi
 Likestilt salgskanal
 Informasjonskvalitet Businesscase
 Økt relasjonsbygging
 Økt grad av påvirkning Posten vil... Juni 2006
Fokusintervjuer
”Posten vil..”
Konseptuelle føringer
Innspill til informasjonsarkitektur og kundeopplevelse
”konseptuelle føringer”

Steg 1: Forankrede forretningsmål
• Send ut oppsummering til ”eiere av
dokumentene”
• Samle alle til et felles møte med
gjennomgang av målene
• Jobb i fellesskap ”på veggen”
• Noe som mangler? Har noe
tilkommet? Er noe ikke gyldig
lenger? Noe irrelevant?
• Tydeliggjør utydeligheter (”Hva
menes med dette målet…”)

Steg 2: Mål for brukeropplevelse

Steg 2: Fra forretningsmål til mål for
brukeropplevelse
Innhold og ”Hva man skal lage”
funksjonalitet
Forretningsmål
For nettstedet
Mål for ”Hvordan man skal lage
brukeropplevelse
det”

For hvert forretningsmål (delmål), spør:
”Hvordan må kunden
oppleve det å besøke
nettstedet for at målet
skal oppnås..?”

Steg 2: Fra forretningsmål til mål for
brukeropplevelse
Posten: brukeropplevelse relatert til salgsmål
 “Jeg må spare tid og eller penger når jeg bestiller på nett og det må være
convenient”
 ”Hvis jeg ikke kan jeg kjøpe det på nett, må nettet gjøre at jeg sparer
tid/ressurser utenfor nett!”
 ”Produktene som tilbys meg på nett må gi merverdi å kjøpe på nett”
 ”Jeg finner kun de produktene som gir en merverdi for meg å kjøpe”
 ”Jeg kan forklare mitt behov med mine ord for å finne postens produkter”
 ”Innlogging er mitt valg og gir meg mye”
 ”Jeg ser enkelt forskjell på info og kjøpsmulighet”
 ”Jeg får kun kjøpstilbud på ting det er tid/pengefordel å gjøre på nett”
 ….

Steg 2: Fra forretningsmål til mål for
brukeropplevelse
Innhold og
funksjonalitet
Forretningsmål
For nettstedet Kundenes
Mål for behov og
brukeropplevelse ønsker

Steg 2: Fra forretningsmål til mål for
brukeropplevelse
• Hvem er de ulike kundegruppene?
• Hva kjennetegner dem?
• Når bruker de nettstedet?
• Hva bruker de nettstedet til?
• Hva ønsker de seg av nettstedet?
• Hvordan ønsker de å oppleve nettstedet?
• Benytte alt fra kartlegging internt til
omfattende kundeundersøkelser
(statistikk, markedsanalyser,
spørreundersøkelser, intervjuer etc..)

Steg 2: Mål for brukeropplevelse
Det er enkelt å fullføre en oppgave eller
1 tjeneste i konsernportalen
2 Det er enkelt å finne frem på
konsernportalen
Jeg blir hørt og Posten møter meg
3 personlig
Informasjonen jeg får på Postens
4
Konsernportal er korrekt, kort og konsis
5 Kunden velger kundeforhold
6 Ansatte som skal realisere informasjon og tjenester
skal oppleve at systemet er lett å bruke / møter behov

Design innhold og
…for å oppnå dette
funksjoner for dette…
 Likestilt salgskanal
 Informasjonskvalitet
 Økt grad av relasjoner
 Økt grad av påvirkning

Steg 3: Utvikle målbilder

Steg 3: Utvikle målbilder
 Skisser på papir som viser hvordan mål for
brukeropplevelse / forretningsmål fremstår
 Utvalg av kjernesider med reelt innhold
 Involverende ”tegneprosess”
 Diskusjonsgrunnlag for å skape riktig retning og
få på plass grunnleggende prinsipper
(navigasjon, interaksjon)
 Gjerne 2-3 iterasjoner på målbildene

Steg 3: Utvikle målbilder
Enkelt å komme i kontakt
God kundeservice
- Lojale kunder
– Færre telefoner
Forutser hva
kunden skal
gjøre
- Lojale
kunder
Oversikt
over
overskudd
– Mersalg

Øvelse: Gå gjennom elementene
på eget nettsted. Hvor mange
kan relateres direkte til et mål?

Steg 3: Utvikle visuelt design i prototype

Steg 4: Utvikle visuelt design i prototype
 Ta frem prototype basert på målbilder med
tilhørende prinsipper
 I den bredden og dybden som er nødvendig -
ofte et sett av maler: 5-10 grunnmaler som
prototypes
 Parallelt arbeides det med komplett arkitektur
 Ta frem og godkjenne sider/maler sekvensielt

Produktside presenteres ved den viktigste
informasjonen i punktlister. Innholdet skal
være kort, konsis og gjøre det lett for brukeren
å avgjøre om han har funnet riktig produkt
Det inkluderes en kort tekst om
kjøpsinformasjon slik at brukeren har de
viktigste informasjonen om hvordan han vil Behovshjelper/veiledning
motta produktet. flyttes til høyre kolonne på
produktsidene. Her skal det
foreslås andre produkter
som er relaterte. Produktene
må beskrives gjennom behov
slik at brukerne skal kunne ta
et valg etter sitt eget
bruksbehov.
De vanligste spørsmålene
som stilles ang produktene
blir lagt inn slik at de blir lett
tilgjengelige for brukeren.
Støtteinformasjon presenteres i fanestruktur.
Priser får høyeste prioritet og er den fanen
som står som åpen når produktsiden åpnes.

Steg 5: Beslutning på visuelt design

Steg 5: Beslutning på visuelt design
Godkjenning av interaksjonsdesign Forretningsmessig godkjenning
Godkjenning
Oppfylles forretningsmål?
Oppfylles brukermål?
Godkjenning/til justering
Interaksjonsdesign
Interaksjonsdesig
Interaksjonsdesign
n
Brukerbehov og strategi
Wireframes med reellt innhold
Grafisk godkjenning Grafisk design
Grafisk design
Produksjon av grafisk design
Utvikling av designmanual
Front end-koding Front end
HTML
CSS
Javascripting
Implementering
Implementering
Innholdsprod. /revisjon
Implementering av maler

Steg 6: test på kunder
Steg 5: Beslutning på visuelt design

Steg 6: Test på vaskeekte kunder og justér!
K Brukerne lette først og fremst
øverst på siden for å finne
lenken tilbake til
produktgruppe.
J Positivt at prisene
fremheves. En bruker sa
at han ikke stolte på
salgsargumenter, men
ønsket å sjekke prislister
og bruke kalkulatorer.
K Bør fremheve hvilke
egenskaper som er
annerledes under relaterte
produkter.
For eksempel
0-39: Frimerker
40-199: Frankeringsmaskin
200+: Massebrev

6 lærdommer
 Strukturert start - unngå reversering og ”overraskende
mål fra siden”
 Behold kunde/brukerperspektivet i alle faser, ikke minst
når man jobber med forretningsmål
 Mål som ikke representeres med rett brukeropplevelse
er døde mål - ta fram mål man kan designe etter
 Tidlige målbilder skaper de beste diskusjonene!
 Skille beslutninger. Beslutt forretningsmessig og grafisk
design hver for seg
 Test, test, test

Takk for meg!
martin@netliferesearch.com