01. Problem
Oppgaven var å utvikle et forslag til redesign av nettsiden for Emanuel Vigeland Museum, et kunstmuseum på Slemdal i Oslo, laget av kunstneren Emanuel Vigeland. Dette var et gruppeprosjekt der jeg samarbeidet med tre interaksjonsdesignere og en grafisk designer. Jeg og den andre grafiske designeren hadde hovedansvaret for hele det visuelle uttrykket på nettsiden, mens interaksjonsdesignerne hadde hovedansvar for det funksjonelle og brukervennligheten. Den eksisterende nettsiden ble utviklet tidlig på 2000-tallet og fremstår i dag som utdatert både teknisk og visuelt. Vi ønsket at designet av den nye nettsiden skulle gjenspeile det mørke mausoleet og løfte frem kunstverkene, samtidig som det måtte være brukervennlig. Løsningen skulle leveres som et helhetlig designsystem med logo, fargepalett, typografi, avstander, tone of voice, bildestil og interaksjonsmønstre, med hovedfokus på mobil og enkelte sider også tilpasset desktop.
Da vi analyserte den nåværende nettsiden, var svakhetene tydelige. Nettsiden er bygget på en gammel HTML-tabellstruktur og fungerer dårlig på mobil. Innholdet er presset sammen i ett langt tekstfelt på forsiden uten tydelig hierarki, og essensiell informasjon som åpningstider, billettkjøp og arrangementer er vanskelig å finne. Billettsalget er løst ved eksterne lenker til LetsReg uten visuell integrasjon, og det finnes ingen dedikerte sider for billettsalg, lokaleutleie eller arrangementer. Visuelt mangler nettsiden en tydelig identitet, og logoen og det grafiske uttrykket er relativt utdatert. Resultatet er at nettsiden ikke klarer å kommunisere hvor unikt museet faktisk er.
02. Innsikt
For å forstå museets behov reiste vi først til Slemdal og besøkte mausoleet, slik at vi fikk førstehånds inntrykk av rommet. Vi la særlig merke til mørket, ekkoet og de varme fargene, elementer som vi tok med oss videre idesignvalgene. Vi snakket også med museets ansvarlige om hva han ønsket å forbedre, og han trakk blant annet frem at han var fornøyd med fargene fra den eksisterende nettsiden og at han likte Nasjonalmuseets digitale løsning. I tillegg samlet vi inn svar fra en spørreundersøkelse som ble delt via museets Facebook-side.
Basert på innsikten kategoriserte vi brukerne i to hovedgrupper: besøkende (turister og lokale gjester som skal kjøpe billett eller orientere seg) og leietakere (artister, band og arrangører som vil leie lokalet). Disse to gruppene har ulike informasjonsbehov, og det ble tydelig at redesignet måtte gjøre det enklere for begge å finne frem. Innsikten ga oss noen mål for designet: det skal være rent og kunstfokusert, mørkt og stemningsfullt, og tydelig og informativt. I tillegg lagde vi personas for å danne oss et bilde av ulike målgrupper og hva deres behov var, som vi også la til rette for videre i designet.
Vi startet med å lage et moodboard for å samle visuelle referanser. Fellesnevneren var rent design med fokus på kunstverket, og vi hentet inspirasjon fra blant annet Nasjonalmuseet og Museum of Contemporary Art of Montenegro, samtidig som vi noterte ned museets eksisterende farger og former som utgangspunkt.
03. Skisser og iterasjon
Logoen ble utviklet gjennom Crazy 8, der to av oss skisserte i åtte minutter hver og endte opp med 16 forslag totalt. Etter første runde med Dot Voting landet vi på en bueformet logo som etterlignet buene i mausoleets dør og tak. Da vi senere oppdaget at flere andre kulturinstitusjoner hadde tenkt i samme retning, gikk vi tilbake til skissene og stemte på nytt. Vi endte da på en bokstavbasert logo bygget av E, V og M, der V-en er modifisert slik at den ene streken er rett, og M-en kan plasseres både under og på linje med resten. Dette ga en logo med to varianter – horisontal og vertikal – som kan tilpasses ulike flater.
Fargepaletten ble utviklet parallelt med logoen, med utgangspunkt i opplevelsen av rommet og fargene i Vigelands malerier. En mørk brunfarge ble valgt som primærfarge fordi den speiler mausoleets mørke, mens den brun-oransje ble valgt som sekundærfarge fordi den henter opp tonene Vigeland selv brukte, samtidig som den fungerer som blikkfang. Hvitt og to gråtoner ble lagt til som skriftfarger for å sikre lesbarhet.
For informasjonsarkitekturen laget vi først et utkast til sitemap der vi forsøkte å samle bestilling, info og kontakt under én kategori. Da vi begynte å skissere low fidelity-wireframes oppdaget vi at strukturen ikke fungerte i praksis: innholdet ble for tett og brukeren møtte for mye informasjon på én gang. Vi gikk derfor tilbake og laget en ny sitemap der billetter, lokaleutleie, historie, informasjon, bildegalleri og arrangementer fikk hver sin dedikerte side. Dette ga større frihet til å tilpasse hver side til innholdet og redusere kognitiv belastning for brukeren.
Selve nettsiden ble utviklet i tre faser. I low fidelity-fasen jobbet vi raskt med enkle gråtoneskisser for å teste informasjonsarkitekturen og plasseringen av hovedelementer. Low fidelity ble brukt for å brukerteste og et viktig verktøy for å avdekke strukturelle svakheter tidlig, før vi hadde investert tid i visuelle detaljer. I mid fidelity-fasen lagde vi en visuell skisse av forsiden. Her begynte vi å ta mer i bruk visuelle elementer. Vi testet blant annet lesbarhet, knappestørrelser. I high fidelity-fasen koblet vi sammen designsystemet med wireframene, og resultatet var en helhetlig prototype med mørk bakgrunn, varme aksentfarger, Avenir Next gjennomgående og bildebehandling med corner radius og gradienter.
Det endelige resultatet er et helhetlig designsystem og forslag til redesign av museets nettside som balanserer det stemningsfulle med det funksjonelle. Logoen EVM er ren og moderne, og finnes i en horisontal versjon som brukes i menyen på mobil og desktop, og en vertikal versjon som brukes på øvrige flater på mobil. Fargepaletten består av primærfargen Rommet (#0F0500) som bakgrunn på nettsiden, sekundærfargen Veggen (#B13A00) i footer, meny og tekstbokser, og skriftfargene Klanget (hvit), Sjelen (lys grå) og Skyggen (mørk grå) for henholdsvis titler, brødtekst og inputfelt.
Typografien er Avenir Next gjennomgående, med definerte regler for skriftstørrelse og linjeavstand på hvert nivå fra H1 til mikrotekst, og forstørrede verdier på desktop. Tekst som plasseres over bilder har drop shadow og background blur for å sikre lesbarhet. Avstandene er definert i et system fra XXS til XXL, der mobil bruker 22 px marger og desktop 55 px, og hvert nivå har klare bruksregler slik at brukeren intuitivt forstår hva som hører sammen.
Tone of voice er kort, informativ, tydelig og presis, uten emojis, slang eller uformelle uttrykk – et bevisst valg for å nå et bredt publikum med ulik alder og kunstbakgrunn. Bildestilen er delt inn i fire retningslinjer for situasjon, lys og farge, komposisjon og bilderedigering, der bildene generelt skal være varme og mørke, tatt på museet, og redigert med corner radius på 10 px og gradient mot bakgrunnen for å skape myke overganger som speiler mausoleets buede former.
Strukturelt består løsningen av dedikerte sider for billetter, lokaleutleie, historie, informasjon, bildegalleri og arrangementer, samt en 360-graders visning av rommet direkte fra forsiden. Klikk, hover og horisontal scroll er brukt bevisst i tråd med brukernes forventninger, og mikrointeraksjoner gir kontinuerlig tilbakemelding på handlinger. Sammen skaper elementene en digital plattform som oppleves moderne og som passer til museets uttrykk. Sentral informasjon som åpningstider, billettsalg og arrangementer er enkelt tilgjengelig og den er mye mer brukervennlig enn den eksisterende nettsiden.
04. Løsning
