Fra strategi til visuelt design
-
Upload
martin-vikesland -
Category
Design
-
view
2.670 -
download
2
description
Transcript of Fra strategi til visuelt design
![Page 1: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/1.jpg)
Fra strategi til visuelt designMartin Vikesland
![Page 2: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/2.jpg)
• 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
![Page 3: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/3.jpg)
”…en praktisk guide i 6 steg”
![Page 4: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/4.jpg)
Strategien må gjennomsyrenettstedet!
![Page 5: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/5.jpg)
![Page 6: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/6.jpg)
![Page 7: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/7.jpg)
![Page 8: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/8.jpg)
![Page 9: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/9.jpg)
Steg 1: Forankrede forretningsmål
![Page 10: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/10.jpg)
Steg 1: Forankrede forretningsmål
Webstrategi
![Page 11: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/11.jpg)
Konseptuelle føringer
Innspill til informasjonsarkitektur og kundeopplevelse
Posten vil... Juni 2006
Fokusintervjuer
Steg 1: Forankrede forretningsmål
![Page 12: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/12.jpg)
Konseptuelle føringer
Innspill til informasjonsarkitektur og kundeopplevelse
Posten vil... Juni 2006
Fokusintervjuer
Webstrategi
”Posten vil..”
”konseptuelle føringer”
Businesscase
Likestilt salgskanal
Informasjonskvalitet
Økt relasjonsbygging
Økt grad av påvirkning
Steg 1: Forankrede forretningsmål
![Page 13: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/13.jpg)
• 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 1: Forankrede forretningsmål
![Page 14: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/14.jpg)
Steg 2: Mål for brukeropplevelse
![Page 15: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/15.jpg)
Steg 2: Fra forretningsmål til mål for brukeropplevelse
Forretningsmål
For nettstedet
Innhold og
funksjonalitet
Mål for
brukeropplevelse
”Hva man skal lage”
”Hvordan man skal lage det”
![Page 16: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/16.jpg)
For hvert forretningsmål (delmål), spør:
”Hvordan må kunden oppleve det å besøke nettstedet for at målet skal oppnås..?”
![Page 17: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/17.jpg)
Steg 2: Fra forretningsmål til mål for brukeropplevelse
“Jeg må spare tid og eller penger når jeg bestiller på nett og det må væreconvenient”
”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”
….
Posten: brukeropplevelse relatert til salgsmål
![Page 18: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/18.jpg)
Forretningsmål
For nettstedet Kundenes
behov og
ønsker
Innhold og
funksjonalitet
Mål for
brukeropplevelse
Steg 2: Fra forretningsmål til mål for brukeropplevelse
![Page 19: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/19.jpg)
• 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: Fra forretningsmål til mål for brukeropplevelse
![Page 20: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/20.jpg)
Det er enkelt å fullføre en oppgave eller tjeneste i konsernportalen
1
2 Det er enkelt å finne frem på konsernportalen
3Jeg blir hørt og Posten møter meg personlig
4Informasjonen jeg får på Postens Konsernportal er korrekt, kort og konsis
Kunden velger kundeforhold
Ansatte som skal realisere informasjon og tjenesterskal oppleve at systemet er lett å bruke / møter behov
5
6
Steg 2: Mål for brukeropplevelse
![Page 21: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/21.jpg)
Likestilt salgskanal
Informasjonskvalitet
Økt grad av relasjoner
Økt grad av påvirkning
Design innhold og funksjoner for dette…
…for å oppnå dette
![Page 22: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/22.jpg)
Steg 3: Utvikle målbilder
![Page 23: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/23.jpg)
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
![Page 24: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/24.jpg)
God kundeservice – Færre telefoner
Forutser hva kunden skal gjøre - Lojale kunder
Oversikt over overskudd – Mersalg
Steg 3: Utvikle målbilderEnkelt å komme i kontakt- Lojale kunder
![Page 25: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/25.jpg)
Øvelse: Gå gjennom elementene på eget nettsted. Hvor mange
kan relateres direkte til et mål?
![Page 26: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/26.jpg)
Steg 3: Utvikle visuelt design i prototype
![Page 27: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/27.jpg)
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
![Page 28: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/28.jpg)
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 motta produktet.
Støtteinformasjon presenteres i fanestruktur. Priser får høyeste prioritet og er den fanen som står som åpen når produktsiden åpnes.
De vanligste spørsmålene som stilles ang produktene blir lagt inn slik at de blir lett tilgjengelige for brukeren.
Behovshjelper/veiledning 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.
![Page 29: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/29.jpg)
Steg 5: Beslutning på visuelt design
![Page 30: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/30.jpg)
Steg 5: Beslutning på visuelt design
Godkjenning
Interaksjonsdesig
n
Grafisk design
Front end
Implementering
Godkjenning av interaksjonsdesign
Oppfylles forretningsmål?
Oppfylles brukermål?
Godkjenning/til justering
Interaksjonsdesign
Brukerbehov og strategi
Wireframes med reellt innhold
Grafisk design
Produksjon av grafisk design
Utvikling av designmanual
Front end-koding
HTML
CSS
Javascripting
Implementering
Innholdsprod. /revisjon
Implementering av maler
Interaksjonsdesign
Forretningsmessig godkjenning
Grafisk godkjenning
![Page 31: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/31.jpg)
Steg 5: Beslutning på visuelt design Steg 6: test på kunder
![Page 32: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/32.jpg)
Steg 6: Test på vaskeekte kunder og justér!
JPositivt at prisene fremheves. En bruker sa at han ikke stolte på salgsargumenter, men ønsket å sjekke prislister og bruke kalkulatorer.
KBør fremheve hvilke egenskaper som er annerledes under relaterte produkter.For eksempel0-39: Frimerker40-199: Frankeringsmaskin200+: Massebrev
K Brukerne lette først og fremst øverst på siden for å finne lenken tilbake til produktgruppe.
![Page 33: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/33.jpg)
![Page 34: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/34.jpg)
![Page 35: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/35.jpg)
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
6 lærdommer
![Page 36: Fra strategi til visuelt design](https://reader034.fdocument.pub/reader034/viewer/2022052503/54550681b1af9fc0638b4695/html5/thumbnails/36.jpg)
Takk for [email protected]