Technopolis

Technopoliksen uusi verkkopalvelu toteutettiin käyttäen headless-arkkitehtuuria. Julkaisujärjestelmänä pysyi tuttu ja toimiva WordPress, mutta uudella ratkaisulla saatiin nostettua merkittävästi latausnopeuksia ja tietoturvaa, sekä varmistettua, että sivusto skaalautuu tulevaisuuden vaativiin tarpeisiin.

Lähtökohdat

Technopolisin verkkopalvelu oli viimeksi uudistettu vuonna 2015 vastaamaan sen hetken liiketoimintatavoitteita, ylläpitovaatimuksia ja teknistä ympäristöä. Viidessä vuodessa moni asia oli ehtinyt muuttua. Ala, jolla Technopolis toimii, oli kokenut muutoksia digitaalisten työnteon mallien yhä yleistyessä ja kysynnän muuttuessa. Technopolis oli yrityksenä kasvanut, laajentanut tarjontaansa ja toimintaansa uusille markkinoille. Myös verkkopalveluiden teknologiset mahdollisuudet ja tarpeet olivat ehtineet merkittävästi kehittyä. Nyt oli aika uudistaa verkkopalvelu ei ainoastaan vastaamaan tämän hetken vaatimuksia, vaan luomaan mahdollisuudet jatkokehitykselle.

Verkkopalvelua on kehitetty pitkäjänteisesti jo vuosien ajan ja olemassa oleva palvelu oli sinänsä jo itsessään toimiva.

– Projektissa toteutimme uudestaan jo pitkään asiakasta palvelleen verkkopalvelun, jota oli aktiivisesti kehitetty useiden vuosien ajan. Käyttökokemuksen suhteen halusimme uudistaa rohkeasti, mutta tunnistaa myös jo toimineet ratkaisut, kertoo Creunan Senior Developer Tuomo Tomperi.

– Uuden frontend-teknologian lisäksi myös sivuston rakenne ja domain muuttuivat. Meille oli tärkeää, että julkaisu onnistuu myös SEO-näkökulmasta mahdollisimman hyvin.

Tutustu uuteen verkkopalveluun!

Tekninen ratkaisu

Technopolis on jo pitkään panostanut vahvaan tekemiseen verkossa, ja verkkopalvelun toimivuus on ollut heidän liiketoimintansa kannalta kriittinen. 

– Technopoliksella on poikkeuksellisen osaavaa ja omistautunutta väkeä tekemässä verkkopalvelua, kertoo Creunan COO Marko Paananen. He ovat tottuneita käyttämään laajasti verkkopalvelun hyötyjä myynnissä ja markkinoinnissa.

Jotta verkkopalvelu saataisiin nostettua jo hyvältä tasolta vielä korkeammalle, Creuna ehdotti headless-ratkaisua, jolla esimerkiksi sivuston latausnopeuksia ja tietoturvaa saatiin yhä parannettua.

– Taustalla oli myös keskustelut pidemmän aikavälin tarpeista, joissa näimme headless-ratkaisun tarjoavan paljon hyötyjä jatkossa, erityisesti, kun kehitetään uusia digitaalisia palveluita verkkoon.

Technopolis oli pitänyt WordPressiä toimivana julkaisujärjestelmänä, eikä kokenut tarvetta lähteä vaihtamaan taustajärjestelmää. Headless-ratkaisun yhtenä hyöytynä olikin se, että julkaisujärjestelmänä pysyi edelleen Technopolikselle jo ennestään tuttu järjestelmä, mutta mukaan pystyttiin tuomaan silti uusia ominaisuuksia. Julkaisujärjestelmän pysyessä samana, kaikkea ei myöskään pitänyt lähteä tekemään alusta asti, vaan olemassa olevia ratkaisuja pystyttiin osittain hyödyntämään. Tämä nopeutti ja tehosti toteutusvaihetta.

Määrittelyvaihe

Projekti aloitettiin määrittelyvaiheella, jossa luotiin yhteinen käsitys uudistuksen tavoitteista. Samalla pureuduttiin tärkeimpiin kohderyhmiin ja heidän tarpeisiinsa, ja luotiin käyttäjäpolut uudelle sivustolle. Priorisointia tehtiin teknisten vaatimusten, sisältöjen ja toiminnallisuuksien osalta. Ylätason tekninen arkkitehtuuri määriteltiin, samoin kuin sivuston yleisilme ja käyttöliittymä.

Määrittely suoritettiin Creunan johtamissa työpajoissa. Technopolis oli valmis ennakkoluulottomasti haastamaan vanhoja malleja, jotta löydettiin varmasti parhaat ja toimivimmat ratkaisut.

– Etuna oli, että meillä on Technopoliksen kanssa takana jo kauan jatkunut yhteistyö, joten tunsimme toisemme hyvin, eikä tarvinnut aloittaa ihan puhtaalta pöydältä, Paananen kertoo pitkän asiakassuhteen hyödyistä.

Hän painottaa, miten tärkeää jokaisen projektin alussa on tehdä selväksi omat liiketoimintaprosessit sekä verkkopalvelun rooli niissä ja tulevaisuuden tarpeet.

– Tämä on asia, johon meillä löytyy työkalut ja prosessit, ja jossa autamme mielellämme. Ei kaikkea tarvitse valmiiksi tietää, mutta jotta verkkopalvelu aidosti tukisi liiketoimintaa ja olisi pitkäikäinen, nämä asiat on syytä käydä läpi heti uudistusprojektin alussa.

Yksi tärkeä kohderyhmä oli luonnollisesti sivuston ylläpitäjät Technopoliksella. Myös heidän tarpeensa olivat osittain muuttuneet edellisen lanseerauksen jälkeen ja nämä otettiin laajasti huomioon ja heidän työtään pyrittiin helpottamaan.

Toteutus

Toteutusvaihetta lähdettiin tekemään kahden viikon spritteissä. Projektin aikana pidettiin säännölliset viikkopalaverit ja kanssakäyminen koronan aiheuttamissa poikkeusolosuhteissa onnistuttiin pitämään tiiviinä läpi projektin.

Headless-ratkaisua toteuttaessa olennainen komponentti oli Gatsby.js, jonka varaan ratkaisu pystyttiin lähteä rakentamaan.

– Työkalut tällaisen headless-ratkaisun toteuttamiseen ovat kehittyneet valtavasti aivan viime aikoina ja nyt käytössämme oli valikoima, jolla saimme toteutettua tämän luotettavasti ja haluamallamme tavalla, Paananen taustoittaa. 

Hän kiittelee Technopoliksen omistautumista ja ammattitaitoa verkkopalvelun saralla.

– Heiltä oli varattu riittävä resurssi läpi projektin ja pystyivät hyvin omatoimisesti viemään asioita eteenpäin. Samoin löysimme hyviä tapoja ja välineitä kommunikoida asioita helposti ymmärrettävästi tiimien välillä, jolloin tekeminen oli sujuvaa ja asiat etenivät nopeasti.

Maasivustojen ylläpitoa helpotettiin merkittävästi. Eri maasivustojen päivittäminen on muodostunut hyvin hankalaksi, kun jokaiselle seitsemällä maasivustolla oli kaikilla lisäksi kaksi kieliversiota. Nyt sivustot tuotiin yhden domainin alle ja luotiin yksi englanninkielinen global-sivusto ja maasivut omilla kielillä.

– Technopoliksen tilanteessa kyse oli nimenomaan maasivuista, joilla jokaisella oli myös osittain oma sisältönsä. Tähän haluttiin toimiva ratkaisu, joka taipuisi helposti myös tulevaisuuden tarpeisiin, kun maasivuja ja niihin liittyviä kieliä tarvitaan mahdollisesti lisää, Tomperi kertoo.

Headless-ratkaisun edut tulevat esiin, kun sivustolla liikutaan eri osioiden välillä.

– Headless-ratkaisussa sivustolle pystytetään tavallaan aplikaatio, jonka sisällä kävijä liikkuu. Siksi latausnopeudet ja liikkuminen sivuilla saadaan paljon nopeammaksi, kun jokaista yksittäistä sivua ei ladata erikseen.

Lopputulos

Uuden sivuston käyttäjäkokemusta onnistuttiin personoimaan ja näin parantamaan palvelua. Kun käyttäjä ilmaisee, minkä kaupungin toimitiloista hän on kiinnostunut, tieto tallentuu aplikaatioon ja sivulla liikkuessaan pystytään nyt tarjoamaan hänelle kiinnostavaa sisältöä.

Vaikka vanhan sivuston tietoturva oli jo hyvällä tasolla, uudella arkkitehtuurilla se saatiin nostettua vielä uudelle tasolle. Kun front endin kautta ei ole potentiaalisesti mitään tietoturvattomia komponentteja, jotka olisivat yhteydessä back endiin, riski kaikenlaiseen hakkerointiin pienenee merkittävästi.

– Samalla ratkaisu tuo myös turvaa sivuston toimivuudelle: vaikka ylläpitopuolella tulisi jotain ongelmia, julkinen sivusto pyörisi silti ennallaan, Paananen sanoo.

Uusi sivusto on ollut julki vasta vähän aikaa, mutta alustavat tulokset esimerkiksi liidien generoinnin osalta näyttävät olevan aiempaa paremmalla tasolla.

– Uusi sivusto vastaa paremmin niitä odotuksia, joita käyttäjillä on modernista verkkopalvelusta. Samoin lomakkeet ovat toteutettu käyttäjäystävällisemmin ja se varmasti näkyy myös jatkossa tuloksissa, Tomperi arvioi.