Kolme henkilöä kahvilassa

Kuinka tehdä työelämän kiemuroista ihmisläheisempiä?

image with text

Tehtävä: Verkkosivuston päivitys helposti lähestyttäväksi ja houkuttelevaksi

Tekniikan akateemiset TEK on diplomi-insinöörien, arkkitehtien ja vastaavan tekniikan tai luonnontieteen yliopistokoulutuksen saaneiden ammattijärjestö.
Noin 77 000 jäsenellään TEK on yksi Akavan ja Suomen suurimmista ammattijärjestöistä. 

TEKin viestinnän tavoite on kertoa järjestön palvelutarjonnasta, yhteiskunnallisesta vaikuttamistyöstä sekä työelämän ajankohtaisista uutisista ja teemoista. TEKin aiempi tummanpuhuva ilme ja raskaanoloiset verkkosivut hankaloittivat muutenkin monimutkaisiksi mielletyistä teemoista kertomista. Kankeasta ja yksipuolisesta käyttöliittymästä seurasi pitkiä ja yksipuolisia tekstimassoja, jotka vain vahvistivat ajatusta siitä, että ammattijärjestöt ovat etäisiä eikä tavallinen ihminen pysty ymmärtämään työelämän kiemuroita.

Kuukausittain sivustolla vierailee noin 70 – 80 000 kävijää.

TEK käynnisti perinpohjaisen brändi- ja sivustouudistuksen elokuussa 2020. tek.fi oli avainasemassa uudistuksen onnistumisessa: sivusto on yksi TEKin keskeisimmistä viestintäkanavista, ja kuukausittain sivustolla vierailee noin 70 000 – 80 000 kävijää.

Sivustouudistuksen lähtökohtana oli parantaa sekä vierailijoiden että ylläpitäjien käyttökokemusta. Kärkitavoitteeksi nousi monipuolisen sisällönluonnin mahdollistaminen uutta brändi-ilmettä tukevalla tavalla. Toinen keskeinen tavoite oli TEKin jäsenpalveluiden yhteen kokoaminen ja selkeämpi esiintuominen uudistuneen sivustorakenteen avulla.

image with text

Toteutus: Yhteistyönä ihmisläheisemmäksi 

Kehitysprosessi lähti käyntiin brändiuudistuksella, jossa haluttiin ravistella TEKin ammattijärjestöimagon yllä leijunutta pölyisyyttä. Yksi keskeinen oivallus olikin ajatus ihmisläheisyydestä – kuinka TEKin ammattilaiset ovat jäsenten arjessa myötäeläviä asiantuntijakumppaneita, ja kuinka toiminnan ytimessä on jäsenistä ja koko tekniikan alasta välittäminen. Viileän asiallisesta lähestymistavasta siirryttiin kohti lämmintä ja rentoa otetta. 

Brändiuudistuksessa tehty strateginen ja visuaalinen uudistus ohjasivat koko verkkosivuston kehitystyötä, joka kattoi sekä julkisen puolen että vielä kehitysvaiheessa olevan jäsenportaalin. Uudistus toteutettiin usean eri tahon yhteistyönä. Visuaalisesta ja teknisestä toteutuksesta vastaavat tahot saivat hyvin kiinni TEKin ongelmakohdista ja täydensivät toistensa osaamista, tarjoten onnistuneita ratkaisuja esitettyihin haasteisiin. 

Image showcases different layouts of the new tek.fi

Lopputulos: Visuaalisesti näyttävä ja helppokäyttöinen kokonaisuus  

tek.fistä onnistuttiin luomaan raikas, houkutteleva ja leikkisäkin kokonaisuus, joka on kutsuva ja helposti lähestyttävä. Aiemmasta tummasta värimaailmasta ja kankeudesta loikattiin iloiseen ja monipuoliseen ilmaisuun, joka mahdollistaa tärkeistä, mutta vaikeiksi mielletyistä asioista kertomisen kohderyhmää kiinnostavalla tavalla. Viestikanavana tek.fi auttaa nyt kiinnostuksen ylläpitämisessä – ja jopa herättää sitä!  

image with text

Moduulirakenteella monipuolisuutta sisällönsyöttäjälle ja kävijälle 

Verkkosivujen kärkitavoitteena oli mahdollistaa helposti lähestyttävän ja monipuolisen sisällön luominen käyttäjäystävällisellä tavalla. Tähän vastattiin modulaarisella rakenteella: sivustolle luotiin kattava ja joustava komponenttikirjasto, josta sisällöntuottajien on helppo valita tarpeisiinsa sopivat rakennuspalikat. Komponenttien sisällä voi tehdä hallittuja visuaalisia variaatioita ja niiden keskinäistä järjestystä voi muuttaa joustavasti, joten sivujen rakentaminen ja päivitys on helppoa.

Koska kaikki komponentit ovat keskenään yhteensopivia, eri palikoista rakennetut sivut noudattavat yhtenäistä visuaalista ilmettä ja pysyvät ”TEKin näköisenä”. Uuden brändi-ilmeen mukaisen värikkyyden saavuttamiseksi sivustolle luotiin viisi vaihtoehtoista väripalettia, jotka määrittävät komponenttien värit yksittäisellä sivulla. Näin sivuston ilmeeseen saatiin väri-ilottelua ja vaihtelevuutta hallitulla ja helppokäyttöisellä tavalla. Komponenttikirjastoon tehdyt ratkaisut takaavat sen, että kukin editori saa komponenteista kaiken ilon irti ilman tarkkoja sääntöjä tai rajoituksia, mikä helpottaa ylläpitoa eikä vaadi editoreiden pilkuntarkkaa ohjeistusta. 

Ylläpitopuolella komponenttirakenne on helppo hahmottaa. Sivun rakenteen muokkaus onkin todella joustavaa ja helppoa – komponenttien järjestystä muuttamalla sisältöjä voi kokeilla eri järjestyksissä kätevästi.
- TEKin sisällöntuottaja
TEKin palvelut ja edut -näkymän vanha ja uusi versio.
Uudella sivustolla sisältöjä pystyy esittämään aiempaa monipuolisemmin ja visuaalisemmin

Palvelut esiin selkeästi

TEKin yhtenä tavoitteena on saada jäsenille tarjottujen palveluiden käyttöasteet kasvuun. Haasteena oli erityisesti sisältöjen ja palveluiden hajanaisuus. Uudistuksen myötä sivustolle tuotiin erillisessä jäsenportaalissa sijainneita sisältöjä, joihin jäsenillä on nyt sujuvampi pääsy. Kirjautumismahdollisuuden asiosta esimerkiksi palkkatilastoihin tai Palkkanosturi-palveluun voi tutustua kätevästi osana verkkosivulla vierailua. Myös TEK-lehden verkkoversio ja Tekniikka & Talous -lehden uutisfiidi tuotiin osaksi tek.fin uutissivua, mikä tarjoaa vierailijoille entistä sujuvamman pääsyn tekniikan alan ajankohtaisiin uutisiin. 

Toisen haasteen asetti TEKin kymmenien erilaisten palveluiden ja etujen esittäminen kompaktisti ja houkuttelevasti. Vanhalla sivustolla palvelut ja edut oli koottu pitkään listaan, kun taas uusi sivusto mahdollistaa kattauksen esittämisen yksinkertaisesti ja visuaalisesti. Nyt tarjonnasta kiinnostunut henkilö saa yhdellä silmäyksellä käsityksen, mitä kaikkia palveluita ja etuja TEKin jäsenyys pitää sisällään. Tämä on edesauttanut jäsenyyden myyntiä ja markkinointia – joulukuussa 2021 TEKin jäsenmäärä olikin korkeampi kuin koskaan aiemmin.

image with text

Uudistus toi huomattavia parannuksia myös TEKin tapahtumakalenteriin; suodattamalla sisältöä esimerkiksi teemojen tai kielen perusteella jäsenten on nyt helpompi löytää itseään kiinnostavia tapahtumia ja koulutuksia. Uudistus on myös vähentänyt tapahtumien ylläpitoon liittyvää manuaalista työtä; Lyyti-integraation myötä perustiedot tulevat sivustolle suoraan tapahtumahallintajärjestelmästä, joten samoja tietoja ei tarvitse syöttää tai päivittää moneen paikkaan.

Erilaisilla komponenteilla on helppo tuoda eloa sivuille ja tehdä painotuksia sisältöihin.
- TEKin sisällöntuottaja
image with text

Sisältö toimii kaikenkokoisilla ruuduilla 

Yksi kävijöiden kannalta merkittävimmistä parannuksista on uuden sivuston mobiilioptimointi. Jokainen komponentti on suunniteltu toimimaan saumattomasti erikokoisilla näytöillä ilman, että käytettävyys tai käyttökokemus kärsii. Erityisesti selkeään ja helppokäyttöiseen navigaatioon panostettiin suunnittelemalla se erikseen niin työpöytä-, tabletti- kuin mobiiliinäkymiinkin.

Mobiilioptimointi toteutettiin komponenttikohtaisesti, jotta erilaisten sisältöjen responsiivisesta skaalautumisesta pystyttiin varmistumaan. Tämä näkyy erityisen hyvin esimerkiksi taulukoissa, jotka muuttuvat horisontaalisesti vieritettäviksi, kun sisältö ylittää näytön leveyden. Taulukoiden mobiiliversioihin on tuotu myös saavutettavuutta parantavat painikkeet, jotta sisältöä voi selata helposti vierittämättäkin. Luettavuuden edistämiseksi sarakkeissa on magneettinen kiinnitys, johon näkymä napsahtaa rullauksen hidastuessa tarpeeksi.

Työelämän tietoutta yhdenvertaisesti

TEK pyrkii toiminnallaan edistämään yhdenvertaisuutta työelämässä. Vähintään AA-tason saavutettavuus nostettiin myös yhdeksi suunnittelun kulmakiveksi jo aivan kehitystyön alussa. Uudella sivustolla on kiinnitetty huomiota niin sisällölliseen, visuaaliseen kuin tekniseenkin saavutettavuuteen. Brändiuudistuksessa luodusta ilmeestä on johdettu digitaaliseen ympäristöön sopivat, saavutettavuutta edistävät ratkaisut esimerkiksi väripaletin kylläisyyksiä varioimalla ja huomiovärien lisäyksellä, kolmitasoisen ikonikirjaston rakentamisella ja Suomi Handscript -kirjaisintyypin käyttökohteiden ja merkkimäärien tarkalla rajauksella. 

Saavutettavuuden toteutumista on seurattu ja kehitetty Siteimprove-työkalun avulla. Vaikka vanhan sivuston sisältöjen integraatio laskee kokonaistulosta, tek.fi saavutti sivuston betaversion julkaisun alla yli 80% saavutettavuusprosentin – ja tästä kehitystyö on vain jatkunut.

Kaksi henkilöä keskustelee toimistossa

Tulokset ylläpitäjille

Sivuston ilmeen, käytettävyyden ja ominaisuuksien päivittäminen on mullistanut käyttökokemuksen paitsi kävijöille, myös sivuston ylläpitäjille.  

”Ylläpitäjän näkökulmasta monet pieniltä tuntuvat mutta merkittävät parannukset ovat tehneet käyttökokemuksesta sujuvamman. Useita työläitä vaiheita on korjattu onnistuneesti automaatiolla, mikä on aina tervetullutta.”

 

Sosiaalinen media, läppäri, työnhakija, nuori mies

Tulokset käyttäjille

Käyttäjiltä saatu palaute on ollut positiivista, ja kehuja ovat saaneet sekä uuden sivuston käytettävyys että ulkoasu. Positiivinen kehitys näkyy myös sivuston käytöstä kertovissa luvuissa. Brändi- ja sivustouudistusten myötä TEKin jäsenmäärä on nyt korkeampi kuin koskaan ennen.

 

Esimerkkejä uuden sivuston vaikutuksista

lyhyempi sivuston latausaika
pidempi vierailu palaavilla kävijöillä
vähemmän välitöntä poistumista
Joukko nuoria kävelee ulkona Suvi-Tuuli Kankaanpää
Pitäiskö osallistua johonkin Vuoden nettisivut -kilpailuun, kun nää sivut näyttää näin upeilta?
- Kommentti TEKin jäseneltä

Tekijät

Wörks

Brändiuudistus

Nordkapp

Konsepti

Kuudes

Design

Siili

Toteutus

Suvi-Tuuli Kankaanpää

Brändikuvat

Tekniikan akateemiset

Sisällöt