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

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

SUORAA – Kiinteistönhallintajärjestelmä

Tekijä: G-Works

Tärkein teknologia: Asiakaskohtainen ohjelmointityö

Projektin budjetti: 30 000–60 000 €

Projektin tyyppi: Web-sovellus, mobiilisovellus tai asiointipalvelu

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ää

Kalevalaseura – verkkosivusto

Tekijä: G-Works

Tärkein teknologia: WordPress

Projektin budjetti: 10 000–30 000 €

Projektin tyyppi: Julkishallinnon verkkopalvelu

Kalevalaseura on taiteeseen ja tieteeseen suuntautuva säätiö, jonka historia menee aina vuoteen 1919, jolloin Akseli Gallen-Kallela neljän muun kanssa perusti seuran Suomen kansalliseepoksen ympärille. G-Works sai tehtäväkseen tämän yli satavuotiaan seuran verkkosivuston uudistamisen. Koska seuran toiminnassa on niin vahvasti kyse taiteesta, sai projektissa antaa sivustolle vähän reilumpaa pensseliä ja luottaa vahvaan ja upeaan kuvitukseen, jota […] Lue lisää

Castren & Snellman

Tekijä: Miltton

Tärkein teknologia: WordPress

Projektin budjetti: 30 000–60 000 €

Projektin tyyppi: Yrityksen sivusto yritysasiakkaille (B2B)

Castren & Snellman on yksi Suomen suurimmista asianajotoimistoista. Yrityksen verkkosivusto oli jäänyt kuitenkin pahasti jälkeen niin käytettävyyden kuin näyttävyyden ja sisältöratkaisujen osalta. Oli siis aika uudistaa koko sivusto. Laajat asiakkuudet keskiöön Castren & Snellman tarjoaa palvelujaan hyvin monelle toimialalle ja monen tyyppisille toimijoille. Useille asiakkaille voi olla meneillä monta eri projektia, joita hoitavat hyvin eri […] Lue lisää

Teknisen Kaupan Liitto – verkkosivusto

Tekijä: G-Works

Tärkein teknologia: WordPress

Projektin budjetti: 10 000–30 000 €

Projektin tyyppi: Julkishallinnon verkkopalvelu

Teknisen Kaupan liitto valvoo teknisen kaupan etuja ja tuottaa jäsenilleen ennakoivaa tietoa trendeistä, markkinamurroksesta ja lainsäädännöstä. Valikoiduimme pitkän kilpailutusprosessin jälkeen liiton kumppaniksi sivuston uudistukseen ja ylläpitoon. Tekninen.fi-sivuston lisäksi uudistimme liittoon kuuluvan Rengasvalmistajien jaoston verkkosivuston rengasvalmistajat.fi. Liiton vanhan sivuston uudistamistarpeet olivat selkeät: teknologia ja visuaalisuus eivät vastanneet tätä päivää. Lisäksi sivuston rakenne oli sekava eikä se […] Lue lisää

Helsingin Jäätelötehdas – verkkosivusto

Tekijä: G-Works

Tärkein teknologia: WordPress

Projektin budjetti: alle 10 000 €

Projektin tyyppi: Yrityksen sivusto kuluttajille

Helsingin Jäätelötehdas on yli 100-vuotias suomalainen perheyritys, maan vanhin edelleen toiminnassa oleva jäätelön valmistaja ja alusta asti saman suvun hallinnassa. Siinä on perintöä kerrakseen. G-Works toteutti Helsingin Jäätelötehtaalle täyden brändiuudistuksen, jossa verkkosivu oli yksi toteutettavista brändisovelluksista kioskiteippausten, pakkausten ja monen muun asian ohella. Tämä lopputuote on nätti pikkusivusto, jossa on mukavasti väriä ja pikantteja yksityiskohtia, […] Lue lisää

Turvaopas.fi

Tekijä: Virnex

Tärkein teknologia: WordPress

Projektin budjetti: 10 000–30 000 €

Projektin tyyppi: Yrityksen sivusto kuluttajille

Palvelu taloyhtiöiden turvallisuuden parantamiseen Turvaopas.fi on innovatiivinen verkkopalvelu, joka on suunniteltu erityisesti taloyhtiöiden turvallisuuden parantamiseen. Vilkas muuttoliike ja uudet trendit, kuten Airbnb, on tullut jäädäkseen samalla kun vuokra-asumisen suosio kasvaa. Taloyhtiölle tämä tuo haasteita myös turvallisuuden näkökulmasta. Turvaopas tarjoaa ajantasaisen tiedon kaikille taloyhtiön asukkaille sekä heidän vieraille taloyhtiön turvaohjeista, sekä asukkaan omista velvollisuuksista. Palvelu tarjoaa […] Lue lisää

Vierityspalkki-blogi

Julkaistu vuodesta 2006. Vierityspalkki on blogi kotimaisen internet-alan trendeistä, teknologioista ja alan toimistoista. Seuraa, niin tiedät miten ja kenen toimesta syntyvät parhaat verkkopalvelut, verkkokaupat ja räätälöidyt web-sovellukset.
Lisätietoa blogista ja sen lukijoista.

  • 1100+ asiantuntija-artikkelia.

    Toimitettua asiasisältöä kattavasti teknologioista ja web-alan ilmiöistä. Vierityspalkki nostaa esiin alan puheenaiheita ja tuoretta tutkimustietoa, osallistuu keskusteluun sekä haastattelee alan asiantuntijoita ja toimistoja.


    Kaikki artikkelit

  • 1300+ digipalvelun referenssicasea.

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


    Selaa toimistojen julkaisuja

  • 1000+ aktiivista lukijaa blogin kuukausikirjeellä.

    Kerran kuukaudessa ilmestyvä kuukausikirje koostaa julkaistut artikkelit, uudet julkaisut, avoimet työpaikat ja ajankohtaiset linkkivinkit.


    Tilaa uutiskirje

  • 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-osaajiin 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 1000 tilaajaa.
Huom. Sähköpostiosoitettasi ei luovuteta eteenpäin, eikä käytetä mihinkään muuhun tarkoitukseen – ihan oikeasti.

Siirry takaisin sivun alkuun