Aloitimme yhteistyön Palvelualojen Ammattiliiton kanssa kesäkuussa 2022 tavoitteenamme rakentaa luotettava, skaalautuva ja aikaa kestävä verkkopalvelu. Uusi verkkopalvelu toimii palvelualan työntekijöiden tärkeänä tietopalveluna, tekee PAMin edunvalvontatyötä entistä näkyvämmäksi ja houkuttelee sivustolle tulevia kävijöitä liittymään jäseneksi.

Lähtökohdat ja tavoitteet

PAM oli uudistamassa pam.fi-verkkopalvelunsa, joka on tärkeä informaation lähde palvelualan työntekijöille. PAMin aiempi sivusto ei skaalautunut riittävän joustavasti ja kustannustehokkaasti PAMin viestinnällisiin tarpeisiin.

Projektissa haettiin kokonaisvaltaista ratkaisua, jossa sekä verkkopalvelun ilme, rakenne, että tekninen ratkaisu uudistettaisiin. PAM kaipasi kustannustehokasta palvelua, joka olisi teknisesti kestävä ja skaalautuisi muuttuviin tarpeisiin. Projektin tavoitteena olikin pitkän elinkaaren verkkopalvelu, joka tukisi PAMia tavoitteiden saavuttamisessa nyt ja tulevaisuudessa.

PAMin uuden verkkopalvelun tuli olla visuaalisesti kiinnostava ja nykyaikainen sekä erottua edukseen muista vastaavanlaisista verkkopalveluista. Halusimme, että PAMin jäsenet sekä potentiaaliset jäsenet tunnistavat verkkopalvelusta PAMin edustavan juuri heitä. Edunvalvontatyö ja jäsenedut haluttiin esittää verkkopalvelussa selkeästi niin, että jokainen käyttäjä ymmärtäisi ammattiliiton merkityksen arvon ja jäsenyyden arvon.

Sujuvampi käyttö- ja ylläpitokokemus

Jaottelimme sisällöt selkeisiin rakenteellisiin tietokokonaisuuksiin ja niitä läpileikkaaviin sisältöihin. Verkkopalvelussa korostuvat erityisesti työelämätieto, työehtosopimukset, jäsenpalvelut ja edut sekä edunvalvontatyö. Työehtosopimukset tuotiin kokonaisuudessaan osaksi uutta verkkopalvelua. Jäsenetujen ja -palveluiden näkyvyyttä parannettiin nostamalla edut ja palvelut osaksi sivuston kaikkia sisältöjä.

Myös käyttökokemusta haluttiin parantaa monin tavoin. Kaikkien sivujen tuli pystyä toimimaan laskeutumissivuina. Mahdollistimme erilaiset polut sisältöihin, lisäsimme selkeät toimintakehotukset eri sivuille ja teimme sisältöjen hakemisesta helppoa uuden hakutoiminnon avulla. Käyttökokemus on nyt yksinkertainen, joustava ja helposti hallittava myös sivuston ylläpitäjille.

Artikkelit, tapahtumat ja jäsenedut luotiin omina sisältötyyppeinään. Artikkeleita voidaan nyt liittää sisältösivuihin ja mikäli artikkeleiden sisältöjä päivitetään, päivittyvät sisällöt myös niille sivuille, joille artikkeleita on upotettu. Tapahtumia varten toteutimme erillisen tapahtumakalenterin, jossa käyttäjä voi avointa sanahakua tai erillisiä luokitteluja hyödyntäen suodattaa tapahtumia. Koulutukset hyödyntävät tapahtumien kanssa samaa sisältötyyppiä, mutta ne tuodaan integraation avulla WordPressin sisällöiksi erillisestä järjestelmästä. Laskurit puolestaan toteutettiin erillisinä lohkoina, jolloin niitä voidaan käyttää sivustolla minkä tahansa muun sisällön ohessa.

Saavutettavuus suunnittelun keskiössä

Ennen visuaalista suunnittelua toteutimme sivuston rautalangat eli hahmotelmat sivuston sisältörakenteesta ja eri elementeistä. Rautalangat auttavat hahmottamaan palvelun rakenteen lisäksi sen modulaarisuutta eli sitä, miten sivusto tulee muodostumaan erilaisista räätälöidyistä elementeistä ja sitä miltä sivuston runko, sisältöjen ryhmitys ja yleisesti taitto tulevat näyttämään isossa kuvassa.

Rautalankamallien pohjalta suunnittelimme sivuston visuaalisen ilmeen, jonka pohjana toimi PAMin uusi brändi ja graafiset ohjeistukset. Visuaalinen suunnittelu tehtiin tiiviissä yhteistyössä PAMin edustajien kanssa. Sivuston ulkoasu ja taitto toteutettiin responsiivisina siten, että sivusto mukautuu käyttäjän laitteen ruudun kokoon.

Koska saavutettavuus oli määritelty yhdeksi tekniseksi tavoitteeksi, kiinnitimme siihen erityishuomiota jo suunnitteluvaiheessa. Uusi verkkopalvelu vastaa saavutettavuusstandardi WCAG 2.1 AA kriteeristöjä. Verkkopalvelun käyttöliittymää suunniteltaessa varmistimme esimerkiksi, että käyttäjällä on useita tapoja navigoida, sivustolla liikkuminen on loogista ja palvelua voi käyttää ruudunlukijoilla.

Suorituskyvyn optimoinnilla parempaa hakukonenäkyvyyttä

PAMin sivustolla on paljon tietosisältöä, jotka toimivat verkkopalvelun sisäänvetotuotteena ja joiden avulla verkkopalveluun saadaan kävijöitä hakukoneista.

Hakukoneoptimointi ja sisältöjen jäsentely oli siis tärkeää huomioida jo suunnitteluvaiheessa. Varmistimme esimerkiksi, että otsikkohierarkia toteutetaan järkevästi ja että verkkopalvelun URL-rakenne rakennetaan hakukoneoptimoinnin kannalta oikein. Koska iso osa palvelun liikenteestä on orgaanista liikennettä, pyrimme uudistuksessa kaikin tavoin siihen, ettei hakukonenäkyvyys laskisi. Opastimme myös PAMin sisällöntuottajia hakukoneoptimoinnin huomioimisessa.

Vastasimme palvelun teknisestä hakukoneoptimoinnista ja tuimme PAMin tiimiä uudelleenohjauksien suunnittelussa. Otimme huomioon myös Googlen Core Web Vitalsit kehitystyössä sekä palvelun suorituskyvyn optimoinnissa keskittymällä kuvien optimointiin ja kuvaformaatteihin, frontend-koodin nopeuteen, palvelintason suorituskykyyn ja välimuistitukseen sekä sivustolla käytettävään kolmansien osapuolten koodiin.

Modulaarinen ratkaisu muuttuviin tarpeisiin

Teknisiä tavoitteita olivat verkkopalvelun pitkä elinkaari, modulaarinen ja tulevaisuuden muuttuviin tarpeisiin mukautuva sivusto sekä hyvä suorituskyky. Toteutuksessa ja ylläpidossa haettiin myös kustannustehokkuutta.

Toteutimme PAMin verkkosivuston WordPress-julkaisujärjestelmällä hyödyntäen WordPressin Gutenberg-sisältöeditoria, joka mahdollistaa jouhevan ja tehokkaan sisällönhallinnan. Gutenbergin avulla sisällöntuottajat voivat luoda uusia sivuja nopeasti ja hallita kaikkea sisältöä helposti. Staattisten sivupohjien sijaan toteutamme sivut erilaisten lohkojen avulla, joiden avulla laajatkin muutokset onnistuvat ilman toimittajan apua. Sivustolle luodaan suunnitteluvaiheessa määritellyt lohkot, joita voidaan käyttää lähes missä tahansa sivustolla.

Rakensimme PAMin uuteen verkkopalveluun useita integraatioita. eTaika-integraatio tuo sivustolle koulutukset ja WoodWing Studio -integraatio työehtosopimukset. Integraatioita varten toteutettiin räätälöidyt integraatiolisäosat. Sivuston laskurien käyttöliittymä puolestaan rakennettiin React-teknologialla. Näin laskurien käyttö on nopeaa, eikä vaadi sivulatauksia.

Testasimme palvelun käytettävyyden, saavutettavuuden ja toiminnallisuudet ennen palvelujen julkaisua. Käytettävyys ja saavutettavuus olivat isossa roolissa jo suunnitteluvaiheessa, joten suunnittelijamme osasivat välttää näiden kannalta haasteellisia ratkaisuja. Suunnittelun tuloksia vertaisarviotiin säännöllisissä tapaamisissa, jolloin käytettävyyden haasteet oli helppo havaita ja niihin voitiin puuttua ajoissa.

Jatkokehitys ja seuraavat askeleet

Tarkoituksemme on kehittää PAMin verkkopalvelua jatkuvasti paremmaksi. Ylläpidosta ja tietoturvasta vastaavan Care-tiimin lisäksi PAMin tarpeita ja toiveita palvelee projektitiimi. Olemmekin lähteneet toteuttamaan uusia toiveita ketterästi heti verkkopalvelun julkaisun jälkeen.