Alkutilanne
IF Gnistanin verkkosivusto oli vanhentunut sekä visuaalisesti että teknisesti, ja se kaipasi perusteellista uudistusta sekä optimointia. Sivuston ilme ei vastannut enää nykyistä brändiä, latausnopeudessa oli huomattavasti parantamisen varaa sekä päänavigaatio oli vuosien varrella kasvanut mittasuhteisiin, joita aiempi valikkorakenne ei enää kunnolla tukenut.
Tavoitteemme
- Sivuston graafisen ilmeen päivittäminen nykyisen brändin ja ilmeen mukaiseksi
- Sivuston latausnopeuden parantaminen
- Päävalikon uudistaminen
- Uuden pelaajaluettelojärjestelmän luominen
- Palloliiton TASO-rajapinnan integrointi, jotta seuraava kotiottelu näkyy automaattisesti
- Instagram-syötteen integrointi ja kustomointi Gnistanin brändin mukaiseksi
Suunnittelu ja toteutus
Projektin toteutuksessa keskityimme kattaviin rakenteellisiin ja teknisiin parannuksiin, jotka palvelevat kaikkia asettamiamme tavoitteita. Aloitimme analyysilla sivuston nykytilasta ja kartoitimme käyttäjäkokemuksen keskeiset kipukohdat, joista etenimme suunnittelu- ja toteutusvaiheeseen.
Uusi ilme 100-vuotiaalle Gnistanille
Gnistan uudisti graafisen ohjeistonsa vuodelle 2024 varmistaakseen brändin värien ja typografian yhtenäisyyden kaikissa kanavissa. Tämä toi mukanaan tarpeen päivittää myös verkkosivuston ilme vastaamaan Gnistanin uudistettuja visuaalisia standardeja.
Gnistanin verkkosivuston uusi visuaalinen ilme on suunniteltu vahvistamaan seuran brändiä ja luomaan moderni, raikas vaikutelma, joka erottuu edukseen. Uudistuksen keskeisenä tavoitteena oli tuoda Gnistanin väripaletti – kirkkaan keltainen ja syvän sininen – selkeästi esiin kaikilla sivuilla, jotta sivusto ilmentäisi heti alusta alkaen seuran identiteettiä ja visuaalista linjaa.
Uutissivujen asettelu tarjoaa lukijalle selkeän ja visuaalisesti miellyttävän tavan selata sisältöä. Kuvien ja otsikoiden selkeä kontrasti tekee uutisista helposti luettavia ja houkuttelevia, mikä auttaa myös sisällön löydettävyydessä. Keltaista väriä on käytetty painikkeissa ja tärkeissä elementeissä, mikä luo visuaalista hierarkiaa ja auttaa käyttäjiä navigoimaan sivustolla intuitiivisesti.
Sivustolla käytetään myös muita graafisia elementtejä, jotka tukevat seuran visuaalista identiteettiä. Paksut fontit ja moderni typografia tuovat esiin seuran energisen ja dynaamisen luonteen. Väljyys ja riittävä tyhjä tila osioiden välillä lisäävät selkeyttä ja helpottavat sisällön hahmottamista, mikä parantaa käyttäjäkokemusta erityisesti mobiililaitteilla.
Yhteensä uusi visuaalinen ilme ei ainoastaan paranna Gnistanin verkkosivuston estetiikkaa, vaan tuo myös esiin sen, mikä on tärkeää – seura, yhteisö ja ajankohtainen sisältö. Jokainen elementti on harkittu tukemaan tätä tavoitetta, ja lopputuloksena on moderni ja ammattimainen kokonaisuus, joka palvelee seuran faneja, pelaajia ja yhteistyökumppaneita entistä paremmin.
Sivuston latausnopeuden optimointi
FCP -65%, LCP -62,5%, CLS –100%
Latausnopeuden optimointi oli yksi tärkeimmistä parannuskohteista, sillä alkuperäinen sivusto kärsi paikoittain hitaasta latausajasta. Tämä vaikutti käyttäjäkokemukseen ja esti sivustoa palvelemasta käyttäjiään tehokkaasti.
Keskusteluissa esille tullut latausnopeusongelma ratkaistiin rakenteellisten parannusten ja optimoitujen resurssien avulla. Tämän ansiosta käyttäjäkokemus parani merkittävästi, ja sivusto latautuu nyt huomattavasti nopeammin – sekä tietenkin tyylikkäämmin.
Mitä tarkalleen ottaen teimme?
Poistimme ja korvasimme ylimääräisiä osia
Sivuston optimointi toteutettiin monivaiheisesti keskittyen kaikkiin osa-alueisiin, joilla on vaikutusta latausnopeuteen ja käyttökokemukseen. Ensimmäinen askel oli poistaa tarpeettomia lisäosia ja ylimääräisiä koodirivejä, mikä vähensi merkittävästi kuormitusta ja yksinkertaisti sivuston rakennetta.
Tässä saimme kaksi kärpästä yhdellä iskulla esimerkiksi siinä, että pelaajaluettelon uusimisen yhteydessä poistimme käytössä olleen urheiluseuralisäosan. Korvasimme tämän lisäosan Gnistanille täysin kustomoidulla toteutuksella, jossa on juuri se, mitä Gnistan tarvitsee. Nyt ja tulevaisuudessa, sillä toteutus on melkein rajattomasti skaalattavissa.
Lisäksi teimme tarkkaa resurssienhallintaa: vähensimme sivulatauksen aikana ladattavien skriptien, fonttien ja tyylitiedostojen määrää.
Optimoimme mediasisältöä ja sen latautumista
Graafisen sisällön optimointi oli myös avainasemassa. Pienensimme kuvien tiedostokokoja ja otimme mahdollisuuksien mukaan käyttöön tehokkaampia tiedostomuotoja, kuten WebP ja SVG. Otimme käyttöön myös modernien standardien mukaisia latausratkaisuja, joiden ansiosta mediaelementit latautuvat vasta, kun käyttäjä niitä tarvitsee. Näistä tehokkain ja tunnetuin on ns. laiska lataus eli lazy loading, jolloin kuvat, videot ja muu mediasisältö latautuvat vasta niiden kohdalle rullattaessa.
Sanoimme hyvästit karusellille
Strategisten sisältömuutosten osalta keskeisin oli etusivun raskaan karusellin vaihtaminen staattiseksi osioksi. Tämä pienensi sivun suurimpien sisältöjen latausaikaa jopa 62,5 %, jolloin käyttäjät pääsevät käsiksi keskeiseen sisältöön huomattavasti nopeammin. Tämän muutoksen ansiosta saavutimme merkittävän parannuksen keskeisissä suorituskykymittareissa, kuten edellä mainittu FCP (First Contentful Paint), LCP (Largest Contentful Paint) ja CLS (Cumulative Layout Shift).
Vaikka tämä saattaa ensi kädessä tuntua uhraukselta optimointia varten, niin kattavat käyttäjäkokemustutkimukset (mm. Yale, Nielsen Norman Group) ovat osoittaneet, että karusellit eivät ole sivun yläosiossa informatiivisuuden kannalta usein paras vaihtoehto. Todellisuudessa tämä oli siis voitto sekä nopeuden, käyttäjäkokemuksen että konversiomahdollisuuksien kannalta: useamman kohdan sijaan tuodaan yksi fokusoitu viesti esille ja nopeutetaan samalla sivulatausta.
Nämä optimointitoimenpiteet johtivat siihen, että sivusto ei ainoastaan lataudu nopeammin, vaan myös käyttäjäkokemus on aiempaa miellyttävämpi ja vakaampi.
Päävalikon uudistaminen
Päävalikkoon oli vuosien varrella kertynyt useita lisälinkkejä, jotka menivät pahimmillaan neljä tasoa alas pudotusvalikoissa. Tämä oli etenkin käyttökokemuksen osalta erittäin tärkeä uudistuskohde, jotta navigointi sivustolla olisi selkeää.
Suunnittelimme Gnistanille uuden päävalikon, josta käyttäjät pääsevät nopeasti eri joukkueiden sivuille, ottelutietoihin, seuran toimintaan ja yritysyhteistyömahdollisuuksiin. Keskeiset tiedot, kuten otteluohjelmat, seuran arvot ja yrityspaketit, ovat helposti silmäiltävissä ja löydettävissä.
Tämän lisäksi halusimme parantaa käytettävyyttä vanhasta valikosta niin, että informatiiviset ja toiminnalliset linkit ovat ylätasossa selkeästi omilla alueillaan.
Jaoimme siis päävalikon ylätason kahteen osaan: vasemmalle sijoittuvat IF Gnistanin keskeiset sisältöosiot, kuten uutiset, ottelut, joukkueet, seura ja areena. Oikealta taas löytyvät suorat linkit tärkeisiin toimintoihin, kuten ottelulippujen hankintaan, verkkokauppaan, yrityspaketteihin ja jäseneksi liittymiseen.
Tämä rakenne tekee navigoinnista selkeää ja helppoa, erottaen pääasiallisesti informatiiviset ja toiminnalliset linkit.
Pelaajaluettelon uudistus
Vanha pelaajaluettelo oli ilmeeltään vanhentunut eikä tuonut ilmi pelaajien statusta Gnistanin riveissä. Pelipaikat eivät myöskään olleet suodatettavissa nopeaa katsausta varten.
Rakensimme Gnistanille uuden pelaajaluettelon, jonka inspiraationlähteenä toimivat maailman suurimmat ja arvostetuimmat jalkapallojoukkueet. Tämä luettelo oli yksi keskeisistä uudistustoiveista, sillä aiempi ratkaisu oli ilmeeltään vanhentunut, turhan raskas eikä joustanut uusiin tarpeisiin.
Instagram-syötteen integrointi
Integroimme uusille sivuille myös Instagram-syötteen niin, että se seuraa Gnistanin brändiä ja tuo sosiaalisen median sisällön näkyviin tyylikkäästi ja harmonisesti sivustolla.
Palloliiton TASO-rajapinnan integrointi
Tavoitteena oli vähentää ylläpidon manuaalista työtä kotiotteluiden päivittämisessä. Integroimme Gnistanin sivuille TASO-rajapinnan niin, että seuraava kotiottelu näkyy nyt automaattisesti etusivulla kauden ollessa aktiivisena.
Lopputulos
Uusi IF Gnistanin verkkosivusto on nykyaikainen, nopea ja visuaalisesti houkutteleva kokonaisuus, joka edustaa seuran brändiä selkeästi ja tyylikkäästi. Sivuston käyttäjäkokemus on suunniteltu vastaamaan niin fanien, pelaajien kuin yhteistyökumppaneidenkin tarpeita. Nopea latausaika ja selkeä sisältöjen jäsentely tekevät sivustosta helposti käytettävän, ja uusi visuaalinen ilme vahvistaa Gnistanin identiteettiä entisestään.
