Slik delte de ut Visuelt-prisene digitalt
Sydde sammen visuelt.tv med Craft CMS, CometChat, Trippel-M og Steinar Sagen. đ
Da koronakrisa kom og truet Ä avlyse en av designbransjens viktigste dager, ble vi med pÄ en helomvending.
Introduksjonen
I oktober ble vi kontaktet av Grafill (den norske bransjeorganisasjon for design og illustrasjon), fordi vi var én av tre byrÄer de vurderte som samarbeidspartner pÄ konseptutvikling og design av prisutdelingen de arrangerer hvert Är; Visuelt.
Det var en stor fjĂŠr i hatten for oss, bare dĂ©t Ă„ bli vurdert, men vi ble ikke valgt â mye fordi vi allerede er ganske etablert i bransjen, og utvelgelsen skal bidra til Ă„ lĂžfte nyoppstarta byrĂ„ opp og frem. Valget endte opp pĂ„ Also Known As, som vi stĂžttet fullt ut. De er et fantastisk, banebrytende og sjangerutfordrende byrĂ„ som vi elsker.
Og nÄ var dialoglinjen mellom oss og Grafill Äpnet!
Det grafiske konseptet skrek etter en digital prisutdeling.
Enter covid-19
Vi, som alle andre byrÄer i Norge, gledet oss til Ä delta pÄ Visuelt-utdelingen i Oslo i april, men etterhvert som pandemien tok overhÄnd innsÄ vi at det ikke kom til Ä bli noe av.
Men vi fÞlte at det grafiske konseptet Also Known As hadde laget for Visuelt skrek etter en digital prisutdeling, blant annet fordi det spilte pÄ TV-baserte floskler og referanser.
Vi hev oss rundt, laget en kjapp trÄdskisse som forklarte konseptet vi sÄ for oss, og tok kontakt med Grafill for Ä presentere dette.
Grafill og Also Known As ble umiddelbart trigget av idéen, og prosessen med Ä fÄ dette gjennomfÞrt startet samme dag som vi tok kontakt.
Realiseringen av visuelt.tv var i gang!
Veien fra idé til gjennomfÞring
For Ä fÄ til prisutdelingen var det behov for:
En prisutdeler
Steinar Sagen er tro i sin tjeneste som prisutdeler for Visuelt, og ville gjerne vÊre med pÄ denne varianten ogsÄ.Et produksjonsstudio og en streamingleverandÞr
Trippel-M tilbyr begge disse tjenestene, og ble valgt av Grafill.Et design for lĂžsningen
Also Known As laget et designkonsept, som vi tilpasset til digitale flater.
SÄ snart disse brikkene falt pÄ plass, startet vi pÄ programmeringen av lÞsningen.
#1: Design
For at dette skulle fĂžres som noe spesielt, og for Ă„ bidra til samhold, ville vi lage et eget univers for prisutdelingen. Vi ble enige om lĂžsningen skulle inneholde:
- En chat, slik at alle kunne delta pÄ prisutdelingen, pÄ samme mÄte som smÄpraten i krokene den fysiske prisutdelingen.
- Etterhvert som vinnere ble utlyst, skulle kategoriene avdukes pÄ Grafill/Visuelt sine sider, og gjÞres tilgjengelig gjennom nettsiden vi laget
- I tillegg Ăžnsket vi en liten fanfare etter hver vinner ble annonsert. Dette lĂžste vi ved at det regnet emojis over siden hver gang.
#2: Chat
For at vi kunne tilpasse chatten med de funksjonene vi Ăžnsket, leta vi hĂžyt og lavt blant forskjellige leverandĂžrer av API-er og SDK-er vi kunne bruke. Til slutt fant vi CometChat, som viste seg Ă„ vĂŠre et helt fantastisk SDK, som vi kunne tilpasse akkurat som vi Ăžnsket.
Her er noen greier vi fikset:
- Innlogging med bÄde brukernavn og byrÄ
Prisutdelingen er jo en form for kollegial rivalisering, sÄ vi ville at hver bruker skulle ha en byrÄtilhÞrighet til navnet sitt. - Emoji og sin egen farge
Hver bruker kunne velge sin egen emoji foran navnet sitt, og farge pÄ teksten, bare for Ä sprite opp den tekst-TV-inspirerte estetikken. For Ä lÞse dette lagret vi rett og slett emojien og fargen som en del av brukernavnet som ble generert, og ekstraherte ut dette fra visningen av brukernavnet i chatten.
Et brukernavn kunne se slik ut:
f01 đ Magnus / Skogen
f01 er hexkoden for en rÞdtone, som ble brukt til Ä sette valgt farge pÄ teksten.
#3: Annonsering av vinner
Hver gang en vinner ble annonsert av Steinar, ble vinnerkategorien avduket pÄ Grafill/Visuelt sine nettsider, og gjort tilgjengelig fra streamingsiden.
Rent teknisk lÞste vi dette med Ä sette opp en enkel publiseringslÞsning (Craft CMS) tilknyttet visuelt.tv. Hver kategori hadde hver sin entry, og nÄr den ble publisert ble den sÞmlÞst gjort synlig pÄ nettsiden, via en EventSource med retry pÄ 15 sekunder.
Dette er en enkel mÄte Ä hente ut sanntidsdata pÄ, og siden dette var enveiskommunikasjon med minimal datamengde, var valget av denne lÞsningen en no-brainer.
#4: Emojiregn
NÄr en vinner ble avduket regnet det emojis over siden. Dette lÞste vi ogsÄ pÄ en enkel mÄte; hver gang det kom en ny beskjed/vinner fra EventSource-lÞsningen over, ble en CSS-animasjon trigget.
#5: Streamen
Streamen ble levert direkte fra Trippel-M, og var like enkel som Ă„ implementere en YouTube-video.
Den fungerte helt perfekt, uten noen som helst avbrudd eller bufring.
#6: Passord-beskyttelse
For Ä vÊre med pÄ prisutdelingen mÄtte man melde seg pÄ, pÄ forhÄnd. Vi satte opp en midlertidig side, med info om prisutdelingen, hvor man meldte seg pÄ. Like fÞr utdelingen fikk alle en mail med et passord, som de brukte for Ä gÄ inn i prisutdelingen
Hovedsakelig ble dette gjort pga avtalen med Steinar Sagen, som sa at dette ikke kunne vĂŠre en Ă„pen lĂžsning.
#7: Server
Vi satte opp denne siden pÄ en dedikert server, med mer enn nok kraft til Ä holde mange besÞkende samtidig. For Ä vÊre helt sikker satte vi faktisk opp en ekstra server, for load balancing, i tilfellet det skulle skje noe uforutsett.
Denne var i tillegg satt opp med en speilet side (visuelttv.com), sÄ vi hadde bÄde en plan B og plan C.
Oppsummering
Det var til sammen 1.950 brukere som fulgte prisutdelingen, og over 1.100 som logget seg inn pĂ„ chatten, og lĂžsningen bidro til en fĂžlelse av bransjesamhold â akkurat pĂ„ samme mĂ„te som den fysiske prisutdelingen.
Kanskje kan en kombinasjon av fysisk og digital utdeling vĂŠre en mulighet for fremtiden?
En slik lÞsning vil aldri trumfe det fysiske arrangementet, men den har ogsÄ mange fordeler. En av de stÞrste fordelene er at prisutdelingen blir tilgjengelig for de som av forskjellige grunner ikke kan delta pÄ den fysiske uansett.
Kanskje kan en kombinasjon av fysisk og digital utdeling vĂŠre en mulighet for fremtiden?
Vi elsket Ä vÊre med pÄ dette, og er veldig stolte over hva det ble til! Det er utrolig hva man kan fÄ til pÄ kort tid, og vi vil berÞmme Grafill og alle involverte for Ä vÊre sÄ lÞsningsorienterte og fremoverlente. High five!
