Så byggde vi sok.se

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.

​Bakgrund - ett projekt med många utmaningar

SOK:s gamla webbplats hade sett i princip likadan ut sedan 2006 och var i stort behov av en total förvandling. Detta innefattade:

• En ny struktur
• Ny grafisk form
• Nya mallar och funktioner
• Integrationer mot bakomliggande system
• Effektivare arbetssätt för underhåll av informationen

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.

Så gick projektet till

Kraftigt sammanfattat så bestod projekt av följande steg:

• Förarbete med utgångspunkt från webbplatsens målgrupper och syften
• Konkretisering och prioritering av syften, prioriering av målgrupper, framtagning av strukturförslag.
• Workshop utifrån framtaget strukturförslag med syfte att renodla strukturen.
• Framtagning av Wireframes samt förslag på innehållstuktur
• Designfas utifrån framtagna wireframes
• Enkätundersökning för att bland annat säkerställa att designen förknippades med de värdeord som var viktiga för SOK.
• Responsivt mallbygge i SiteVision
• Framtagning av en mängd olika typer av specialfunktionalitet
• Framtagning av integrationer mot bakomliggande system
• Testning
• Uppföljning mot fokusgrupp (som fick genomföra olika testuppgifter mot den nya webbplatsen).
  

Struktur med besökaren som utgångspunkt

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:

• Antalet huvudingångar skulle minskas och prioriteras utifrån vad besökarna egentligen är ute efter. Detta utan att kompromissa bort de kärnbudskap som SOK vill förmedla.
• Namnsättning av sidor skulle hjälpa besökaren att förstå vad som låg bakom respektive ingång.
• Information av samma typ skulle samlas på samma ställe
• Ingen av huvudingångarna skulle leda till annan webbplats eller sida som krävde inloggning (såsom fallet var med gamla sok.se)
• Läsvärt material skulle lyftas fram på ett bättre sätt.

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.

Grafisk form med OS-känsla

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.

En grundläggande teknisk utmaning - behovet av "smart data"

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:

• Vilken idrottare det handlar om i det bakomliggande systemet
• Vilken idrott håller Charlotte Kalla på med (koppling mot en sida i SiteVision)
• Vilka olympiska tävlingar har hon deltagit i?
• Vilka bilder finns upplagda i SiteVision taggade med henne?
• Vilka artiklar finns publicerade i SiteVision som handlar om henne?
• Pågår det någon tävling de närmaste dagarna där hon deltar? (koppling mot tävlingsprogrammet som är artiklar i SIteVision).

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:

• Det måste vara något som är inbyggt i SiteVision (vi vill inte bygga ett CMS i CMS:et)
• Det måste vara sökbart
• Det måste stödja möjligheten att skapa flera kopplingar på samma objekt
• Det måste ge hårda kopplingar mellan sidor
• Vi måste kunna utnyttja samma teknik för att kunna tagga sidor/artiklar

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.

En genomgång av några olika sidtyper och dess specialfunktionalitet

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:

• Nedräkning till de tre nästkommande evenemangen på startsidan
• Specialbyggd kontaktlösning i svensk och engelsk instans. Med taggningar som gör att vi kan lyfta ut kontaktpersoner till den idrott de är ansvariga för
• SOKs stöd som på ett enhetligt sätt (med hjälp av flervalsmetadata) kan presentera hur SOKs stöd ser ut inom olika idrotter
• Dela och prenumerera
• Färgkodade taggningar av de tävlingar som idrottaren är med i (med korrekt länk till tävlingen) beroende på vilken typ de är.

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.