FC Inter Turku – verkkosivustokokonaisuuden uudistus

Lähtötilanne ja tavoitteet projektille

FC Inter, yksi Veikkausliigan perinteikkäimmistä ja menestyneimmistä seuroista, pyysi G-Worksilta apua verkkosivustonsa uudistamiseksi. Heidän tavoitteensa oli päivittää sivusto, joka ei enää vastannut seuran tarpeita eikä strategiaa. Sivuston kehittämiskohteina olivat visuaalisuus, teknologia sekä sisältörakenne ja sisällön esitystapa.

Pelistrategia suunnittelutyön pohjaksi

Projektin alkaessa oli ensisijaisen tärkeää luoda tarkka pelistrategia. Workshopissa G-Works ja FC Inter arvioivat yhteistyössä nykyisen verkkosivuston puutteet ja asettivat uuden sivuston tavoitteet. Lisäksi määriteltiin kohderyhmät, suunniteltiin rakenne, ja linjattiin visuaaliset sekä tekniset suuntaviivat. Suunnittelun ja toteutuksen perustana käytettiin FC Interin työryhmän kokoamia tarvemäärittelymateriaaleja, joita analysoitiin huolellisesti. Määrittelyssä oli tärkeää ottaa huomioon se, että suunniteltava ratkaisu yhdistäisi edustusjoukkueen viestinnälliset ja kaupalliset tavoitteet, FC Interin merkittävän junioritoiminnan sekä yhteisöllisen toiminnan.

UX ja UI -suunnittelu

Kun uuden verkkosivuston määrittely ja konseptointi oli saatu päätökseen, suunnittelutyö alkoi sujuvasti. Sivuston rakenteellisesti merkittävin päätös oli jakaa FC Interin kolme pääsisältöaluetta – edustusjoukkue, junioritoiminta ja InterAction-ohjelmakokonaisuus – erillisiksi alasivustoiksi. Tämä toteutettiin kuitenkin siten, että kävijöille varmistettiin vaivaton navigointi eri alasivustojen välillä. Vaikka kullakin alasivustolla on omat erityispiirteensä, säilytettiin niissä visuaalinen yhtenäisyys.

Visuaalisen ilmeen suunnittelussa löydettiin nopeasti yhteinen suunta. FC Interin projektitiimi ansaitsee tästä myös erityiskiitokset. Yhteisten suunnittelupalaverien aikana saatiin tehokkaasti vietyä sivuston ulkoasuja eteenpäin. Tehokkaaksi toimintamalliksi suunnittelussa osoittautui myös ns. reaaliaikainen suunnittelu, jossa G-Worksin suunnittelija jakoi Figma-suunnittelutiedostoja suoraan projektiryhmälle palavereissa ja teki tiedostoihin reaaliaikaisia muutoksia palaverin kommenttien ja keskustelujen perusteella.

Teknologia sivustolla

Uusi verkkosivusto on teknisesti moninainen kokonaisuus. Siinä on käytetty G-Worksin uusinta teknologiaa, jossa verkkosivuston backend (sisällönhallinta) ja frontend (käyttäjänäkymä) on eriytetty. Tämä mahdollistaa sivuston nopean toiminnan myös laajemmissa ja monimutkaisemmissa sivustoissa. Teknologiaratkaisu parantaa myös tietoturvaa ja edesauttaa integraatiomahdollisuuksia. Sisällönhallintaan valittiin WordPress, joka oli FC Interille tuttu alusta jo ennestään. Käyttöliittymän kehitykseen valittiin React / Next.js, joka kunnioittaa WordPressin omaa logiikkaa sivupohjien valitsemiseen. WordPress-datan hakemiseen valikoitui GraphQL joka mahdollistaa kaiken tarvittavan datan hakemisen samalla kertaa.

FC Interin kolme pääsisältöaluetta (edustusjoukkue, junioritoiminta, InterAction-toiminta) on eriytetty omiksi alasivustoikseen WordPressin Multisite -toiminnon avulla. Tämän ansiosta sisällönpäivittäjät voivat sujuvasti siirtyä eri alasivustojen hallintanäkymiin ja tarpeen mukaan määritellä käyttöoikeuksia alasivustojen välille.

Vaikkakin sivusto näyttäytyy yhtenä laajana kokonaisuutena loppukäyttäjälle, on kyseessä kolme erillistä käyttöliittymää. Tämä mahdollistaa sen, että pystymme tarvittaessa sivukohtaisesti muuttamaan yksittäisen verkkosivuston käyttäytymistä ilman, että teemme muutoksia sisällönhallintaan.

Yksittäinen sivu on aina staattisesti esirakennettu, jonka ansiosta sivujen selaaminen on salamannopeaa. Tämä ei kuitenkaan tarkoita sitä, etteikö perinteiset esikatselu ja päivitystoiminnallisuudet olisi käytettävissä. Staattisesti rakennetut sisältösivut mahdollistavat sen, että näemme mahdolliset virheet ennen kun ne päätyisivät tuotantoon varmistaen virhevapaan käyttäjäkokemuksen.

Infra on rakennettu niin, että se kestää suuren kävijämäärän, etenkin isojen pelien aikana. Jokainen koodillinen muutos on versioitu siten, että pystymme tarvittaessa sekunneissa ohjaamaan kävijät tiettyihin edellisiin versioihin. Kun käyttöliittymää kehitetään erillään WordPressin perinteisestä taustasta, sitä voidaan ajaa suoraan tuotantorajapintaa vasten. Tämä tarkoittaa, että kehittäjät voivat testata ja iteroida nopeasti reaaliajassa, koska he näkevät välittömästi, miten muutokset vaikuttavat todelliseen tuotantoympäristöön.

Automaattisesti verkkosivustolle päivittyvät ottelu- ja tilastotiedot

Verkkosivuston yksi keskeisistä toiminnoista on tulevien ja menneiden otteluiden sekä joukkueiden ja pelaajien tilastotietojen ja sarjataulukoiden näyttäminen. Tätä tarkoitusta varten sivusto integroitiin Suomen Palloliiton tilastodataan Torneopal-järjestelmän kautta. Integraation ansiosta kaikki tilastot päivittyvät sivustolla automaattisesti. Lisäksi loimme mahdollisuuden täydentää Torneopalista saatavia tietoja omalla datallamme WordPressin kautta.

Toiminnallisuus ei rajoitu vain edustusjoukkueen tilastoihin, vaan olemme laajentaneet sen kattamaan myös FC Interin noin kaksikymmentä juniorijoukkuetta. Niinpä myös juniorijoukkueiden ottelutiedot ja sarjataulukot päivittyvät automaattisesti junioritoiminnan omalle sivustolle.

Viestinnällisyyden huomiointi suunnittelussa ja tekniikassa

FC Interin viestintä on monipuolista ja sitä on paljon. Verkkosivusto suunniteltiin toimimaan aktiivisen viestinnän eturintamassa. Sivusto välittää uutisia, otteluraportteja, otteluennakoita, videohaastatteluja, tapahtumatietoja ja sosiaalisen median päivityksiä jalkapallokansalle. Vaikka eri alasivustot tarjoavat omat julkaisualustansa, on suunnittelussa otettu erityisesti huomioon sujuvat siirtymät eri alasivustojen julkaisujen välillä.

Verkkosivustolle tehtiin mahdollisuus monipuoliseen ja mahdollisimman automatisoituun sisäiseen ristiinlinkitykseen. Tägien avulla eri julkaisutyypit voidaan linkittää toisiinsa. Esimerkiksi ottelusivulla voidaan näyttää lista otteluun liittyvistä uutisista ja videoista, mikä rikastuttaa käyttäjäkokemusta tarjoamalla aina aiheeseen liittyvää kiinnostavaa sisältöä. Lisäksi tällainen ristiinlinkitys parantaa sivuston hakukonenäkyvyyttä, sillä se on suunniteltu vastaamaan Googlen hakualgoritmien suosituksia.

Laajan artikkeliarkiston migraatio

Edellinen verkkosivusto sisälsi yli 10 000 artikkelia – lähes 20 vuoden ajalta. Säilyttääksemme tämän arvokkaan historiatiedon, toteutimme migraation, jossa siirsimme kaikki kyseiset artikkelit uudelle sivustolle. Migraatioprosessissa keskityimme erityisesti siihen, miten vanhat artikkelit saadaan muovautumaan uuden sivuston ulkoasuun ja käyttöliittymään. Lisäksi toteutimme uudelleenohjaukset, jotka varmistivat, että artikkelien vanhat URL-osoitteet ohjautuvat sujuvasti uusille sivuille, säilyttäen näin käyttäjäkokemuksen ja hakukoneiden indeksoinnin jatkuvuuden.

Kannattajatuotteiden ja -asusteiden verkkokauppa

Verkkosivuston yhteyteen rakennettiin WooCommerce-verkkokauppa. Uusien tuotekuvien visuaalisuus oli etukäteen tiedossa, ja verkkokauppa suunniteltiin tämän visuaalisen ilmeen ympärille. Verkkokaupan design seuraa tiiviisti pääsivuston tyyliä, mikä luo yhtenäisen käyttäjäkokemuksen. FC Interin sisällönsyöttäjät voivat helposti hallinnoida tuotteita ja lisätä niitä eri tuotekategorioihin. Verkkokauppa lanseerattiin juuri ennen FC Interin kauden ensimmäistä kotiottelua, mikä tarjosi faneille mahdollisuuden tutustua tuotteisiin ja tilata stadionilla myytäviä kannattajatuotteita ja -asusteita ennakkoon.

MAALI!

Projekti saatiin onnistuneesti päätökseen ja julkaistiin koko jalkapalloyleisölle aikataulussa juuri ennen uuden Veikkausliigakauden alkua. Työskentely G-Worksin ja FC Interin projektitiimien välillä sujui erinomaisessa synergiassa, ja myös haastavammat verkkosivustoon liittyvät ongelmat ratkaistiin tehokkaasti.

G-Worksin projektiryhmä kiittää FC Interin tiimiä erinomaisesta yhteistyön aloituksesta. Tästä on erinomaista jatkaa yhteistä matkaa.