Hatprat er #ikkegreit

Tidsperiode
Kunde
Leveranse
Samarbeidspartner
URL
2017
Bufdir
Backend, design, frontend, research, ux
Geelmuyden Kiese, Splay, Hinda Fahre
Prosjektbeskrivelse

Bufdir ønsket, i samarbeid med Geelmuyden Kiese og SandeFredin, å utvikle en kampanjeside for å øke bevisstheten rundt hatytringer på nett. Hatprat er dessverre et økende problem i vårt samfunn, og i Norge har nesten annenhver 16 år gamle jente opplevd hatprat. Med på laget var YouTube-stjerne Amalie Olsen, som er en av de som daglig må takle problemet hets og hatytringer gjennom hennes digitale kanaler.

Vi ville vise at hatprat på nettet kan sette spor selv utenfor den digitale verdenen. SandeFredin – med konsept og ide fra Geelmuyden Kiese – designet og utviklet en kampanjeside hvor man kunne ta avstand til hatprat gjennom å fjerne håndtegnede hatord fra kroppen til Amalie. Jo flere som tok avstand, jo mer forsvant ordet.

Kampanjesiden er selvsagt responsive, da mesteparten av de unge brukerne ofte utfører sine nettaktiviteter via mobil eller andre touch-enheter. Designretningen er mørk og minimalistisk, for å understreke budskapet samt å gjøre delingen så enkel som mulig.

Kampanjesiden ble kickstartet med animasjonen av logoen, som ble skrevet inn, for å styrke assosiasjonen til digital hatprat hvor tastaturet er våpenet. Deretter ble en rask film vist av Amalie, som en teaser og introduksjon til kampanjen.

Vi måtte ha masker i forskjellige geometriske former som er nøyaktige nok til å dekke både de små og store ordene. De må i tillegg kunne inneholde bildet av Amalie uten tattoveringer og ha unik gjennomsiktighet per ord.

Ved å bruke canvas kan vi gjennom en rekke tegneoperasjoner tegne bildet av Amalie uten tattoveringer over predefinerte vektormasker. Hver maske henter sin unike gjennomsiktighet fra sitt tilsvarende ord i databasen.

Canvas gir oss ingen mulighet til å lytte etter brukerinteraksjon på hver maske. Vi laget derfor et nytt skjult canvas som inneholdt alle maskene med hver sin unike hexverdi. Vi kunne dermed lytte etter interaksjon på hoved-canvas’et og sjekke posisjonen opp mot farge-canvas’et, lese av fargen på denne posisjonen og dermed vite hvilket ord bruker interagerer med.

I løpet av en uke hadde 40% av målgruppen – 13 til 17-åringer – engasjert seg i kampanjen, og ordene var borte. Gjennomsnittlig besøkstid var nesten 5 minutter, og flere andre kjente personligheter kastet seg på for å fremme budskapet – mest nevneverdig statsminister Erna Solberg.

I tillegg til å ha nådd 2.2 millioner gjennom sosiale medier i et land med 5 millioner, har over halve Norges befolkning sett kampanjen gjennom nasjonale mediekanaler som nyhetssendinger og aviser.

Team SandeFredin
Bård Solvang - UX, frontend, backend
Jonas Fredin - UX, frontend
Vetle Dalvik Eriksen - UX, frontend
Jørn-Tore Sande - UX, design
Teknologier
Canvas
Canvas
CSS3
CSS3
Firebase
Firebase
HTML5
HTML5
JavaScript
JavaScript
React
React