Luoto-hankkeen verkkosivusto

Yhdistimme strategisen palvelumuotoilun ja ekologisen teknologiaosaamisemme luodaksemme Uudenmaan liiton Luoto-hankkeelle digitaalisen alustan, joka vauhdittaa luovien alojen kestävyysmurrosta. Loimme helppokäyttöisen ja innostavan tietopankin, joka palvelee, yhdistää ja tukee koko toimialaa.

Uudenmaan liitto on 1,8 miljoonan asukkaan maakunnan strateginen suunnittelija ja kehittäjä, jonka keskiössä ovat alueen kansainvälisyys, vetovoima ja asukkaiden hyvinvointi. Tulevaisuuteen suuntautuvana toimijana liitto tarttuu aktiivisesti ajankohtaisiin haasteisiin.

Yksi näistä haasteista on luovien alojen ekologisen kestävyysmurroksen edistäminen. Euroopan Unionin – NextGeneration EU:n rahoittaman Luovien alojen ekologisen kestävyysmurroksen toimenpideohjelma-hankkeen (Luoto) kautta Uudenmaan liitto lähti edistämään tätä tärkeää muutosta.

Hankkeen keskiöön nousi tarve luoda digitaalinen solmukohta, joka kokoaisi yhteen luovien alojen kestävyystiedon ja -hankkeet.

Ennen projektia luovien alojen ekologista kestävyyttä koskeva tieto – kuten tutkimukset, oppaat, hankkeet ja laskurit – oli hajallaan eri toimijoiden ja alojen kanavissa. Tämä vaikeutti tiedon löytämistä ja hyödyntämistä, hidastaen alan yhteistä ympäristötyötä.

Luoto-hanke tunnisti tarpeen keskitetylle, helppokäyttöiselle verkkopalvelulle, joka vauhdittaisi alan kestävyysmurrosta ja auttaisi toimijoita löytämään tarvitsemansa tuen ja tiedon vaivattomasti.
Hankkeesta vastaava Jaana Eskola kertoo, että kestävyys oli tärkeä kriteeri kumppanivalinnassa.

“Toimittajan kestävien periaatteiden noudattaminen oli meille merkittävä lisäarvo. Halusimme luoda toiminnallisesti jotain uutta ja olla kehityksen eturintamassa. Huomasimme, että Hionilla on kestävyysajattelu vahvasti mukana omassa toiminnassaan, mikä sopi erinomaisesti arvoihimme.”

Palvelumuotoilulla selkeyttä ja suuntaa

Lähdimme ratkaisemaan asiakkaan haastetta – suurta sisältömäärää, monimuotoista käyttäjäkuntaa ja rajallisia resursseja – työpajojen kautta. Tavoitteena oli luoda keskitetty tietopankki, josta jokainen käyttäjä löytää vaivattomasti ajantasaisen tiedon.

“Palvelumuotoiluvaihe piti sisällään kolme antoisaa livetoteutuksena pidettyä työpajaa Hionin asiantuntijoiden kanssa. Työpajat olivat hieno tilaisuus myös tutustua toisiimme tiiminä.”, Jaana summaa.

Työpajoissa pureuduimme syvälle käyttäjien tarpeisiin:

• Määritimme ja klusteroimme keskeiset käyttäjäpersoonat ja heidän käyttötapauksensa.
• Muotoilimme selkeät käyttäjäpolut ja niiden pohjalta loogisen sisältöhierarkian.
• Määrittelimme tarvittavat sisältötyypit ja vastuunjakoon liittyvät prosessit.

Tämä strateginen pohjatyö ei ainoastaan luonut vankkaa perustaa tekniselle toteutukselle, vaan myös auttoi asiakastamme jäsentämään ja ymmärtämään omia kohderyhmiään entistäkin paremmin.

“Sen jälkeen projekti eteni kehityssprintteihin Hionin toimintamallin mukaisesti. Tämä työtapa toimi erittäin hyvin: asiat etenivät aina sovitusti ja tuloksia syntyi suunnitelmien mukaan.”, Jaana kertaa.

Sujuvan prosessin kautta maaliin

Lopputulos on Jaanan mukaan ollut tavoitteiden mukainen. “Olemme erityisen ylpeitä siitä, miten onnistuimme pukemaan valtavan tietomäärän helppokäyttöiseen ja intuitiiviseen muotoon. Tavoitteenamme oli luoda kiinnostava, selkeä ja ajassa kiinni oleva verkkoalusta, joka olisi riittävän yksinkertainen, mutta ei vanhenisi heti. Sivuston rakenne toimii mielestämme erinomaisesti ja tukee tätä tavoitetta.”

Myös sidosryhmiltä saatu palaute ja vastaanotto on ollut positiivista.
“On ollut ilo huomata, kuinka monet ovat oma-aloitteisesti nostaneet alustaa esiin omassa viestinnässään. Alusta on todellinen resurssipankki, jonka materiaaleihin voi palata yhä uudelleen. Erityisesti palvelun visuaalista ilmettä on kiitelty sanoilla kuten innostava, raikas ja leikkisä.”

Entä miten Jaana kuvailisi yhteistyötä kanssamme?

“Hionin tarjoama selkeä kehitystyön malli auttoi erittäin paljon sekä tiimiämme että minua henkilökohtaisesti, erityisesti tilaajalta vaaditun työpanoksen osalta. Asiat oli tehty meille todella helpoiksi ja selkeiksi. Meidän ei tarvinnut käyttää ylimääräisiä tunteja asioihin perehtymiseen, sillä ne käytiin läpi viikkopalavereissa, ja apua sai aina tarvittaessa erittäin nopeasti Slackin kautta.”

“Kokonaisuutena prosessit olivat erittäin sujuvat, ja toiminnasta jäi miellyttävä, positiivinen ja ammattimainen kuva. Projektiin oli tehty tilaajan roolissa helpoksi osallistua, vaikka ei itse olisikaan verkkoalustojen kehittämisen ammattilainen.” –Jaana Eskola, projektipäällikkö, Uudenmaan liitto

Ekologisuutta ja tehokkuutta Hionin GSW UI Kitin avulla

Koska projektin aihepiiri liittyi vahvasti ekologisuuteen, oli olennaista, että myös verkkopalvelu itse noudattaa kestävän kehityksen periaatteita. Hyödynsimme suunnittelussa ja toteutuksessa Hionin omaa Green, Sustainable Web (GSW) UI-kittiä.

GSW UI Kitin käyttö toi projektille selkeitä etuja:

• Kustannustehokkuus: Se nopeutti merkittävästi suunnittelu- ja kehitystyötä, mikä säästi suoraan resursseja.
• Ympäristövastuu: Varmistimme, että tekniset ja visuaaliset ratkaisut olivat lähtökohtaisesti energiatehokkaita.
• Joustavuus: Kitti loi vankalle ja modernille pohjalle perustuvan järjestelmän, jota on helppo ja tehokas jatkokehittää.

Käyttäjän valinta: Eco- ja Dark-modet

Herätimme asiakkaan graafisen suunnittelijan luoman ilmeen eloon ja toimme ekologiset periaatteet konkreettisiksi, käyttäjän hallittaviksi toiminnoiksi.

• Eco-mode: Käyttäjä voi aktiivisesti pienentää sivuston kaistanleveyden käyttöä ja hiilijalanjälkeä valitsemalla ekologisemman tilan. Tämä tila lataa sivut kevyemmillä järjestelmäfonteilla ja käsittelee kuvat vähemmän kaistaa kuluttaviksi.
• Dark-mode: Modernin käyttökokemuksen takaamiseksi sivusto tarjoaa mahdollisuuden valita perinteisen vaalean ja tumman tilan välillä sekä mahdollisuuden käyttää automaattisesti laitteen omia järjestelmäasetuksia.

Tekninen arkkitehtuuri

1. Jäsennelty ja skaalautuva sisällönhallinta

Loimme asiakkaalle joustavan ja loogisen tavan hallita sisältöjä, mikä tehostaa päivittäistä työtä ja mahdollistaa palvelun helpon laajentamisen tulevaisuudessa.

• Räätälöidyt sisältötyypit ja taksonomiat: Toteutimme kolme tarkkaan määriteltyä sisältötyyppiä (UKK, Linkit, Sivuston asetukset) sekä oman taksonomian (Kategoria). Tämä mahdollistaa sisällön tehokkaan järjestelyn ja dynaamisten sisältönostojen luomisen eri puolille sivustoa ilman monimutkaisia manuaalisia päivityksiä.

2. Tinkimätön suorituskyky

Suorituskyky ja vihreät arvot olivat projektin ytimessä. Toteutimme useita toimenpiteitä, jotka takaavat nopean käyttökokemuksen ja pienentävät sivuston hiilijalanjälkeä.

• Modernit kuvaformaatit: Sivusto hyödyntää automaattisesti kevyttä ja tehokasta WebP-kuvaformaattia, mikä nopeuttaa sivujen latautumista merkittävästi.
• Analytiikan ja kolmansien osapuolten optimointi: Varmistimme kooditason optimoinnilla, etteivät CookieBot ja analytiikkatyökalut hidasta sivuston toimintaa.
• CookieBotin kanssa käytettiin kustomoitua Cookiebot Accessible Templatea, joka on sekä saavutettavampi kuin Cookiebotin omat tyylit ja Google Core Web Vitals arvoiltaan 5-8 pistettä parempi

Luoto.art lukuina

• Etusivun Page Speed Insightsin Performance Score: 98
• Clientin selaimessa aiheuttamat päästöt etusivun osalta (kieliversioineen CO2.js:n mukaan): 126,5 CO2 mg
• Etusivun arvosana (Website carbon): A+
• Sivusto kokonaisuudessaan: Koko sivuston 172 osalta Page Speed Insightsin Performance Score 89 mediaani. Mediaani CO2.js antama CO2 mg 116,1 ja mediaani sivun koko 0.41 MB

3. Moderni ja joustava sisällöntuotanto natiiveilla WordPress-lohkoilla

Rakensimme kaikki räätälöidyt toiminnallisuudet WordPressin natiiveilla työkaluilla. Tämä takaa parhaan mahdollisen käyttökokemuksen sisällöntuottajille sekä sivuston vakauden ja tietoturvan.

Räätälöidyt lisäosat ja lohkot:

• Karuselli- ja listauslohkot: Kehitimme dynaamisia lohkoja (karuselli, FAQ-listaus, rullaava sivulistaus), joiden avulla sisällöntuottaja voi nostaa ja suodattaa sisältöjä monipuolisesti eri puolille sivustoa – ilman riviäkään koodia.
• Hero-lohko: Toteutimme näyttävän ja hallittavan herolohkon, joka antaa visuaalista näyttävyyttä tärkeimmille sivuille.

Saavutettavuus: Koko sivusto on toteutettu WCAG-saavutettavuusstandardien mukaisesti, varmistaen että palvelu on kaikkien käyttäjien saavutettavissa.

4. Vankka ja nykyaikainen tekninen perusta

Hyödynsimme moderneja ja alan parhaita käytäntöjä noudattavia teknologioita, jotka takaavat sivuston ylläpidettävyyden ja jatkokehitettävyyden.

• Räätälöity teema: Sivuston teema pohjautuu moderniin Roots Sage -kehykseen.
• Tailwind CSS: Ulkoasu on rakennettu Tailwind CSS -viitekehyksellä, joka mahdollistaa nopean, yhtenäisen ja helposti ylläpidettävän käyttöliittymäkehityksen.
• Laravel Blade: Käytämme Blade-template-kieltä, joka tekee koodista selkeämpää ja modulaarisempaa.