Här beskriver jag processen med att ta fram den nya webbplatsen till Sveriges Olympiska Kommitté (sok.se) och fördjupar mig i några av alla speciallösningarna samt hur vi tänkt kring dessa.
Har ni bråttom? I så fall kan ni nöja er med att läsa sammanfattningen här.
SOK:s gamla webbplats hade sett i princip likadan ut sedan 2006 och var i stort behov av en total förvandling. Detta innefattade:
SOK.se bestod innan förvandlingen påbörjades av: 166 sidmallar, 1632 sidor, 9079 artiklar, 11842 bilder och 608 filer
Samtidigt fanns ett separat system som bland annat innehöll data om över 4000 svenska idrottare, alla olympiska idrotter, alla olympiska tävlingar som ägt rum sedan 1896 samt alla resultat för de svenska olympierna genom tiderna. Mycket av den här datan låg också på olika ställen av webbplatsen (utan kopplingar) vilket gjorde att stora mängder information behövde uppdateras manuellt på flera ställen.
Det var med andra ord ett stort projekt som väntade med många strukturella och tekniska utmaningar. Vi visste att slutresultatet skulle bli en väldigt omfattande webbplats med massor av information och funktioner men vi ville samtidigt lösa detta på ett sätt som möjliggjorde att så mycket som möjligt skulle sköta sig själv. Redaktörerna skulle trots webbplatsens komplexitet slippa onödigt tekniskt arbete och kunna fokusera på att producera bra innehåll.
Kraftigt sammanfattat så bestod projekt av följande steg:
SOK:s gamla sidstruktur bestod av 21 huvudingångar (exkluderat länk till engelsk version) vilket försvårade för besökarna att hitta rätt, information låg utspridd på olika ställen och en hel del läsvärd information var svår att hitta, vidare fanns andra problem med strukturen som behövde lösas. Med utgångspunkt ifrån förarbetet och kartläggningen av målgruppernas syften (vad olika målgrupper ville hitta på webbplatsen) och med kärnan i SOKs verksamhet i beaktning tog vi fram en ny struktur med fokus på att:
Med den nya strukturen gick antalet huvudingångar ner från 21 till 8 (exkluderat länk till engelsk version) och fick ett tydligt fokus på besökarens perspektiv.
Idrott i allmänhet och olympiska spel i synnerhet bygger mycket på känslor. För en sportintresserad (som jag, och flera av mina kollegor) finns det få saker som slår ett upplopp i en OS-stafett, en klocka som visar grönt vid ett andra åk i slalom, en avgörande period i en hockeysemifinal eller varför inte en avslutande sten med ett olympiskt curlingguld i potten.
Vi ville lyfta fram mer av den olympiska känslan även på webbplatsen och den grafiska formen syftar till att åstadkomma just detta med utgångspunkt i SOKs värdeord såsom dröm, passion, utmaning och världsklass. Vi ville att den grafiska formen skulle inspirera och locka fler till den olympiska rörelsen, ge besökaren en positiv känsla oavsett vad denne är ute efter för information och locka fler till att stödja den svenska olympiska satsningen. Ett medvetet val var att satsa mycket på bilder i betydligt högre utsträckning än tidigare eftersom de har möjlighet att fånga och förmedla känslor.
En självklarthet var också att den grafiska formen skulle fungera responsivt och se bra ut oavsett hur besökaren väljer att konsumera webbplaten. Viktigt var också att tillgodose andra tillgänglighetsaspekter.
Den nya grafiska formen testates också i en enkätundersökning utifrån de viktiga värdeorden för att säkerställa att målet hade uppnåtts.
För några år sedan pratade vi på Limepark mycket om "smarta mallar" - något som alltid finns med då vi skapar mallar i SiteVision för att antalet mallar ska kunna hållas ner, för att underlätta förvaltningen av mallarna samt för att underlätta eventuella framtida ombyggnationer. I detta projekt var vi tvungna att ta detta ett steg längre och även arbeta med "smart data". Jag ska förklara vad jag menar med det luddiga begreppet.
Studera den här bilden som visar några olika sidtyper och datakällor på SOK:
Alla pilar indikerar olika relationer som objekten (oftast sidor/artiklar i SiteVision) behöver ha till varandra för att vi ska kunna åstadkomma det vi vill.
Jag exemplifierar med en av mina favoritidrottare: Charlotte Kalla.
Charlotte Kalla har en sida i SiteVision, den här sidan behöver "veta" saker om sig själv och andra sidor för att listningar och uppdateringar ska hänga ihop på önskat sätt. Sidan behöver bland annat veta:
Det handlar dessutom om ett tvåvägs-medvetande. För tävlingarna som Charlotte Kalla är med i behöver också veta att just hon varit med för att kunna göra en listning av truppen. Sporten (Längdskidor) behöver veta att Charlotte Kalla är en av utövarna. Topp och talanglistningen behöver veta att hon är med i Topp och talangprogrammet för att hon ska bli sökbar där. Tävlingsprogrammet behöver veta vem Charlotte Kalla är osv.
Eftersom vi har mycket av den här informationen i det bakomliggande systemet så vill vi heller inte behöva göra manuella kopplingar av allt detta själv. För om vi börjar tänka på att vi har över 4000 idrottare som vi presenterar, att vi har haft närmare 60 olympiska spel (plus att vi dessutom har världsungdoms-OS, Europeiska Spelen, europa-ungdoms-OS som vi också håller koll på) samt att vi har ett femtiotal olympiska idrotter så förstår vi att det blir en del kopplingar.
Den här bilden visar några av alla de kopplingar som finns mellan sidorna på sok.se i SiteVision:
Hur gör man då för att binda ihop sidor till varandra i SIteVision? Våra krav var:
Vi landade i beslutet att använda oss av relaterad metadata. Alla som jobbat med relaterad metadata vet att det inte är världens roligaste grej att jobba med när man ska lägga in information. Därför byggde vi möjligheten för SOK att med enkla kryssrutor välja mellan upplagda idrotter, idrottare och tävlingar. Vi gjorde även så att lösningen söker igenom sidan och föreslår taggar som matchas. Detta underlättar exempelvis då en artikel ska taggas med idrottare och viljan att behöva scrolla igenom 4000 namn inte är på topp.
Bakom kulisserna sparar lösningen ändå ner riktiga relaterade länkar i SiteVision vilket gör den stabil, framtidssäkrad och egentligen fungerar även utan vår lösning.
Apropå idrottare. Första gången alla idrottare skulle skapas upp i SiteVision gjorde vi detta åt SOK med hjälp av ett skript. Detta skript kollade på alla idrottare som fanns i bakomliggande system, såg till att tagga upp alla idrottare med den info vi behövde till sökningar etc, dessutom skapades alla kopplingar mellan idrottare och dess idrotter samt mellan idrottare och samtliga tävlingar som denne deltagit i. Och hur kul man än tycker det är att skapa sidor i SiteVision så var det många veckors jobb som sparades in på detta sätt. För att hålla koll på förändringar i bakomliggande system har vi ett synkscript som gör uppdateringar mot SiteVision om det skulle behövas.
När vi har all data och alla kopplingar på plats så kan vi dra nytta av detta på en mängd olika sätt.
Jag tänker här uppmärksamma några av de lösningar vi gjort.
Vår lösning för artiklar
Det fanns en mängd roliga och läsvärda artiklar på SOK.se redan tidigare. Utöver att formgivningen var rätt tråkig så var de ofta gömda i PDF:er, nergrävda långt ner i strukturen eller bortglömda. Vi ville öka livslängden för dem, göra dem mer tillgängliga och underlätta för besökare att få tips om andra liknande artiklar.
Vi drar här nytta av vårt taggsystem och utökar det. Vi har fyra olika typer av taggar som en artikel kan ha: Vilken/vilka tävlingar den handlar om, vilken/vilka idrottare den handlar om, vilken/vilka idrotter den handlar om eller vilket ämne den handlar om (ex. OS till Sverige).
Om en artikel exempelvis har skrivits om damernas magiska skidstafett i Sotji så vet vi tack vare taggarna att den artikeln handlar om: OS i Sotji, de deltagande idrottarna (Charlotte Kalla, Ida Ingemarsdotter, Emma Wikén och Anna Haag) och längdskidor. Eftersom besökaren valt att läsa artikeln så kan vi dra den troliga slutsatsen att denne antingen var intresserad av någon av de idrottare som omnämndes i artikeln, eller om Sotji-tävlingarna, eller kanske om längdskidor i allmänhet? I vilket fall så presenterar vi liknande artiklar som handlar om en eller flera av dessa ämnen. Ju fler taggar som stämmer överens, desto högre upp i listningen presenterar vi den artikeln. Resultatet? Jo - följande artiklar föreslås:
Dessutom presenterar vi artikeln i vårt stora artikelarkiv (bestyckat med sök- och filterfunktionalitet), på sidan om Längdskidor, sidan om Sotji samt sidorna om de aktuella utövarna.
Resultatet blir att artiklarna går att nås från flera olika ställen och relevanta sammanhang.
Vill ni ha någonstans att börja läsa artiklar redan nu? Varför inte läsa om Japanen som kom bort under OS i Stockholm 1912.eller om Wassbergs dramatiska guld i Lake Placid 1980 (segermarginalen 1 hundradel). Det finns även ett bra radioklipp i artikeln värt att lyssna på.
Filtersökningar för att snabbt hitta rätt tävling, idrottare, idrott eller artikel
Oavsett om man är ute efter en gammal tävling, framtida tävling, hisorisk olympier eller en av våra framtida stjärnor inom Topp och talangprogrammet etc, så ville vi göra det enkelt för besökaren att hitta rätt. Därför har alla dessa sidor fått filtermöjligheter som gör att man snabbt kan hitta det man letar. Prova själv att exempelvis leta bland olympiader, artiklar på webbplatsen, någon olympier eller varför inte någon av våra främsta OS-medaljörer. Alla listningar ger besökaren själv möjligheten att även välja hur resultatet skall presenteras. Vi jobbar med Ajax för att sökningarna/filtreringarna ska utföras i realtid men självklart finns även fallback för de utan Javascript aktiverat.
Kopplingar mot externa system och sociala medier
Som tidigare nämnts gör vi en hel del kopplingar mot bakomliggande system, exempelvis när vi hämtar ut alla medaljer som Sverige tagit på en viss tävling, eller alla resultat vi har på en viss idrottare och så vidare. Vi går dock ett steg till och ser till att lösningen även förstår vilka idrottare det handlar om (inte bara textmässigt) utan skapar även länkar till rätt personer i SiteVision.
Notera också att medaljbilden vi presenterar är en riktigt guldmedalj från just det OS:et. Detta gör vi i samtliga medaljlistningar. Är vi inne på en idrottare så visar vi en riktigt medaljbild från det OS:et som personen senast tog en medalj i. Carl Bonde tog exempelvis medalj i Amsterdam 1928 och Stockholm 1912 och får i sin medaljlistning länkar till dessa tävlingar och även en annan medaljbild.
Vi låter alltså datan från det bakomliggande systemet integreras i SiteVision på ett sätt som gör att den förstår sitt sammanhang. Smart data.
Förutom kopplingar mot bakomliggande system hämtar vi även in aktuell sidas sociala medier (Facebook, Twitter och Instagram). Exempelvis på de idrottare som använder sig av det eller en idrott. Så här ser det ut på sidan om Alpint:
Tävlingsprogrammet
Vi byggde möjlighet att skapa upp tävlingsprogram. Återigen drar vi nytta av taggar men också av datum som vi redan har på evenemanget. Därefter känner vi av vad klockan är just nu och vilken dag det är. Utifrån det kan vi tona ner det som varit samt lyfta framdet som sker just nu. Vi presenterar en liten bild och länk till de idrottare som är med i tävlingen.
På en idrottare kan vi i och med detta känna om denne tävlar just nu (eller imorgon) och kan således presentera en liten påminnelse om det:
På motsvarande sätt gör vi om man är inne på en idrott som har en tävling på gång.
Är man inne på en tävling så presenterar vi i grunden slumpmässigt tre idrottare ur truppen som deltog / ska delta vid den tävlingen man är inne på. På samma sätt gör vi med de idrotter som är med på tävlingen. Här drar vi dock nytta av att vi vet vilka idrottare och idrotter som är i hetluften just nu (som har tävling just denna dag) och låter därför just dessa idrottare och idrotter ha förtur i slumpningen.
Resultatet blir att sidan känns ännu mer aktuell och åter igen utnyttjar att sidan vet saker om sig själv och om andra sidor. Eftersom den även vet aktuellt datum så kan sidan själv anpassa sig utan någon redaktörs inblandning.
Smarta söken
Vi ville göra något extra av den vanliga sökfunktionen också. Hur kan vi göra den lite smartare? Varför inte titta lite på hur Google gör? Vi har sedan tidigare identifierat vissa olika typer av sidor (idrotter, idrott, kontaktpersoner, tävling) så om man söker efter en viss idrottare - exempelvis Thomas Wassberg så får man nu följande tillbaka:
VI lyfter alltså ut lite info om det mest troliga sökträffen - här märker vi att det är en idrottare det handlar om och presenterar därför ett litet utdrag om Thomas Wassberg. Hade flera idrottare haft samma namn visar vi den med flest medaljer.
Söker du istället på "Calgary" så kommer vi tro att det är OS i Calgary 1988 du är ute efter och presenterar då det istället (och på ett annat sätt än idrottaren).
På motsvarande sätt gör vi med en idrott eller en kontaktperson inom SOK.
Notera också min felstavning i den första söken: Tomas Wassberg (han heter ju Thomas). Det här med namn kan vara svårt - vi tillåter därför en del felstavningar som ändå i de allra flesta fall ger rätt träff.
Bildarkiv
På samtliga bilder som läggs in på någon sida dyker - om man är inloggad - upp en liten länk till vår tagglösning:
Med hjälp av denna kan redaktörerna tagga (kryssa i) vilka personer som är med på bilden.
Detta gör att vi på repskive idrottares sida kan vi då dessutom presentera ett bildarkiv med alla bilder som idrottaren förekommer i.
Fler grejer?
Bland andra funktioner finner vi:
Besök sok.se nu för att återuppleva foppas straff under OS i Lillehammer, spana in truppen under OS i Rom 1960, läsa artiklar inför OS i Rio, gräva ner sig i Gert Fredrikssons framgångsrika karriär, lära sig med om vad Topp och talangprogrammet egentligen är eller helt enkelt bara surfa runt på sok.se och drömma om nästa stora olympiska ögonblick.
Limepark AB
Gjuterigatan 9
553 18 Jönköping
Vägbeskrivning
Limepark AB
Gotlandsgatan 46
116 65 Stockholm
Vägbeskrivning
Limepark AB
Folketshusvägen 10
860 35 Söråker
Vägbeskrivning
Limepark AB
Kansligatan 1
703 61 Örebro
Vägbeskrivning
Limepark AB
Magasinsallén 2
891 31 Örnsköldsvik
Vägbeskrivning