top of page

Operaen.no — et digitalt drama i tusen akter

  • Magne Bjella
  • for 2 døgn siden
  • 10 min lesing

Denne teksten er skrevet av Linda Christin Halvorsen og publiseres i sin helhet etter avtale med forfatteren.



Om forfatteren

Denne teksten er skrevet av Linda Christin Halvorsen, leder for Design i Bekk, med bred erfaring innen digital produktutvikling, produktledelse og tverrfaglig samarbeid.


Blogginnlegget du nå skal lese beskriver samarbeidet mellom Den Norske Opera & Ballett, Bekk og de interne fagmiljøene som utviklet operaen.no – et prosjekt der designere, utviklere, innholdsansvarlige, ledere og brukere jobbet tett sammen for å skape bedre digitale opplevelser og økt tilgjengelighet for publikum.


Som digitalt ansvarlig i Den Norske Opera & Ballett hadde jeg gleden av å være en del av dette samarbeidet, sammen med dyktige kolleger og fagpersoner på tvers av organisasjonene.






Skjermbilde av forsiden til det nye nettstedet for Den Norske Opera & Ballett. I hovedbildet står ballettdanseren Maiko Nishino på scenen i et lyst kostyme med utstrakte armer under en forestilling. Til venstre vises nettstedets mørke hovedmeny med navigasjon til innhold, opplevelser og praktisk informasjon. Bildet illustrerer hvordan kunstnerisk innhold og brukerorientert design ble kombinert i utviklingen av operaen.no.


Designskisse av det nye nettstedet for Den Norske Opera & Ballett vist på flere digitale enheter, inkludert mobiltelefon, nettbrett, bærbar PC og stasjonær skjerm. Skissen illustrerer hvordan nettstedet er utviklet med responsivt design for å gi publikum en god og helhetlig brukeropplevelse uavhengig av skjermstørrelse og enhet.


Konseptperioden vår varte i seks uker. Visuell retning enda to uker til. Da vi endelig var klare, hadde utviklerne ventet ganske utålmodige ganske lenge. Det var bare å kaste seg ut i det — vi hadde bare 3,5 måned å lage operaen.no på. Med en juleferie midt i det hele. Hva gjør du da? Du kjører smidig. Ekte smidig.


Mitt første møte med Operaen-prosjektet var en 5 cm tykk bunke papirer med strategier, verdier, mål og undersøkelser. Det var et uttrekk av “det mest interessante” av alt vi hadde fått utlevert av Operaen, sa prosjektlederen vår. Jeg fikk den på pulten min i midten av september. Tre uker senere stod jeg og Magnus og intervjuet publikummere i foajeen på Operahuset i pausen til Madama Butterfly og lurte på hva som hadde fått dem til å gå og se akkurat den forestillingen akkurat den dagen.


På mange måter startet Operaen.no som et hvilket som helst annet interaktivt prosjekt. Vi gjorde mål og målgrupper. Behovskartlegging. Visuell retning. Konsept. Og samtidig et helt annerledes prosjekt: det var jo Operaen. Kanskje den tydeligste kulturinstitusjonen i vårt ganske land. Og vi skulle redesigne nettstedet til denne institusjonen. Med det fantastiske bygget. Og den sære kunsten. På mange måter drømmeprosjektet. Og som drømmer flest når de går i oppfyllelse: plutselige og litt skumle å holde i. Enn om vi ikke greide å nå opp til forventningene? Tom Remlov brukte tre år på finne den rette sofaen å ha i kontoret sitt. Hvordan gjør du en sånn fyr fornøyd på fem måneder?



Paradoksalt nok: du bruker tid. Masse, masse tid på å tenke, fantasere og kreere. Konseptperioden vår varte i seks uker. Visuell retning enda to uker til. Da vi endelig var klare, og Remlov og Co hadde nikket og sagt at det virket ok (phew), hadde utviklerne ventet ganske utålmodige ganske lenge. Det var bare å kaste seg ut i det — vi hadde bare 3,5 måned å lage det her på. Med en juleferie midt i det hele. Hva gjør du da? Du kjører smidig. Ekte smidig.


Et spekkefritt miljø

Som designdelen av et prosjekt — interaksjonsdesigner, grafisk designer, konseptutvikler, er det alltid litt karrig å integreres i utviklerdelens smidige prosjekt. At de skulle jobbe smidig var like selvsagt for dem som konseptfasen var for oss. Men at designet skulle leveres smidig hadde vi på ingen måte blitt enige om. Og — blitt enige om? Hva betyr det egentlig at design skal leveres smidig? Daniel og jeg hadde en idé om det. For utviklerne kom det mer som en smell. Tiden med ferdige, godkjente, spikra leveranser var forbi — lenge før det fikk startet. Utviklernes “Hva skal vi lage?” besvartes med “Vet ikke helt enda, vi må teste.” Det ble ikke tatt godt i mot i starten.


Whiteboard fylt med skisser, brukerflyter, innholdsstruktur, notater og post-it-lapper fra en workshop hos BEKK. Tavlen viser tidlige konsepter og idéarbeid knyttet til utviklingen av det nye nettstedet for Den Norske Opera & Ballett. Bildet illustrerer hvordan designere, utviklere, innholdsansvarlige og brukere samarbeidet for å utvikle en helhetlig og brukerorientert digital opplevelse.

Den første “spekken” jeg og Daniel leverte

Geriljakrig

I løpet av de tre og halve månedene leverte vi ikke et eneste pixelferdig design. Det vil si — vi kom jo ganske langt på noen sidetyper. Men de var aldri 100%. Hvordan kunne de være det? Innholdet kom i grevens tid, lenge etter at Daniel ble bedt om å lage forestillingsmalen ferdig. Men det hindret ikke utviklerne i å mase om å få det. På et tidspunkt nektet de å implementere noe om vi ikke kunne si at det var godkjent. Spenningsnivået i teamet var ganske høyt der i starten. Frustrasjonen også. For selv om vi satt i samme rom, side om side, tett på hverandre dag etter dag, var det ikke nok. Utviklerne ville se noe som ferdig. Men når brukeropplevelse også skal gjøres smidig, da er det aldri noe som er ferdig. Alt er bare antagelser, og vi trenger å få implementert noe for å teste de antagelsene — og så kan vi si om noe er ferdig eller ei. Kanskje. Mest sannsynlig ikke. Brukeropplevelse er ingen eksakt vitenskap

Men som en sommerfugl ut av en puppe, gikk geriljakrigen over i symbiose etter som vi nærmet oss lansering. Bit for bit, grin for grin, var uferdig design blitt implementert, til vi hadde noe som nesten var ferdig. Og når noe er nesten ferdig, kan vi plutselig begynne å snakke om det. Daniel satt ved skjermen til Sebastian og pekte og synset mens Sebastian fikset i frontenden, til de begge var fornøyd. Jeg forklarte funksjonalitet jeg trengte i blokk Y i EpiServer over skilleveggen mellom meg og Tore. Et lite kvarter senere hadde jeg den og kunne dytte inn nytt innhold.

Den transisjonen krevde en hel del. Og for å være en god opplevelse, sikkert mye mer enn det vi gjorde.

Men her er lista vår, i alle fall:

  • Konsept og visuell retning

  • Geriljatesting

  • Iterasjonsrunder basert på faktiske endringsbehov, ikke faste tidsperioder

  • En kunde som turte å la oss jobbe mot det beste produktet vi kunne levert på tiden tildelt

  • Å sitte tett sammen

Konsept og visuell retning

Fra lean startup har vi lært at prosessen må starte med MVP — minimum viable product. Og den skal du få ut raskt. I et digitalt prosjekt er det både vanskelig og lett. Vanskelig fordi det fortsatt er så vanskelig å se for seg et minimum av et nettsted som ikke er hele

nettstedet. Er det et stygt nettsted? Er det nettstedet men minus alt innhold? Hva er den minste, verdifulle versjonen av operaen.no?

Og samtidig er det lett. Lett når du har gjort jobben din og fått rede på mål og målgrupper og laget det rette konseptet: du vet hva det viktigste nettstedet ditt skal gjøre da. For operaen.no er den aller viktigste funksjonaliteten å kunne finne den forestillingen du vil se, og kjøpe billett til den. Vår aller første versjon av operaen.no var også det. En oversikt over forestillinger trukket ut fra billettsystemet, du kunne klikke på en, og finne en kjøpslenke til billettsystemet på den. Den hyperstygg. Kjøpslenken var bare blå, understreket tekst. Vi hadde ikke DNO&B-fontene, og bildene var henta rett ut fra Stavanger Konserthus som var testgrunnlaget vårt fra billettsystemet. Men den funka.

Men vi hadde ikke visst hvor vi skulle starte om ikke konseptet hadde definert det aller viktigste — og dermed startpunktet for utviklingsløpet.

Vår første versjon av forsiden til nye operaen.no, i november 2012. Ikke nøyaktig det Daniel ville ha — men på vei dit.


Skjermbilde av programoversikten på det nye nettstedet for Den Norske Opera & Ballett. Brukerne kan filtrere arrangementer etter dato, år og kategorier som musikk, teater og annet innhold. Forestillinger og arrangementer presenteres visuelt med bilder og overskrifter. Bildet illustrerer hvordan nettstedet ble utviklet med fokus på brukervennlighet, innholdsstruktur og en enklere vei til relevante opplevelser.


Skjermbilde av forestillingssiden for «Teaterkonsert Mozart» på det nye nettstedet til Den Norske Opera & Ballett. Siden inneholder en introduksjon til forestillingen, praktisk informasjon, oversikt over spilledatoer og en tydelig lenke til billettkjøp. Navigasjonen ligger i venstre marg, mens innholdet er organisert for å gi publikum enkel tilgang til relevant informasjon. Bildet illustrerer hvordan innhold, brukeropplevelse og digitale tjenester ble samlet i én helhetlig løsning.

…og sånn så forestillingsiden ut på det tidspunktet…

Geriljatesting

Og da vi tok den med på en ipad og ba folk teste, fant vi ut hva som funka brukermessig også. Og hva som ikke funka. Skrollingen på forsiden, med de store “plakatene” som vi kaller dem, har vært gjennom 5 redesign-runder. Minst. Fordi de ikke funka brukermessig, og fordi de ikke funka frontend-messig.

Venstremenyen vår, derimot, har mer eller mindre vært med fra start. Vi har justert skriftstørrelsen litt. Pyntet på den med noen streker. Lagt inn punkter etterhvert som informasjonsstrukturen ble mer og mer reell. Men funksjonaliteten satt fra første bruker.

Siden bygget vi ut med flere sidetyper, og muligheter for mer innhold — masse mer innhold — på en forestillingsside. Da innholdsproduksjonen og -publiseringen skjøt fart, gjorde også utviklingen av funksjonalitet det. Og Daniel og Sebastian fikk kjørt seg ytterligere. For brått måtte elementer tegnes om — og implementeres på nytt.

Og for de store tingene tok vi den med ut og viste til folk. På kafeer, på en campus, i Operahusets foajee. Stedene som lå nærmest oss. Så vi kunne komme raskt tilbake og fortelle. De fleste fra teamet var med ut på testerunder. Ikke alle på en gang, så klart — men spredd på de forskjellige. Designere, utviklere, og kunden på et tidspunkt. Det er noe med følelsen av å ha sett det selv. Av å ha gjort spørringen selv, og sett en potensiell publikummer ikke finne menyen du selv har implementert.

Iterasjonsrunder basert på faktiske endringsbehov

Ekte smidig for noen kan bety usmidig for andre. Eller — om ikke usmidig — vi vek i fra enkelte smidig-normer. Daglig stand-up, eksempelvis. Og vi hadde ingen iterasjonsplanlegginger — ingen bestemte iterasjoner heller, for den del. Ikke at det nødvendigvis var en suksess-faktor. Det var heller kaotisk til tider. Men da vi kom inn i rytmen med å implementere, justere, teste, redesigne og implementere på nytt, med funksjonalitet publisert slik at vi kunne ta det med oss ut av huset i løpet av timer, minutter — da var det også godt å slippe å måtte legge ting i en lang kø, vente på at det skulle bli estimert, planlagt og så sluppet i enden av en to-ukers periode. Det var godt å kunne se og teste ting med en gang. Med en

gang vi mistenkte at noe ikke funket. Med en gang vi skjønte at innholdet ikke helt passet den formen vi først hadde trodd det skulle passe. Og å kunne la produktet bestemme hva som var viktigst — ikke en komité som skulle godkjenne en prioriteringsplan. 3,5 måned med 2-ukers iterasjoner skulle tilsi 7 iterasjoner. I stedet hadde vi tusen.

En kunde som turte

Høres det hasardiøst ut? Noen måtte i alle fall slippe taket og tørre. Og kunden, Operaen, turte. Turte å slippe tøylene og la oss drive på med å lage det beste produktet vi kunne lage gitt rammene av tid og penger. Men la meg presisere at det aldri var noen som lukket øynene og lot oss galoppere fritt, uten å vite hvor det bar. Vi hadde månedlige demoer, ukentlige møter og daglig kontakt med kunden. Vi ble bare ikke lesset ned med lange godkjenningsprosesser der hver detalj måtte diskuteres og enes om i en stor arbeidsgruppe før vi kunne — nettopp — teste det.

Å sitte tett sammen

Sist på listen, men som uttrykket lyder, ikke minst, er det å sitte sammen. Tett sammen. Ikke som i å sitte i samme bygg, i samme etasje, i samme korridor — men som i ved siden av hverandre, oppå hverandre, i blikkontakts avstand til hverandre. Å levere smidig, ux, utvikling og produkt, avhenger av at vi ser på den samme tingen sammen.

Ok, alle trenger tid til å tenke seg om. Den grafiske designeren trenger tid til å tenke seg om når nytt innhold har dukket opp. Grensesnittsprogrammereren trenger tid til å implementere det vi nettopp har diskutert. Og det er greit. Men utviklingen av et nettsted er et spill i å gi og ta. Å ønske seg og kreve masse funksjonalitet og transisjoner og koblinger, og å godta mange kompromisser fordi det krever for mye, og annen funksjonalitet venter på å få komme ut.

Dynamikken du ønsker deg for at den utvekslingen skal foregå så effektivt som mulig, fordrer at de som utveksler sitter i hverandres nærhet. Så nært at den ene kan kikke opp og se litt spørrende rundt seg — og bli svart med blikk som sier “hva er problemet?” Nært nok til at det er greit å bli uenige — fordi vi vet at vi må bli enige før eller siden — ingen har en dør å gjemme seg bak når de harde valgene tas, eller de vanskelige spørsmålene stilles.

Den dynamikken tar tid å jobbe opp, og kommer ikke raskere dersom en del av teamet sitter i en del av kontoret, og en annen et annet sted. Bare rommet ved siden av kan være langt nok til at den dynamikken ikke oppstår.

Den siste måneden satt også prosjektlederen hos Operaen sammen med oss, og gled inn i kommunikasjonsflyten vår. En integrert del av teamet. Og skjøv ut innhold i minuttfersk funksjonalitet. Hadde vi der — i den siste måneden før lansering, skulle vært avhengig av lange feedback-looper der noen satt et sted og testet, ga tilbakemelding, fikk en ny spekk, skulle godkjent den, ventet på implementering og så testet på nytt, hadde operaen.no sett ganske annerledes ut. Fattigere. Og vært ganske ubrukelig på mobil — godkjenning av utallige breaking-points på en responsiv layout hadde, vel — brukket ryggen vår.

Lanseringen gikk bra. Vi satt og fikset til siste minutt — men det gikk bra. Jeg skriver denne bloggposten i et slags etter-lanserings-vakuum. Det er helt normalt at jeg føler det sånn, har en kollega fortalt meg — at det blir et slags antiklimaks etter at vi har levert løsningen — etter måneder med intens jobbing, i tett samspill, med høyt tempo, med masse energi. Men det er fortsatt ting som skal gjøres. Vi tar de etterhvert. Så smidig som vi kan.

Som Magne, prosjektlederen på Operaen sier: “Det handler om samspill, det handler om samhandling, det handler om høy kreativitet, kaos — og så starter den konstruktive jobbingen…. Da skaper vi. Da leverer vi. Da blir det suksess.”


Medlemmer fra Den Norske Opera & Ballett og BEKK står på scenen og feirer at det nye nettstedet operaen.no er tildelt Merket for god design. Flere i teamet holder prisen i været foran en storskjerm som viser løsningen på ulike digitale flater.

Prosjektet var et tett samarbeid mellom ulike fagmiljøer. Teamet besto blant annet av Linda Christin Halvorsen (konsept og informasjonsstruktur), André Nymoen (visuell retning, grafisk design og interaksjonsdesign), Sebastian Steinmann (frontend-utvikling), Mats Knutsen og Tore Lervik (EpiServer-utvikling), Christoffer Arntzen (prosjektleder i BEKK) og Magne Bjella (prosjektleder og primus motor i Den Norske Opera & Ballett).

Cathrine Pia Lund, leder i Den Norske Opera & Ballett, bidro med viktig støtte, forankring og strategiske perspektiver gjennom hele prosjektet.

Bildet illustrerer hvordan mennesker med ulik kompetanse og et felles mål skapte en prisvinnende digital løsning som gjorde kunst og kultur mer tilgjengelig for flere.

Operaen — et digitalt drama i tusen akter — medvirkende:

  • Konsept og informasjonsstruktur: Magnus Revang og Linda Christin Halvorsen

  • Visuell retning, grafisk design og interaksjonsdesign: André Nymoen og Daniel Tveiten

  • Backend-integrasjon: Bent Kristiansen

  • Frontend: Sebastian Steinmann

  • EpiServer-utvikling: Mats Knutsen og Tore Lervik

  • Prosjektleder BEKK: Christoffer Arntzen

  • Prosjektleder og primus motor Operaen: Magne Bjella


Teksten publiseres i sin helhet etter avtale med forfatteren.

Del gjerne kunnskapen videre.

For store resultater skapes sjelden av enkeltpersoner.

De skapes av team.


Videre lesning:



Portico Publish – bøker, blogg og kreative prosjekter

Kommentarer


bottom of page