Projekt: Jerringpriset 2019

Beställare: Sveriges Radio, Radiosporten

Utmaning: Grafik som skulle lyfta fram Jerringprisets elva kandidater till priset 2019. Önskemålet var, för webben, interaktiv grafik med länkar till ljud och omröstning, samt för Instagram, Twitter och Facebook fristående grafik med både enskilda bilder och kollage. På webben, dvs sverigesradio.se, önskade beställaren grafik med playknapp för fristående ljud (ett ljud för varje kandidat, möjligt att byta ut under andra omgången) samt tre cta-knappar som vid ”klick” enkelt skulle kunna ta besökarna till omröstningen – på webben, via telefon (olika nummer i omgång ett och två) eller via SVT:s DUO-app. Grafiken på webben skulle också innehålla text med motivering till nomineringen, logga för Radiosporten och namn på kandidaten. Ett krav var att det skulle vara lätt att ta bort kandidater ur den interaktiva listan, som måste kunna uppdateras inför omgång två och tre. För grafiken på sociala medier tillkom också Jerringprisets egen unika logga, som ersatte Radiosportens logga. Ett ytterligare önskemål var att implementera en slumpgenerator, för att inte samma kandidater skulle ligga i topp hela tiden och försämra chansen för andra att ta emot röster.

Lösning: Mobilanpassade responsiva ”kandidatkort” för webbens ”sandbox”, där jag itererade fram wireframes i Adobe XD som utgångspunkt för den interaktiva lösningen, samt skapade det grafiska underlaget i Photoshop. Arbetet med grafik och bilder i Photoshop gick till så att alla bilder, loggor, text och grafiska element placerades i olika lager, som enkelt kunde döljas då varje bild sparades ner som png för webb eller sociala medier. Filen blev stor, men gjorde arbete mycket snabbare när det senare skulle göras ändringar i flera omgångar. Kollage gjordes på samma sätt för SR:s liggande fullformat och i fyrkantigt Instagramformat, för att även fungera för användning i SR Play-appen och i SVT:s DUO-app.
Överföringen till kod gick smidigt, med flera itereringar fram till färgval som gjorde att den önskade textdelen inte störde ut bilddelen. Varje kodat ”kandidatkort” dvs den kod som lades ovanpå det grafiska underlaget, gjordes redaktörbar – vilket innebar att motiveringstext, länkar till bild, fristående ljud samt omröstning via telefon, webb och SVT:s DUO-app (djuplänk direkt in i appen) enkelt kunde ändras i html-kodpaketet för SR:s ”sandbox”. Varje enskild kandidat hade en egen ”kodsnutt” som det var väldigt lätt för en webbredaktör att redigera bort, även utan någon ingående kunskap om kod. Projektet innefattade även omgörning av programsidan för Jerringpriset, där sportens varumärkesfärg användes som bakgrund. För att kunna se gensvaret, dvs hur många besök och klick våra interaktiva ”kandidatkort” fick, beställde jag mätning av data på kandidatsidan och omröstningssidan genom personaliseringsteamet. Data visade att bägge sidorna hade haft runt 30 000 unika besökare en knapp vecka in i första omgången, vilket var ett mycket bra resultat. Tillgängligheten förbättrades också i den kodade delen av den interaktiva grafiken. Det vi inte lyckades med var önskemålen om att i första hand driva trafik till Radiosportens egna omröstningsformulär på webben. Många besökare valde istället att rösta genom DUO-appen, som visserligen kräver inloggning, men å andra sidan efter installation var föredömligt lätt att använda med omröstningen bara tre klick bort.

Min roll: Projektledning och eget arbete i tvärfunktionellt team. Möten med samt insamling av underlag från beställaren för att sätta ihop kravställning, en backlog och fördela arbetsuppgifter. Samarbete med flera andra team. Driva arbetet mot leverans. Beställning av interaktiva funktioner i samarbete med utvecklare, samt analys av användardata. Design av all grafik inklusive wireframes i Adobe XD och Photoshop. Överföring av design till kod och iterering av slutresultat i samarbete med utvecklare, där jag lämnade specifikation av typsnitt, färger, placering av grafik mm till utvecklaren Niklas Emilsson, som tog fram en mycket elegant lösning. Under lanseringsdagarna arbetade jag på Radiosportens redaktion och hjälpte till med implementering av html-kod och länkar i sandbox. Förutom grafik lade jag också upp alla fristående ljud och foton i egna artiklar som tillsammans med kollagen fortfarande ligger kvar på SR:s webb. Arbetet redovisades vid en stordemo för teknikteamen och digitala redaktörer på Sveriges Radio i december 2019, där alla som bidragit med insatser (även SVT) var inbjudna att berätta om sin del (presentation finns). Uppföljning med nöjd beställare. Referens: Mark Malmström Fast, tf Digitalchef, Ekot (under den tid jag arbetade).

När: Den interaktiva kandidatgrafiken publicerades via ”sandbox” från 20 nov 2019–24 jan 2020 på sverigesradio.se. Grafik för Twitter, Instagram och Facebook publicerades kontinuerligt under tiden 20 nov 2019 fram till Idrottsgalan 27 januari 2020 av digitala redaktörer vid Radiosporten. Kollagen över kandidater i första och andra omgången publicerades även i SVT:s DUO-app.

Länk: https://sverigesradio.se/sida/gruppsida.aspx?programid=3295&grupp=16930&artikel=7348062

Jerringprisets programsida fick Sportens gröna varumärkesfärg som bakgrund, med samma grafiska figurer som i Radiosportens rörliga materials slutvinjett.
Här syns ett av ”kandidatkorten” med all den interaktiva grafiken som overlay.
Länkar till bild och från CTA-knappar, samt texten i den mörkgrå rutan, kan i den kodade versionen för html-blobb enkelt ändras av en redaktör som antingen redan har kunskap om kod, eller har fått instruktioner om hur man gör. Varianter av denna grafik, utan interaktivitet, har sparats ner för Twitter och Instagram. Fotona har även använts för ett kollage. Grafik/wireframes: Aminata.
Redaktörbar kod, en kodsnutt för varje kandidat.
Detta är underlaget till den interaktiva grafiken på webben, som laddades upp som png-bild och utgjorde underlag för den kodade grafiken.
Grafiken för Instagram och Twitter såg lite annorlunda ut, med mer information.
Här några vyer från SR Play-appen, där Jerringpriset presenterades med kollage i två olika format.
Vi förmedlade kontakt mellan olika team för bästa möjliga resultat. Här en ettapuff från SR:s förstasida på lanseringsdagen.
Mobilvy från SVT:s app DUO.