PROJEKT: JERRINGPRISET 2019–2020

Beställare: Sveriges Radio, Radiosporten

Utförare: Internt tvärfunktionellt team, där jag agerade teamlead för uppdraget. Samarbete med SVT:s DUO-team – och gemensam slutredovisning av projektet vid stordemo för alla utvecklingsteam på företagen.

Utmaning: Interaktiv grafik för omröstning, som skulle lyfta fram Jerringprisets elva kandidater till priset 2019. Önskemålen var – för webben: interaktiv grafik med länkar till separata ljud, bilder och omröstning – för Instagram, Twitter, Facebook, SR Play-appen, samt SVT:s DUO-app: fristående grafik med både enskilda bilder och kollage. Scrolla nedåt för att se exempel på bilder.

Specifikationer: På sajten sverigesradio.se, önskade beställaren att grafiken skulle ha en playknapp för fristående ljud (ett ljud för varje kandidat, möjligt att byta ut till ett nytt under andra omgången). Den skulle också ha tre CTA-knappar som vid ”klick” enkelt skulle kunna ta besökarna till omröstningen – på SR:s egen webb, via telefon (ändring till nya nummer i omgång ett och två) eller via SVT:s DUO-app. Grafiken på webben skulle även innehålla text med motivering till nomineringen, logga för Radiosporten och namn på kandidaten. För grafiken på sociala medier tillkom också Jerringprisets egen unika logga, som ersatte Radiosportens logga.

Ett krav var att det skulle vara lätt att redigera bort kandidater ur den interaktiva listan, som skulle uppdateras två gånger, inför omgång två och tre. 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 spontana 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 en interaktiva lösning, samt skapade det grafiska underlaget i Photoshop. Separata bilder för sociala medier skapades också i Photoshop. Kodpaketet, som hade redaktörbara texter, samt slumpgenerator i javascript, togs fram i samarbete med teamets utvecklare. Allt skapades med tanken att vara framtidssäkrat och kunna återanvändas vid behov. Jag är inte längre kvar på SR, men Radiosportredaktionen har glädjande nog använt våra mallar även till årets omröstning, dvs grafiken för priset 2020, vilket känns som ett bra betyg.

Process: Arbetet med grafik och bilder i Photoshop gick till så att sportredaktionen först valde ut bilderna. Därefter placerade jag alla bilder, loggor, text och grafiska element i olika lager i Photoshop, som enkelt kunde döljas när varje bild skulle sparas ner som png för webb eller sociala medier. Filerna blev stora, men arbetssättet gjorde att allt gick mycket snabbare när det senare skulle göras ändringar i flera omgångar. Det var också mycket lätt för redaktörerna att byta ut bilder. Kollagefilerna med alla kandidater – för SR:s liggande fullformat och fyrkantigt Instagramformat – hanterades separat för att fungera även för användning i SR Play-appen och i SVT:s DUO-app. Alla mallar överlämnades efter den första implementeringen till sportredaktionen, för att kunna återanvändas vid behov.

Överföringen av designen till kod gick smidigt, med flera itereringar kring färgval för textplatta och text för att den önskade textdelen inte skulle störa ut bilddelen och där alla “knappar” hamnade på rätt plats i sittning med designer och utvecklare. Tillgängligheten förbättrades också i den kodade delen av den interaktiva grafiken.

Varje kodat ”kandidatkort” dvs den kod som lades ovanpå det grafiska underlaget, gjordes redaktörbar – detta 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 eller ta bort helt, ä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 innan lansering mätning av data på kandidatsidan och omröstningssidan genom personaliseringsteamet. Insamlade data visade sedan att bägge sidorna haft runt 30 000 unika besökare vardera en vecka in i första omgången 2019, vilket var ett mycket bra resultat.

Det vi inte lyckades med var önskemålet om att inte bara driva trafik till Radiosportens egenproducerade omröstningsformulär på webben utan att också locka besökarna att gå igenom hela processen med att fylla i namn, adress och andra detaljer i sju olika fält – för att kunna få en radiosporttröja – och sedan rösta. Formuläret skulle behövt göras om och förenklas, men kunde av säkerhetsskäl (kring röstningsprocessen) inte hanteras av oss som utvecklade grafiken. 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: > klicka på kandidatknapp på SR:s webbsida > klicka på DUO:s kandidatknapp > bekräfta rösten.

Min roll: Teamlead i projektet, designarbete och planering av möten, i det tvärfunktionella teamet och med beställaren för att samla in underlag, sätta ihop kravställning, backlog och fördela arbetsuppgifter. Samarbete med 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 att länka till grafik lade jag också upp alla fristående ljud och foton i egna artiklar som tillsammans med kollagebilderna 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 då jag arbetade där).

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.

Även i år använder Radiosporten våra mallar.

Länk: Jerringpriset 2019
Jerringpriset 2020

.

JERRINGPRISET 2019

Mockup: 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 (html-kod i sandbox) 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 syns ett av ”kandidatkorten” med all den interaktiva grafiken som overlay.

.

Fotomontage med kandidaterna 2019 i sista omgången, gjord i mall för Photoshop.

.

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.

.

Jerringprisets programsida fick Sportens gröna varumärkesfärg som bakgrund, med samma grafiska figurer som i Radiosportens rörliga materials slutvinjett.

.

Mobilvy från SVT:s app DUO.

.

JERRINGPRISET 2020

Sportredaktionen har hedrande nog använt våra mallar i Photoshop även för årets omgång av Jerringpriset.

.

Underlaget som den interaktiva grafiken läggs ovanpå, ser ut så här när det utformats i vår Photoshopmall.

.

Årets overlay har något modifierade element, där CTA-knapparna ligger högre upp
i bilden. Bilden har redaktörbar motiveringstext.

.

Precis som tidigare ligger kandidaterna i en lång scrollbar lista uppifrån och ner på hemsidan sverigesradio.se.

.

Även på Instagram används samma mall, med Jerringprisets
egen logga i övre högra hörnet.

.