• Analytiikka
  • Design
  • Käytettävyystutkimus
  • Saavutettavuus
  • UI/UX
  • Verkkosivut ja -palvelut
  • Visuaalinen suunnittelu

Suomen Kulttuurirahaston verkkosivustouudistus

Projekti osallistuu Grand One -kilpailussa seuraaviin kategorioihin:

  • Saavutettavin digipalvelu
  • Ekologisin verkkopalvelu
  • Paras visuaalinen design
Vieraile sivustolla

Strategia

Suomen Kulttuurirahaston (SKR) verkkosivustouudistus on toteutettu tukemaan säätiön strategiaa. Kulttuurirahasto haluaa olla valtakunnallinen muutosvoima tieteen, taiteen ja kulttuurin puolesta sekä edistää moniarvoista ja kestävää yhteiskuntaa. Verkkosivuston uudistuksessa huomioitiin kolme keskeistä viestinnällistä tavoitetta:

  • Tunnettuuden rakentaminen
  • Tieteen, taiteen ja kulttuurin aseman vahvistaminen yhteiskunnassa
  • Käyttäjäkokemuksen parantaminen

Verkkosivusto suunniteltiin WordPress-julkaisujärjestelmälle, ja sen rakenteessa hyödynnettiin multisite-ominaisuutta, joka mahdollistaa itsenäisten alisivustojen luomisen.

Luova idea ja konsepti

Verkkosivusto yhdistää modernin visuaalisen ilmeen, käyttökokemuksen helppouden ja toiminnallisuuden WCAG 2.2 saavutettavuusstandardien mukaisesti. Sivusto ilmentää SKR:n uutta brändi-identiteettiä, jonka on luonut N2 Albiino -toimisto. Identiteetti on uusi ja raikas, mutta kuljettaa samalla mukanaan perinteikkään toimijan historiaa ja ainutlaatuista syntytarinaa. Uuden ilmeen myötä kaikki SKR:n toimintamuodot hahmottuvat johdonmukaisena, sukunäköisenä kokonaisuutena.

Suunnitteluvaiheessa järjestettiin useita konseptityöpajoja, joissa perehdyttiin sivuston kohderyhmiin, käyttäjäpolkuihin ja tavoitteisiin. Teknisissä työpajoissa mietittiin sivuston arkkitehtuuri ja tietomalli palvelemaan sisällöntuottajia entistä paremmin. 

Konseptoinnissa käytiin läpi nykyisen sivuston rikas sisältömassa ja järjesteltiin erityyppiset apurahat sekä niitä koskevat ohjeet omiksi käyttäjälähtöisiksi kokonaisuuksikseen. Apurahakokonaisuus itsessään poikkeaa paljon aikaisemmasta ratkaisusta, jossa apurahat oli esitelty hakuaikojen perusteella omina sivuinaan, jotka olivat täynnä eri sivuille osoittavia linkkejä. Nyt käyttäjä voi itse suodattaa apurahoja haluamillaan kriteereillä ja hakuajankohdilla, ja näin löytää nopeasti tarvitsemansa tiedon tai sopivan apurahan.

Uudelleenmuotoilimme projektin osana lisäksi koko ohjeosion, jonka ohjeet sisältävät sekä ohjeiden perusosia että muuttuvia osia apurahatyypistä riippuen. Sisällönhallinnan helpottamiseksi ohjeita päivitetään osa kerrallaan ja tieto liikkuu keskitetysti jokaisen apurahan ohjeosioon.

Konseptointivaiheessa päätettiin yhdistää SKR:n uusi Tiede & Taide -lehti osaksi verkkopalvelukokonaisuutta. Lehden avulla SKR edistää konkreettisesti tieteen ja taiteen asemaa yhteiskunnassa. Myös apurahansaajia tuodaan artikkelien muodossa esille entistä voimakkaammin, jolloin SKR:n rahoittama toiminta tulee esille läpinäkyvästi sekä konkreettisesti.

Käytettävyystutkimus konseptin validoinnin tukena

Verkkopalvelun käyttöliittymäprototyyppiä testattiin edellisen verkkosivuston kautta rekrytoiduilla loppukäyttäjillä, joista validoitiin sellaisia käyttäjiä, jotka ovat aikaisemmin hakeneet Suomen kulttuurirahastolta apurahoja tai jotka ovat suunnitelleet tekevänsä niin tulevaisuudessa. Käytettävyystutkimuksella tutkittiin sivuston peruskäyttöä kuten yhteystietojen ja ajankohtaisten uutisten löytymistä, Tiede & Taide -lehden näkyvyyttä sivustolla sekä apurahaprosessia hakijan ja saajan näkökulmasta prosessin eri vaiheissa. 

Käytettävyystutkimus suoritettiin fasilitoituna tutkimustilaisuutena, johon redandbluelta osallistui fasilitoija ja kirjuri. Tutkimukseen osallistui viisi aitoa kohderyhmän edustajaa, joilla tutkimusten mukaan löydetään jo 80 % verkkosivuston käytettävyyshaasteista.

Tutkimustulosten perusteella muutimme sivuston navigaatiossa käytettyä terminologiaa, tiivistimme joitakin näkymiä sekä teimme pieniä käyttöliittymämuutoksia apurahaosioon.

Toteutus

Projektin toteutuksessa keskityttiin huolelliseen konseptointiin, UI/UX-suunnitteluun, käyttöliittymäratkaisujen validointiin, sisällön kannalta optimaaliseen tietomalliin ja tekniseen laatuun. 

  • Navigaatio ja rakenne: Selkeä saavutettava navigaatio tukee eri kohderyhmien tarpeita. Tiede & Taide -lehti nostettiin näkyvästi navigaatioon sekä lisättiin pikalinkit apurahapalveluun, yhteystietoihin ja ohjeisiin.
  • Saavutettavuus: Sivusto noudattaa WCAG 2.2 AA-tason saavutettavuuskriteereitä, mikä tekee siitä yhdenvertaisen ja helposti lähestyttävän kaikille käyttäjille. Verkkosivuston saavutettavuus on toteutettu huolellisesti semanttista HTML:ää hyödyntäen, jotta erityisesti ruudunlukijakäyttäjät saavat selkeän ja helppokäyttöisen kokemuksen. Esimerkiksi arkistosivut, kuten Apurahanhakijalle, Uutiset ja Yhteystiedot, sisältävät ominaisuuksia, kuten aria-live-ilmoituksia, jotka tiedottavat suodattimien käytöstä ja hakutulosten päivittymisestä reaaliajassa. Erityistä huomiota on kiinnitetty Ohjeet-sivuun, joka on suunniteltu vastaamaan saavutettavuusvaatimuksia ja tarjoamaan helppokäyttöisyyttä kaikille käyttäjäryhmille, vaikka se sisältää runsaasti tietoa.
  • Tehokkuus ja ekologisuus: Sivuston suorituskyvyn parantamisessa on keskitytty erityisesti vähentämään Cumulative Layout Shift -arvoa (CLS), mikä tarkoittaa, että sivuston visuaalinen vakaus säilyy latauksen aikana, eikä sisältö hyppele näytöllä. Tähän päästiin muun muassa seuraavilla toimenpiteillä:
    • Fallback-fontit: Fonttien varakoko määriteltiin tarkasti vastaamaan brändifonttien kokoa, mikä vähentää visuaalisia muutoksia latausvaiheessa.
    • Kuvien kuvasuhteet: Kuville määriteltiin tarkat kuvasuhteet, jotta ne eivät latautuessaan aiheuta odottamattomia muutoksia sisältöön.
    • Responsiiviset kuvat: Kuvia optimoitiin latautumaan aina käyttäjän laiteikkunan leveyden mukaan sopivassa koossa.
    • CSS-tiedostojen latausjärjestys: Tyylitiedostot järjestettiin latautumaan optimaalisessa järjestyksessä, mikä parantaa suorituskykyä ja nopeuttaa sivuston käyttöä.
  • Analytiikka ja optimointi: Sivustolle asennettiin kattavat analytiikkatyökalut, joiden avulla voidaan seurata keskeisiä mittareita, kuten käyttäjämääriä ja hakijapolkujen toimivuutta.
  • Responsiivisuus: Sivusto toimii saumattomasti eri laitteilla, ja sen sisällöt ovat helposti jaettavissa sosiaaliseen mediaan.
  • Monikielisyys: Sivustolle on mahdollista lisätä useita kieliversioita: suomi, ruotsi, englanti sekä mahdollisuus laajentaa saamen ja romanikielille.
  • Tehokas hakutoiminto: Hakutoiminto kattaa kaikki sivuston sisällöt kategorisoituna ja nopealla moottorilla toteutettuna.
  • Suodatinsivut ja sisältötyypit: Sivustolla on useita sisältötyyppejä, joiden avulla sisällöntuottajat saavat lajiteltua laajaa sisältöpalettia hallinnan puolella sekä saavat pidettyä sisällöt tarvittavilta osin määrämuotoisina sisällönsyöttäjästä riippumattomasti. Suodatinsivujen avulla käyttäjät löytävät omaan käyttötarpeeseen sopivat sisällöt laajasta sisältömassasta.
  • Ohjeet: Ohjeet oma sisältötyyppinsä ja eri ohjeosioita voi yhdistellä hallinnassa niin, että niistä tulee relevantteja kuhunkin apurahaan liittyen.
  • Laaja kustomoitu sisältölohkokirjasto: Sivustolle rakennettiin Gutenberg-editorille laaja lohkokirjasto erilaisten sisältöjen esittämiseen. Lohkokirjasto kattaa useita kymmeniä lohkoja erilaisilla variaatioilla värien ja asettelun suhteen. Laaja väripaletti brändivärejä helpottaa lohkojen ottamista käyttöön uusilla erillissivustoilla, jotka voivat hyödyntää omanlaistaan painotusta lohkojen värimaailman suhteen.
  • Migraatiot: Sivustolle migroitiin edelliseltä sivustolta satoja artikkeleita sisälöineen.
  • Teknisen alustan monistettavuus: Samaan multisite-asennukseen voidaan lisätä useita verkkosivustoja. Lisäsivustot käyttävät samaa teemaa, mutta niihin voidaan silti tehdä ulkoasun kustomointia ja lisätä omia toiminnallisuuksia. Toteutuksessa on tällä hetkellä jo kaksi sivustoa, jotka tulevat hyödyntämään jo rakennettua teemaa.

Julkaisun jälkeinen 30 päivää verrattuna edeltävään ajanjaksoon

  • Kävijöiden määrä nousi

    39,1 %

  • Uusien kävijöiden määrä nousi

    78 %

  • Sitoutuneen kävijän vierailun kesto nousi

    43,5 %

  • Orgaanisen haun kautta tulleet uudet kävijät kasvoivat

    85,2 %

  • Orgaanisen haun kautta alkaneet sessiot kasvoivat

    28,1 %

  • Anna Bui

    viestintäsuunnittelija – Communications Specialist

  • Reeta Holma

    viestintäpäällikkö

Kiitokset Redandbluelle sujuvasta yhteistyöstä kotisivujemme suunnittelun ja toteutuksen kanssa. Erityisen tyytyväisiä olemme hyvään projektinhallintaan ja yhteydenpitoon koko projektin ajan. Mukavat ja osaavat ihmiset saavat selvästi hienoa jälkeä aikaan. Erityiskiitokset myös tekniselle tiimille, joka reagoi ripeästi kaikkiin haluamiimme muutoksiin ja toiveisiin. Mielestämme lopputulos on erittäin onnistunut ja uusia sivuja on ilo käyttää ja esitellä muille!

  • Anna Bui

    viestintäsuunnittelija – Communications Specialist

  • Reeta Holma

    viestintäpäällikkö

Redandblue

Redandblue on erikoistunut saavutettavien ja ekologisten verkkopalveluiden tuottamiseen. Teimme vuonna 2024 yhteensä 16 AA-tason saavutettavaa verkkopalvelua. Yrityksenä kannamme ympäristövastuun ja olemme laskeneet vuoden 2024 hiilidioksidipäästömme (70 tonnia CO2-päästöjä) sekä kumonneet niiden ilmastovaikutuksen tukemalla uusiutuvan energian projektia Intiassa. Redandbluella on Koodia Suomesta hiilineutraaliusmerkki. 

Koodia Suomesta ry:n myöntämä Hiilineutraali-merkki