FC Inter Turku – verkkosivustokokonaisuuden uudistus

Toimiston ilmoittama referenssi

Tekijä: G-Works

Tärkein teknologia: WordPress

Projektin budjetti: 30 000–60 000 €

Projektin tyyppi: Yrityksen sivusto kuluttajille

Erityistä: Hakukoneoptimointia osana projektia

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.

G-Worksin kanssa yhteistyö oli erittäin helppoa ja tuloksekasta. Kommunikaatio oli koko projektin ajan erinomaista. Sivujen suunnittelun ja rakentamisen aikataulutus muokattiin meidän tarpeisiimme sopiviksi. Haimme uusilta sivuilta huippuluokan visuaalista ja toiminnallista laatua, ja saimme sitä.

Tuomas Välimäki, Kehitysjohtaja, FC Inter Turku

Erinomainen projektinhallinta, asiakaspalvelu ja asiakkaan liiketoiminnan ymmärtäminen


Sinua voisi kiinnostaa myös

Suomen Elokuvasäätiön Media Desk

Tekijä: G-Works

Tärkein teknologia: WordPress

Projektin budjetti: 10 000–30 000 €

Media Desk on Suomen Elokuvasäätiön yhteydessä toimiva palvelutoimisto media-alan ammattilaisille. Sen kolme ammattilaista auttavat alaa monimutkaisen EU-rahoituksen kiemuroissa ja tukevat omalta osaltaan suomalaisen av-alan elinvoimaisuutta ja rahoitusmahdollisuuksia. Kussakin EU-maassa on oma vastaava Desk-palvelunsa. Sivuston tarkoitus on tuottaa tietoa ja tukea EU-rahoituksen kanssa työskenteleville av-alan ammattilaisille – sekä myös viestiä alalla olevista mahdollisuuksista oppimiselle ja verkostoitumiselle. […] Lue lisää

Rauman kaupungin verkkopalvelu-uudistus

Tekijä: Valu Digital Oy

Tärkein teknologia: WordPress

Projektin budjetti: yli 60 000 €

Lähtökohtana vanhentunut alusta ja puutteellinen käyttökokemus Rauman kaupungilla oli tarve uudistaa verkkopalvelunsa vastaamaan paremmin nykypäivän tarpeita. Projektin tarjouspyyntövaiheessa Rauman kumppanina toimi North Patrol, joka auttoi määrittelemään verkkopalvelu-uudistuksen tavoitteet, tarpeet ja keskeiset vaatimukset. Hyvin valmisteltu vaatimusmäärittely loi selkeän pohjan kilpailutukselle ja antoi hyvän lähtökohdan itse toteutukselle. Verkkopalvelut eivät enää vastanneet nykypäivän tarpeita. Erityisesti vanha WordPress-teknologia oli […] Lue lisää

Bolt Arena – uusi verkkosivusto

Tekijä: G-Works

Tärkein teknologia: WordPress

Projektin budjetti: 10 000–30 000 €

Uuden verkkosivuston tarve Jalkapallo-otteluiden, konserttien ja yritystapahtumien keskuksella Bolt Arenalla ei ollut aiemmin omaa verkkosivustoa. Tarve digitaaliselle kotikentälle oli ilmeinen. Projektin aloitustyöpajassa uuden sivuston kulmakiviksi määritettiin visuaalisuus, informatiivisuus ja viestintä. Työpajassa asetettuja tavoitteita seurattiin läpi projektin. Verkkosivuston suunnittelu ja toteutus Verkkosivuston visuaalista ilmettä ja värimaailmaa suunniteltaessa G-Worksin suunnittelija hyödynsi Bolt Arenan aiempia materiaaleja. Lisäksi oli […] Lue lisää

Neve Oy – verkkosivustouudistus

Tekijä: Siili Solutions

Tärkein teknologia: WordPress

Projektin budjetti: 30 000–60 000 €

Projektin taustat ja tavoitteet Neve Oy – Napapiirin Energia ja Vesi – on Rovaniemen kaupungin omistama monialainen energiayhtiö, jonka palvelut kattavat muun muassa sähkönsiirron, vesihuollon, kaukolämmön, sähköisen liikenteen, kuituverkkopalvelut ja kiertotalouden ratkaisut. Neve toimii laajalla, kriittisellä maantieteellisellä alueella Lapissa ja sen digitaalisten palveluiden toimivuus on tärkeä osa asiakaspalvelun ja tiedottamisen onnistumista. Vanha verkkosivusto ei enää […] Lue lisää

KTL ry – verkkosivuston uudistus

Tekijä: G-Works

Tärkein teknologia: WordPress

Projektin budjetti: 10 000–30 000 €

Tekniikan ja Erityisalojen Ammattilaiset KTL ry KTL ry on liitto, joka edustaa erityisesti teknillisen tai muun erikoiskoulutuksen saaneita asiantuntijoita, jotka toimivat vastuullisissa tehtävissä. Se on KTK:n suurin jäsenjärjestö, ja sillä on noin 1800 jäsentä paikallisten jäsenyhdistysten kautta. Liitto tarjoaa jäsenilleen monipuolisia palveluita, kuten työttömyysturvaa, luottamusmiesapua ja lakipalveluita. Lähtötilanne ja tavoitteet Usean kuukauden kestäneen verkkosivustotoimittajan kilpailutuksen […] Lue lisää

SUORAA – Kiinteistönhallintajärjestelmä

Tekijä: G-Works

Tärkein teknologia: Asiakaskohtainen ohjelmointityö

Projektin budjetti: 30 000–60 000 €

SUORAA & Talovisio Suomen Rakennusasiantuntijat, tuttavallisemmin SUORAA, on erikoistunut korjausrakentamisen asiantuntijaksi, joka tarjoaa kiinteistöjen kuntotarkastuksia ja kuntoarvioita. Olemme tehneet yhteistyötä SUORAA:n kanssa jo vuodesta 2015 lähtien. Vuonna 2022 jatkettiin menestyksekästä yhteistyötämme Talovisio-järjestelmän uudistusprojektin parissa, jonka aikana järjestelmä päivitettiin vastaamaan nykyaikaisia teknologioita ja tämän päivän visuaalisuutta. Talovisio-järjestelmä tarjoaa jokaiselle kiinteistönomistajalle turvallisuuden tunnetta tietopankilla, joka helpottaa kiinteistön […] Lue lisää

Vierityspalkki.fi

Julkaistu vuodesta 2006. Vierityspalkki on blogi verkkopalveluiden kehityksestä, internetin teknologioista ja alan toimistoista. Seuraa, niin tiedät miten ja kenen toimesta syntyvät parhaat verkkopalvelut, verkkokaupat ja räätälöidyt web-sovellukset. Uutiskirjeellä on jo yli 1100 tilaajaa.


Tilaa uutiskirje.

  • 40-50 asiantuntija-artikkelia vuosittain.

    Toimitettua asiasisältöä verkkopalveluiden uudistuksista ja kotimaisen ohjelmistoalan tapahtumista. Vierityspalkki nostaa esiin alan puheenaiheita ja tuoretta tutkimustietoa, osallistuu keskusteluun sekä haastattelee alan asiantuntijoita ja toimistoja. Julkaistuja artikkeleita jo yli 1000 kappaletta.


    Kaikki artikkelit

  • 150-200 julkaistua referenssicasea joka vuosi.

    Julkaisut-palsta tarjoaa näkyvyyttä kiinnostaville uusille verkkopalveluille ja web-sovelluksille, ja antaa asiakkaille mahdollisuuden arvioida eri toimistojen osaamista.


    Selaa toimistojen julkaisuja

  • 300-400 työpaikkailmoitusta vuosittain.

    Vuodesta 2007 toiminut ilmoituspalsta on edelleen sivuston suosituin osio. Moni asiantuntija on löytänyt useammankin työpaikan palstan kautta vuosien varrella.


    Selaa avoimia työpaikkoja

  • 31 kokenutta digitoimistoa

    on päässyt aina ajantasaiselle Toimistot-listalle. Lista on auttanut asiakkaita löytämään kokeneita digitoimistokumppaneita jo usean vuoden ajan. Lista keskittyy WordPress-toimistoihin ja räätälöityjen web-sovellusten tekijöihin.


    Selaa Toimistot-listaa

Tilaa kuukausikirje

Kerran kuukaudessa ilmestyvä uutiskirje koostaa artikkelit, julkaisut, työpaikat ja linkkivinkit. Kirjeellä on jo yli 1100 tilaajaa.
Huom. Sähköpostiosoitettasi ei luovuteta eteenpäin, eikä käytetä mihinkään muuhun tarkoitukseen – ihan oikeasti.

Siirry takaisin sivun alkuun