Designsystem
Emanuel Vigelands museum
Emanuel Vigelands museum
– Oppgave –
Brief – oppsummert
I dette gruppeprosjektet skulle vi redesigne nettsiden til Emanuel Vigeland museum og utvikle et tilhørende designsystem. Løsningen skulle inkludere blant annet et fungerende bookingsystem og
tydelig informasjon om museumsbesøk, konserter og bookinger.
I dette gruppeprosjektet skulle vi redesigne nettsiden til Emanuel Vigeland museum og utvikle et tilhørende designsystem. Løsningen skulle inkludere blant annet et fungerende bookingsystem og
tydelig informasjon om museumsbesøk, konserter og bookinger.
Løsning
Gruppen min var tverrfaglig og besto av to interaksjonsdesignere og to grafisk designere. Jeg samarbeidet med Mari Haugaløkken Synslien, Mina Lien og Kamilla Haukås. Vi utviklet et designsystem og en hi-fi prototype som et grunnlag for en moderne, brukervennlig nettside. Det visuelle uttrykket er inspirert av museets særpreg, samtidig som den er modernisert og tilpasset digitale flater og universell utforming. Designsystemet legger til rette for forutsigbar videre utvikling, og sikrer en helhetlig opplevelse på tvers av sider og komponenter.
Gruppen min var tverrfaglig og besto av to interaksjonsdesignere og to grafisk designere. Jeg samarbeidet med Mari Haugaløkken Synslien, Mina Lien og Kamilla Haukås. Vi utviklet et designsystem og en hi-fi prototype som et grunnlag for en moderne, brukervennlig nettside. Det visuelle uttrykket er inspirert av museets særpreg, samtidig som den er modernisert og tilpasset digitale flater og universell utforming. Designsystemet legger til rette for forutsigbar videre utvikling, og sikrer en helhetlig opplevelse på tvers av sider og komponenter.
– Innsikt –
Museumsbesøk
I starten av prosjektet besøkte to av medlemmene i gruppen museet for å få innsikt. Vi ønsket å vite mer om hvilke tjenester og funksjoner museet så for seg å ha på den nye nettsiden, i tillegg til å høre hvordan nåværende løsning fungerer. Vi fant ut at museet har jevnlige konserter, men mangler et godt bookingsystem og har ofte kø. Kommunikasjonen skjer via Facebook og e-post, noe som kan gi treg respons. Derfor ser vi behov for en enkel løsning med bedre oversikt over arrangementer, og en enklere booking opplevelse.
Vi tok også til oss en del inspirasjon fra museets utstilling, med fargene og illustrasjonene. I tillegg tok vi også inspirasjon fra konseptet at øyet tilpasser seg til det mørke rommet og vi ønsket å prøve å implementere det i vårt design ved bruk av skygger.
I starten av prosjektet besøkte to av medlemmene i gruppen museet for å få innsikt. Vi ønsket å vite mer om hvilke tjenester og funksjoner museet så for seg å ha på den nye nettsiden, i tillegg til å høre hvordan nåværende løsning fungerer. Vi fant ut at museet har jevnlige konserter, men mangler et godt bookingsystem og har ofte kø. Kommunikasjonen skjer via Facebook og e-post, noe som kan gi treg respons. Derfor ser vi behov for en enkel løsning med bedre oversikt over arrangementer, og en enklere booking opplevelse.
Vi tok også til oss en del inspirasjon fra museets utstilling, med fargene og illustrasjonene. I tillegg tok vi også inspirasjon fra konseptet at øyet tilpasser seg til det mørke rommet og vi ønsket å prøve å implementere det i vårt design ved bruk av skygger.
UX-evaluering
I innsiktsarbeidet gjorde vi blant annet en UX-evaluering av den eksisterende løsningen og samlet resultatene vi først i et affinity map og deretter flyttet det over til et MOSCOW-diagram. På denne måten kunne vi prioritere hva vi ønsket å ha mest fokus på, og hva vi anså som mindre viktig. I tillegg hadde vi flere intervjuer med utenforstående, for å få en oversikt over hva folk synes om den eksisterende løsningen. Hovedfunn vi gjorde var blant annet at de fleste så på nettsiden som utdatert og gammeldags. Mange synes også at det var utfordrende å finne frem til informasjonen de søkte, blant annet fordi navigasjonsmenyen var forvirrende og lite intuitiv.
I innsiktsarbeidet gjorde vi blant annet en UX-evaluering av den eksisterende løsningen og samlet resultatene vi først i et affinity map og deretter flyttet det over til et MOSCOW-diagram. På denne måten kunne vi prioritere hva vi ønsket å ha mest fokus på, og hva vi anså som mindre viktig. I tillegg hadde vi flere intervjuer med utenforstående, for å få en oversikt over hva folk synes om den eksisterende løsningen. Hovedfunn vi gjorde var blant annet at de fleste så på nettsiden som utdatert og gammeldags. Mange synes også at det var utfordrende å finne frem til informasjonen de søkte, blant annet fordi navigasjonsmenyen var forvirrende og lite intuitiv.
Personas og brukerflyt
Vi utviklet 5 ulike personas for å se for oss hvem som var aktuelle brukere for nettsiden. I tillegg var det nyttig for å aktivt legge til rette for universell utforming. Vi dannet derfor noen personas med ulike funksjonsutfordringer. Etter å ha utviklet personas gjorde vi en brukerflyt med lo-fi prototypen vår. På denne måten så vi hva vi manglet og hva det var viktig å legge til. Brukerflytene våre satte utgangspunktet for hvilke sider vi ønsket å inkludere på prototypene våre for mobil og desktop. Vi utviket to brukerreiser som bega seg ut på reiser som begge var svært aktuelle for museets reelle nettside.
Vi utviklet 5 ulike personas for å se for oss hvem som var aktuelle brukere for nettsiden. I tillegg var det nyttig for å aktivt legge til rette for universell utforming. Vi dannet derfor noen personas med ulike funksjonsutfordringer. Etter å ha utviklet personas gjorde vi en brukerflyt med lo-fi prototypen vår. På denne måten så vi hva vi manglet og hva det var viktig å legge til. Brukerflytene våre satte utgangspunktet for hvilke sider vi ønsket å inkludere på prototypene våre for mobil og desktop. Vi utviket to brukerreiser som bega seg ut på reiser som begge var svært aktuelle for museets reelle nettside.
– Konsept utvikling –
Sitemap
Vi lagde et sitemap tidlig i prosessen for å få et overblikk over nettsidens innhold og struktur. Sitemapet ble brukt som et utgangspunkt i designprosessen. Vi vurderte flere ulike muligheter for navigasjon mellom forskjellige booking valg og billettkjøp, og landet til slutt på en løsning der vi har en brukerflyt for privatpersoner som skal kjøpe billetter for få, og en annen flyt for andre spesielle bookinger som omvisninger, leie av lokalet og konsertbookinger. Vi gjorde dette for å redusere risikoen for forvirring over de forskjellige billett- og booking mulighetene.
Vi lagde et sitemap tidlig i prosessen for å få et overblikk over nettsidens innhold og struktur. Sitemapet ble brukt som et utgangspunkt i designprosessen. Vi vurderte flere ulike muligheter for navigasjon mellom forskjellige booking valg og billettkjøp, og landet til slutt på en løsning der vi har en brukerflyt for privatpersoner som skal kjøpe billetter for få, og en annen flyt for andre spesielle bookinger som omvisninger, leie av lokalet og konsertbookinger. Vi gjorde dette for å redusere risikoen for forvirring over de forskjellige billett- og booking mulighetene.
Brukertester
Vi gjorde brukertesting på tre ulike stadier av prosessen 1) i innsikten på eksisterende løsning, 2) etter tilnærmet fullstendig versjon av hi-fi og 3) etter endelige endringer. Svarene på brukertest #1 og #2 sorterte vi inn i separate affinity maps og enten kategoriserte de basert på likhetstrekk eller viktighet (MOSCOW). Dette var en måte for å tydelig se resultatene av brukertestene.
Vi gjorde brukertesting på tre ulike stadier av prosessen 1) i innsikten på eksisterende løsning, 2) etter tilnærmet fullstendig versjon av hi-fi og 3) etter endelige endringer. Svarene på brukertest #1 og #2 sorterte vi inn i separate affinity maps og enten kategoriserte de basert på likhetstrekk eller viktighet (MOSCOW). Dette var en måte for å tydelig se resultatene av brukertestene.
Brukertest Hi-fi mobil
Vi gjorde 5 forskjellige brukertester etter å ha laget en tilnærmet fullstendig versjon av Hi-fi prototypen. Svarene vi fikk sorterte vi inn i affinity mapping og et MoSCoW-diagram (se bilder). Vi la også til viktige svar fra intervjuet med Kjartan fra museet på MoSCoW-diagrammet. På denne måten kunne vi enkelt se småting vi måtte justere for å oppnå optimal funksjonalitet på prototypen.
Vi gjorde 5 forskjellige brukertester etter å ha laget en tilnærmet fullstendig versjon av Hi-fi prototypen. Svarene vi fikk sorterte vi inn i affinity mapping og et MoSCoW-diagram (se bilder). Vi la også til viktige svar fra intervjuet med Kjartan fra museet på MoSCoW-diagrammet. På denne måten kunne vi enkelt se småting vi måtte justere for å oppnå optimal funksjonalitet på prototypen.
– Grafisk retning –
Moodboard
Vi startet designprosessen som gruppe, med at alle lagde hvert sitt moodboard. Dette gjorde vi for at alle meningene skulle få lik vekt. Moodboardene våre hadde mye likhetstrekk, selv om de ble løst på ulike måter. Alle ønsket et fargepallett med naturlige, jordnære farger, en mer håndtegnet typografi og teksturert bakgrunn (gjerne basert på papir). Alle baserte seg på ulike måter på bildebruken og uttrykket museet har, ved at Emanuel Vigeland spiller mye på rødlige toner og skyggespill).
Vi startet designprosessen som gruppe, med at alle lagde hvert sitt moodboard. Dette gjorde vi for at alle meningene skulle få lik vekt. Moodboardene våre hadde mye likhetstrekk, selv om de ble løst på ulike måter. Alle ønsket et fargepallett med naturlige, jordnære farger, en mer håndtegnet typografi og teksturert bakgrunn (gjerne basert på papir). Alle baserte seg på ulike måter på bildebruken og uttrykket museet har, ved at Emanuel Vigeland spiller mye på rødlige toner og skyggespill).
Logo
Basert på innsikten vår fra museet så la vi merke til at de allerede brukte mausoleet og skissen av mausoleet som et varemerke – dette ønsker vi å ta med videre. Dermed baserte vi skissene på en stilisert versjon av Vigeland sin skisse. Etterhvert jobbet vi videre med å skape balanse innad i navnet, og landet til slutt på en tredelt logo: en primær med ikon og navn, en med kun ikon og en med kun navnet. Dette er med på å skape en god balanse og gjenkjennelighet innad i bruk av logo og skaper større mulighetsrom for designsystemet vårt. Skriften og fargene vi tok i bruk er basert på vår visuelle profil.
Basert på innsikten vår fra museet så la vi merke til at de allerede brukte mausoleet og skissen av mausoleet som et varemerke – dette ønsker vi å ta med videre. Dermed baserte vi skissene på en stilisert versjon av Vigeland sin skisse. Etterhvert jobbet vi videre med å skape balanse innad i navnet, og landet til slutt på en tredelt logo: en primær med ikon og navn, en med kun ikon og en med kun navnet. Dette er med på å skape en god balanse og gjenkjennelighet innad i bruk av logo og skaper større mulighetsrom for designsystemet vårt. Skriften og fargene vi tok i bruk er basert på vår visuelle profil.
– Designsystem –
Logo
Vi lagde en tredelt logo, som er med på å skape en god balanse og gjenkjennelighet innad i bruken. Dette skaper et stort mulighetsrom for designsystemet vårt.
Vi lagde en tredelt logo, som er med på å skape en god balanse og gjenkjennelighet innad i bruken. Dette skaper et stort mulighetsrom for designsystemet vårt.
Minimumsstørrelser
Det minste formatet til logoen er faviconet i nettleservinduet.
Utenom står størrelsene på bildet (~60px)
Maksimumsstørrelser
Det er ingen kriterier på maksimum størrelse, så lenge det tilsvarer god lesbarhet på flaten.
Det minste formatet til logoen er faviconet i nettleservinduet.
Utenom står størrelsene på bildet (~60px)
Maksimumsstørrelser
Det er ingen kriterier på maksimum størrelse, så lenge det tilsvarer god lesbarhet på flaten.
Farger
Fargevalget vårt er i stor grad inspirert av den eksisterende nettsiden, samt det generelle uttrykket i Emanuel Vigelands kunst. Vi har fokusert på jordtoner (beige og svart), i tillegg til en rødfarge som kontrast. Den beige fargen skaper også sterke assosiasjoner til papir, og vi har brukt en teksurert variant av dette på alle nettsidens bakgrunner.
Fargevalget vårt er i stor grad inspirert av den eksisterende nettsiden, samt det generelle uttrykket i Emanuel Vigelands kunst. Vi har fokusert på jordtoner (beige og svart), i tillegg til en rødfarge som kontrast. Den beige fargen skaper også sterke assosiasjoner til papir, og vi har brukt en teksurert variant av dette på alle nettsidens bakgrunner.
Typografi
Alt av skrift har en linjeavstand på 150 % for å følge WCAGS krav og sikre god lesbarhet. Overskriftene våre er satt i TC Antiquated. Skriften er designet av Tom Chalky og er en skrifttype med et håndskrevet og lekent preg. Samtidig ser den seriøs nok ut til formålet vårt. Skriften er også implementert i logoen og knapper. Brødteksten hadde flere runder for å sikre lesbarheten, og landet tilslutt på Noto Sans av Irene Vlachou (Monotype). Dette er en åpen skrifttype som gir god lesbarhet samtidig som den samsvarer godt med TC Antiquated.
Alt av skrift har en linjeavstand på 150 % for å følge WCAGS krav og sikre god lesbarhet. Overskriftene våre er satt i TC Antiquated. Skriften er designet av Tom Chalky og er en skrifttype med et håndskrevet og lekent preg. Samtidig ser den seriøs nok ut til formålet vårt. Skriften er også implementert i logoen og knapper. Brødteksten hadde flere runder for å sikre lesbarheten, og landet tilslutt på Noto Sans av Irene Vlachou (Monotype). Dette er en åpen skrifttype som gir god lesbarhet samtidig som den samsvarer godt med TC Antiquated.
Elementer og komponenter
Elementer
Vi har valgt å avrunde alle elementene våre, slik at det skal føles mer ut som det myke og håndlagde preget som E. Vigeland har i sine skisser og malerier, samtidig som dette vekkeren assosiasjon til mausoleets form. Mausoleumsbuen er også et gjengående element vi har plassert nederst på enkelte sider, for å forsøke å gjenskape følelsen man får dersom man entrer mausoleet.
De fleste elementene våre inneholder også en skygge, da vi ønsket å ta med skyggespillet hans videre til nettsiden.
Komponenter
Designsystemet vårt inneholder mange ulike komponenter til ulik bruk, dette inkluderer et vertikalt oppsett for sammensatte bilder og tekst på mobil, samt kombinert oppsett av tekst og bilde for både livslinjen til Vigeland og arrangements- komponentet.
Elementer
Vi har valgt å avrunde alle elementene våre, slik at det skal føles mer ut som det myke og håndlagde preget som E. Vigeland har i sine skisser og malerier, samtidig som dette vekkeren assosiasjon til mausoleets form. Mausoleumsbuen er også et gjengående element vi har plassert nederst på enkelte sider, for å forsøke å gjenskape følelsen man får dersom man entrer mausoleet.
De fleste elementene våre inneholder også en skygge, da vi ønsket å ta med skyggespillet hans videre til nettsiden.
Komponenter
Designsystemet vårt inneholder mange ulike komponenter til ulik bruk, dette inkluderer et vertikalt oppsett for sammensatte bilder og tekst på mobil, samt kombinert oppsett av tekst og bilde for både livslinjen til Vigeland og arrangements- komponentet.
Piktogrammer
Piktogrammene vi har laget er utviklet ved bruk av skrifttypen TC Antiquated Sans. Strekene i de ulike piktogrammene er utformet på en måte som gjør at de samsvarer godt med overskriftene våre. Vi har kun utviklet piktogrammer vi har hatt bruk for, og har ikke utviklet et større piktogramsett utover dette. Piktogrammene vi har valgt å ha med på nettsiden er ikoner for hamburgermeny og billetter, piler, kryss og info-tegn.
Piktogrammene vi har laget er utviklet ved bruk av skrifttypen TC Antiquated Sans. Strekene i de ulike piktogrammene er utformet på en måte som gjør at de samsvarer godt med overskriftene våre. Vi har kun utviklet piktogrammer vi har hatt bruk for, og har ikke utviklet et større piktogramsett utover dette. Piktogrammene vi har valgt å ha med på nettsiden er ikoner for hamburgermeny og billetter, piler, kryss og info-tegn.
Tone of voice
Vår tone of voice er utviklet for å balansere nærhet og profesjonalitet. Språket skal være menneskelig og tilgjengelig, samtidig som den skal ha en faglig trygg og respektfull tone.
Vi skriver enkelt og direkte, med fokus på klarhet og lesbarhet. Unødvendig fagspråk og komplekse formuleringer skal unngås og heller ta for seg et mer naturlig og inkluderende språk.
Tonen er varm, men kontrollert. Vi ønsker å være imøtekommende uten å bli uformelle eller overdrevent entusiastiske. Dette er med på å skape tillit og en helhetlig opplevelse for Emanuel Vigelands museum.
Vår tone of voice er utviklet for å balansere nærhet og profesjonalitet. Språket skal være menneskelig og tilgjengelig, samtidig som den skal ha en faglig trygg og respektfull tone.
Vi skriver enkelt og direkte, med fokus på klarhet og lesbarhet. Unødvendig fagspråk og komplekse formuleringer skal unngås og heller ta for seg et mer naturlig og inkluderende språk.
Tonen er varm, men kontrollert. Vi ønsker å være imøtekommende uten å bli uformelle eller overdrevent entusiastiske. Dette er med på å skape tillit og en helhetlig opplevelse for Emanuel Vigelands museum.
Do’s and dont’s
Do
- Skriv enkelt og direkte
- Bruk et naturligspråk («du», ikke «brukeren»)
- Hold setninger korte
- Vær hjelpsom og veiledene
- La tonen være varm, men kontrollert
Eksempel: «Kjøp billett», «Les mer om samlingen» og «Museet er åpent onsdag–søndag»
Dont
- Ikke skriv for formelt
- Ikke bruk tungt fagspråk
- Ikke vær for entusiastisk eller «reklamete»
- Ikke skriv lange, forklarende setninger
Eksempler: «Vi inviterer Dem til å anskaffe billetter», «Opplev enestående og spektakulære kunstverk!» og «Brukeren kan navigere videre til...»
- Ikke skriv for formelt
- Ikke bruk tungt fagspråk
- Ikke vær for entusiastisk eller «reklamete»
- Ikke skriv lange, forklarende setninger
Eksempler: «Vi inviterer Dem til å anskaffe billetter», «Opplev enestående og spektakulære kunstverk!» og «Brukeren kan navigere videre til...»
– Utvikling mobil –
Hamburgermeny
I prosjektet jobbet vi med «mobile first» og under utviklingen av sitemap fant vi ut at vi trengte mange flere sider for å enkelt navigere seg rundt. Her landet vi på å ha det som en hamburgermeny, for enkel tilgjengelighet. Vi fjernet støy og strammet opp førsteutkast ved å fjerne underkategoriene og samtidig gjorde vi det mer symmetrisk.
I prosjektet jobbet vi med «mobile first» og under utviklingen av sitemap fant vi ut at vi trengte mange flere sider for å enkelt navigere seg rundt. Her landet vi på å ha det som en hamburgermeny, for enkel tilgjengelighet. Vi fjernet støy og strammet opp førsteutkast ved å fjerne underkategoriene og samtidig gjorde vi det mer symmetrisk.
Forside
I utviklingen av forsiden beholdt vi store deler av den originale informasjonsarkitekturen, men vi jobbet mye med størrelsesforholdet.
I utviklingen av forsiden beholdt vi store deler av den originale informasjonsarkitekturen, men vi jobbet mye med størrelsesforholdet.
Booking alternativer
Originalt var mengden informasjon på skjermen altfor omfattende, dermed forstørret vi komponentene og plasserte de systematisk under hverandre.
Originalt var mengden informasjon på skjermen altfor omfattende, dermed forstørret vi komponentene og plasserte de systematisk under hverandre.
Tidslinje
Tidsslinjen var en flate som holdt seg nogelunde lik, den ble som mange andre flater også strammet opp.
– I dypden: mobil –
Wireframes
Vi brukte Figma til å lage wireframes, basert på enkle skisser og ideer fra tidligere i prosessen. Siden vi ikke hadde et klart bilde av hvordan forsiden skulle se ut, utviklet vi to ulike forslag: ett med tre snarveiknapper og kort informasjon under, og ett med et mer informativt toppinnlegg etterfulgt av en karusell med bilder eller innlegg.
I designet prioriterte vi det viktigste innholdet og funksjonene først, siden løsningen skulle først og fremst fungere på en mobilskjerm. Navigasjonen ble gjort enkel, med en hamburgermeny øverst til høyre, et billettikon ved siden av for rask tilgang til booking, og en logo øverst til venstre som tar brukeren tilbake til forsiden.
Vi brukte Figma til å lage wireframes, basert på enkle skisser og ideer fra tidligere i prosessen. Siden vi ikke hadde et klart bilde av hvordan forsiden skulle se ut, utviklet vi to ulike forslag: ett med tre snarveiknapper og kort informasjon under, og ett med et mer informativt toppinnlegg etterfulgt av en karusell med bilder eller innlegg.
I designet prioriterte vi det viktigste innholdet og funksjonene først, siden løsningen skulle først og fremst fungere på en mobilskjerm. Navigasjonen ble gjort enkel, med en hamburgermeny øverst til høyre, et billettikon ved siden av for rask tilgang til booking, og en logo øverst til venstre som tar brukeren tilbake til forsiden.
LoFi prototype
Lo-fi prototypene for mobil bygger videre på wireframes, men flere deler av løsningen ble justert ettersom vi fant bedre og mer oversiktelige løsninger. På forsiden la vi til en liten oversikt over kommende arrangementer for å gjøre viktig informasjon lettere tilgjengelig. Samtidig reorganiserte vi innholdet slik at generell informasjon og en lenke til billettkjøp kommer først på siden, slik at brukeren raskt kan finne det mest sentrale.
Bookingsiden ble også endret til en mer ryddig versjon som utnytter plassen bedre og reduserer unødvendige distraksjoner. Blant annet ble bildet fjernet for å gi mer rom for selve bookinginnholdet. Billettkjøpsflyten ble delt inn i tre steg: først velger brukeren tidspunkt, deretter antall og type besøkende, og til slutt mottar brukeren billetten som en QR-kode som kan lastes ned.
Hamburgermenyen ble gjort mer detaljert og ryddig. Tidslinjen ble videreutviklet for å utnytte skjermflaten bedre, ved at innholdet fikk mer fokus i stedet for en helt sentrert linje og innhold på hver side. For spesielle bookinger som omvisning, konserter og leie av lokale, valgte vi egne utfyllingsskjemaer som sendes som henvendelser til museet. Denne løsningen gjør kommunikasjonen enklere og mer effektiv, fordi brukeren fyller inn viktig informasjon på forhånd og reduserer mengden med frem-og-tilbake kommunikasjon mellom bruker og museet.
Lo-fi prototypene for mobil bygger videre på wireframes, men flere deler av løsningen ble justert ettersom vi fant bedre og mer oversiktelige løsninger. På forsiden la vi til en liten oversikt over kommende arrangementer for å gjøre viktig informasjon lettere tilgjengelig. Samtidig reorganiserte vi innholdet slik at generell informasjon og en lenke til billettkjøp kommer først på siden, slik at brukeren raskt kan finne det mest sentrale.
Bookingsiden ble også endret til en mer ryddig versjon som utnytter plassen bedre og reduserer unødvendige distraksjoner. Blant annet ble bildet fjernet for å gi mer rom for selve bookinginnholdet. Billettkjøpsflyten ble delt inn i tre steg: først velger brukeren tidspunkt, deretter antall og type besøkende, og til slutt mottar brukeren billetten som en QR-kode som kan lastes ned.
Hamburgermenyen ble gjort mer detaljert og ryddig. Tidslinjen ble videreutviklet for å utnytte skjermflaten bedre, ved at innholdet fikk mer fokus i stedet for en helt sentrert linje og innhold på hver side. For spesielle bookinger som omvisning, konserter og leie av lokale, valgte vi egne utfyllingsskjemaer som sendes som henvendelser til museet. Denne løsningen gjør kommunikasjonen enklere og mer effektiv, fordi brukeren fyller inn viktig informasjon på forhånd og reduserer mengden med frem-og-tilbake kommunikasjon mellom bruker og museet.
MidFi prototype
Vi utformet en «mid-fi» prototype i Illustrator for å utforske hvordan vi ønsket at den visuelle profilen og informasjonsarkitekturen skulle samsvare.
Vi utformet en «mid-fi» prototype i Illustrator for å utforske hvordan vi ønsket at den visuelle profilen og informasjonsarkitekturen skulle samsvare.
Hifi prototype – mikrointeraksjoner
– Arrangement karusell
– Tidslinje: åpne/lukke tekstboks for å lese mer
– Valg av tidspunkt: radioknapp
– Kalender
– Kalender - radio style
– Kjøp av billett valg - Antall person type
– Pop-up informasjons boks
– Hamburgermeny - viser hvor du er
– Valg av betalingsmåte - radioknapp
– Skriveanimasjon - ticker
– Estimat blir endret utifra antall personer
– Arrangement karusell
– Tidslinje: åpne/lukke tekstboks for å lese mer
– Valg av tidspunkt: radioknapp
– Kalender
– Kalender - radio style
– Kjøp av billett valg - Antall person type
– Pop-up informasjons boks
– Hamburgermeny - viser hvor du er
– Valg av betalingsmåte - radioknapp
– Skriveanimasjon - ticker
– Estimat blir endret utifra antall personer
– Utvikling desktop –
– I dypden: desktop –
Wireframes
I tidlige wireframes for desktop utforsket vi flere ulike måter å bruke den større skjermflaten på. Et viktig fokus var hvordan forsiden kunne oppleves både informativ og visuelt interessant, uten å bli uoversiktelig. Vi testet ulike måter museets visuelle identitet kunne komme frem på siden. Vi testet blant annet en løsning med et asymmetrisk bildegalleri, der bildene var med på å fylle ut plassen og skaper et tydelig visuelt uttrykk, i tillegg til å bidra med informasjon om museet og Emanuel Vigeland. Vi ønsket å gjøre det enkelt for brukeren å få oversikt over hva museet tilbyr.
Vi har gjort en forskjell fra mobilversjonen med navigasjonen, nemlig at på desktop valgte vi ikke å legge all navigasjon i en hamburgermeny, men plasserte i stedet de viktigste sidene i en navigasjonsbar øverst på siden, mens resten av innholdet ble plassert i en drop-down meny. Dette ga en mer effektiv navigasjon som utnyttet en større skermbredde.
I tidlige wireframes for desktop utforsket vi flere ulike måter å bruke den større skjermflaten på. Et viktig fokus var hvordan forsiden kunne oppleves både informativ og visuelt interessant, uten å bli uoversiktelig. Vi testet ulike måter museets visuelle identitet kunne komme frem på siden. Vi testet blant annet en løsning med et asymmetrisk bildegalleri, der bildene var med på å fylle ut plassen og skaper et tydelig visuelt uttrykk, i tillegg til å bidra med informasjon om museet og Emanuel Vigeland. Vi ønsket å gjøre det enkelt for brukeren å få oversikt over hva museet tilbyr.
Vi har gjort en forskjell fra mobilversjonen med navigasjonen, nemlig at på desktop valgte vi ikke å legge all navigasjon i en hamburgermeny, men plasserte i stedet de viktigste sidene i en navigasjonsbar øverst på siden, mens resten av innholdet ble plassert i en drop-down meny. Dette ga en mer effektiv navigasjon som utnyttet en større skermbredde.
LoFi prototype
Siden vi først utviklet en lo-fi prototype for mobil, tok vi utgangspunkt i denne da vi skulle utvikle lo-fi for desktop. Vi tok også utgangspunkt i de eksisterende wireframes vi hadde laget. I utviklingen av lo-fi prototypen for desktop hadde vi fokus på å etablere en enkel og tydelig brukerflyt. Vi tok utgangspunkt i brukerflyten for persona Hanne.
Siden vi først utviklet en lo-fi prototype for mobil, tok vi utgangspunkt i denne da vi skulle utvikle lo-fi for desktop. Vi tok også utgangspunkt i de eksisterende wireframes vi hadde laget. I utviklingen av lo-fi prototypen for desktop hadde vi fokus på å etablere en enkel og tydelig brukerflyt. Vi tok utgangspunkt i brukerflyten for persona Hanne.
Hifi prototype – mikrointeraksjoner
– Header - dropdown meny for mer
– Header viser hvor du er på nettsiden
– Hover på knapper i header
– Informasjonsboks - Hover over for å se
– Kalender
– Estimat blir endret utifra antall personer
– Skriveanimasjon - ticker
– Hover på alle knapper
– Header - dropdown meny for mer
– Header viser hvor du er på nettsiden
– Hover på knapper i header
– Informasjonsboks - Hover over for å se
– Kalender
– Estimat blir endret utifra antall personer
– Skriveanimasjon - ticker
– Hover på alle knapper