Valio.fi

Toimiston ilmoittama referenssi

Tekijä: Evermade

Tärkein teknologia: WordPress

Projektin budjetti: yli 100 000 €

Projektin tyyppi: Yrityksen sivusto kuluttajille

Valio.fi on Suomen suosituin reseptisivusto, joka tavoittaa reilut 1,5 miljoonaa verkkosivukävijää kuukaudessa. Olemme toimineet Valion kumppanina digipalveluiden kehityksessä vuodesta 2022 saakka.

Skaalautuva ratkaisu Valion globaaleihin tarpeisiin

Valion aiempi sisällönhallintajärjestelmä oli useita vuosia vanha, Valiolle räätälöidysti rakennettu järjestelmä. Tilalle haluttiin moderni, käyttäjäystävällinen, helposti muokattavissa oleva järjestelmä, joka ei olisi täysin toimittajariippuvainen. Valinnaksi muodostui WordPress.

Uudistuksen fokuksessa oli erityisesti teknisen alustan vaihtaminen ja ylläpitoratkaisujen kehittäminen. Tavoitteena oli toimivampi tekninen alusta, joka skaalautuisi Valion globaaleihin tarpeisiin.

Osana uudistusprojektia ammattilaisille suunnattu Valio Aimo haluttiin irrottaa valio.fi-sivustosta ja uudistaa omaksi sivustokseen. Valio Aimo rakennettiin osaksi multisite-kokonaisuutta, joka tulevaisuudessa tulee kattamaan myös useita muita Valion sivustoja.

Pitkällä aikajänteellä tavoitteena oli helpottaa tulevien maa- ja brändisivustojen hallintaa, luoda pitkän elinkaaren sivustokokonaisuus, parantaa sisällönhallinnan joustavuutta sekä mahdollistaa eri liiketoimintojen parempi huomioiminen sivuston hallinnassa.

Suunnittelun fokuksena parempi käytettävyys ja saavutettavuus

Suunnittelutyö alkoi vanhan sivuston auditoinnilla ja sivuston kipupisteiden tunnistamisella. Vaikka toteutuksessa fokus oli teknisen alustan vaihtamisessa, oli meillä hyvä tilaisuus tehdä parannuksia verkkosivuston käytettävyyteen ja saavutettavuuteen. Valio oli yhdessä VapaMedian kanssa työstänyt uudelle sivustolle sisältökonseptin ja sen yhteydessä määritellyt rennon, myös nuorempaa kohderyhmää puhuttelevan värimaailman.

UI/UX-työn alkaessa jalkautimme uutta värimaailmaa ulkoasuun ja peilasimme sisältökonseptin tarpeita toteutettaviin elementteihin varmistaen, että sisältölohkot tukevat uusien konseptien toteuttamista. Hienosäädimme ulkoasun yksityiskohtia ja teimme parannuksia toiminnallisuuksien käytettävyyteen, muun muassa uudistamalla hakufilttereitä ja apunavigaatioita sekä yhtenäistämällä fonttikokoja. Teknisen toteutuksen käynnistyttyä suunnitteluun kuului oleellisena tekijänä kehitystyön laadunvalvonta.

Tavoitteena toimittajariippumattomuus, kustannustehokkuus ja joustava sisällönhallinta

Teknisen määrittelyn aikana päätettiin toteuttaa kaksi sivustokokonaisuutta: valio.fi-verkkosivusto kuluttajille sekä multisite-kokonaisuus, joka sisältäisi ammattilaisille suunnatun valioaimo.fi-verkkosivuston ja tulevaisuudessa myös useita muita sivustoja. Tavoitteena oli pitkän elinkaaren ratkaisu, joka selkeyttäisi verkkosivustojen ylläpitoa ja käyttäjähallintaa. Valio.fi:n liikennemäärät ovat huomattavasti suurempia muihin sivustoihin verrattuna, joten eriyttämällä sivustoasennukset pystyttiin varmistamaan palveluiden hyvä suorityskyky.

Valio.fi:n tekninen toteutus tapahtui WordPressin modulaarisilla Gutenberg-lohkoilla, jotka antavat sivuston ylläpitäjälle vapauden muokata sisältöä vaivattomasti ja visuaalisuudesta tinkimättä. Lohkot perustuvat Valion vanhan järjestelmän elementtien toimintaan, joihin tehtiin merkittäviä parannuksia toimintojen ja käytettävyyden suhteen. Rakensimme Valiolle kymmeniä valmiita lohkokokonaisuuksia helpottamaan sisällön hallintaa.

Vanhoilla sivustoilla oli paljon sisältöä, jota haluttiin käyttää sellaisenaan tai hieman paranneltuna myös uudella sivustolla. Sisällöt tuotiin vanhasta sisällönhallintajärjestelmästä uuteen räätälöidyllä lisäosalla, joka muunsi vanhan järjestelmän kymmenet eri sisältöelementit WordPress-blokeiksi. Migraatiosta luotiin statusraportit, jonka avulla ylläpitäjät saattoivat käydä sisällöt tarvittaessa läpi sivukohtaisesti.

Useita integraatioita eri järjestelmiin

Tekninen toteutus piti sisällään lukuisia integraatioita, joista keskeisimpänä ovat tuotetietojen ja reseptien tuonti sekä niihin liittyvät hakutoiminnot ulkoisesta hakuindeksipalvelusta. Valion reseptit ja tuotteet tuodaan räätälöidyn integraation avulla ulkoisista, kolmannen osapuolen järjestelmistä WordPress-sisällöiksi. Resepti- ja tuotedataa muotoillaan sivustolle sopivammaksi käytettävään muotoon ja rikastetaan tarpeen mukaan esimerkiksi kuvilla.

Sivuston hakutoiminnot ovat keskeisessä osassa sivuston käytettävyydessä. Hakumoottorina käytetään Azure Cognitive Search -palvelua. Sisältödata päivitetään ja luetaan automaattisesti ACS:n hakuindeksistä, mikä mahdollistaa suorituskykyiset hakukyselyt niin sivustolla, kuin Valion sovelluksessakin.

Reseptejä ja tuotteita on tuhansia ja niiden erilaiset ryhmittelyt tehdään rajapintojen tarjoaman datan pohjalta WordPressin taksonomiatermeiksi ja tallennetaan lopulta myös hakuindeksiin. Valion ajankohtainen uutissisältö puolestaan tuodaan Cision-markkinointiviestijärjestelmästä WordPress-ympäristöön.

Edellä mainittujen sisältöintegraatioiden lisäksi sivustoille toteutettiin Azure AD -integraatio, jonka avulla ylläpitokäyttäjät voivat kirjautua WP:n hallintaan käyttäen Microsoft-tunnuksiaan.

WordPressin mediatiedostot, eli sivustolle ladattavat kuvat ja muut liitteet tallennetaan automaattisesti Azure Blob Storageen. Blob Storagen kanssa toimivan Azuren CDN-palvelu takaa tiedostojen tehokkaan ja nopean jakelun loppukäyttäjille.

Sisältö- ja hakuintegraatiota monitoroidaan erikseen räätälöidyillä monitorointilisäosalla, joka tuo integraatioiden tilapäivitykset näkyville suoraan WordPressin hallintapaneeliin sekä hälyttää ongelmatilanteissa määriteltyjen viestintäkanavien kautta.

Hyvä suorituskyky uudistuksen keskiössä

Suorituskyky oli keskeinen tekijä teknisen arkkitehtuurin näkökulmasta ja Core Web Vitalsit eli Googlen määrittämät verkkosivujen suorituskykymittarit ohjasivat kehitystä. Koska Valio.fi on Suomen suosituimpia sivustoja, oli myös tärkeää, että aiemmin saavutettu hyvä hakukonenäkyvyys säilyisi uudellakin sivustolla. Säilytimme sivuston migraatiossa metatiedot, toteutimme skeemat määrittelyn mukaisesti pienillä parannuksilla ja pidimme huolta siitä, että uudelleenohjaukset olivat kunnossa.

Palvelinten infrastruktuuri suunniteltiin vikasietoiseksi ajamalla itse pääsivustoa monella WordPress-palvelimella ja erillisellä tietokantapalvelimella. Cloudflare CDN -palvelu varmistaa hyvän suorituskyvyn ja suojauksen verkkohyökkäyksiltä. Se tarjoaa käytännössä rajatonta suorituskykyä huolehtien myös välimuistituksesta, palvelunestohyökkäyksiltä suojautumisesta sekä palomuurista.

Valion muille sivustoille oma multisite-kokonaisuus

Projektiin kuului ruoka-alan ammattilaisille suunnattujen sisältöjen erottaminen valio.fi:stä kokonaan omaksi sivustokseen. Valioaimo.fi toteutettiin erilliseen multisite-ympäristöön hyödyntäen valio.fi:n pohjarakenteita ja lohkoja. Uutta sivustoa varten suunnittelimme sitemapin, rautalangat sekä layoutit jalkauttaen Aimon brändi-ilmettä tarvittaviin lohkoihin ja toiminnallisuuksiin.

Valio.com on Valion kansainvälisen toiminnan B2B-sivusto, joka kattaa kaikki Valion maasivustot. Sivuston tekninen pohja lainaa Valio.fi-sivustolla käytettyjä lohkoja, joita on räätälöity kansainvälisen sivuston tarpeisiin.

Myös Gold&Greenille luotiin oma, erottuva brändinsä. Vastasimme sivuston rakenteen suunnittelusta sekä visuaalisen ilmeen jalkauttamisesta verkkosivuille. Sivuston pohjana käytettiin valio.fi:n sivustouudistuksessa tehtyjä lohkoja, jotka tyyliteltiin Gold&Green -brändin mukaiseksi. Navigaatio suunniteltiin tukemaan sivuston sisältörakennetta ja sivustolle toteutettiin mahdollisuus reseptien ja tuotteiden luomiseen ja hallintaan.


Sinua voisi kiinnostaa myös

Granlund

Tekijä: Evermade

Tärkein teknologia: WordPress

Projektin budjetti: yli 60 000 €

Projektin tyyppi: Yrityksen sivusto yritysasiakkaille (B2B)

Granlund monialainen kiinteistöjen asiantuntijakonserni, jonka juuret ovat vahvasti LVI-suunnittelussa. Sen sivusto Granlund.fi oli uudistuksen edessä, sillä se ei palvellut yrityksen potentiaalisia asiakkaita tai markkinointia optimaalisesti. Sivusto oli modernin oloinen, mutta ongelmakohtia oli useita: tekninen ratkaisu kaipasi päivitystä ja sivuston sisältörakenne sekä käyttäjäpolut tuli uudistaa kohderyhmälähtöisiksi. Sivusto oli uudistuksen tarpeessa myös visuaalisesti, ja Granlund halusi saada […] Lue lisää

Korsisaari

Tekijä: Valve

Tärkein teknologia: WordPress

Projektin budjetti: 30 000–60 000 €

Projektin tyyppi: Yrityksen sivusto kuluttajille

Korsisaari-yhtiöt on lähes 100-vuotias kotimainen Nurmijärveltä peräisin oleva perheomisteinen yritys, jonka toiminta sisältää tänä päivänä muunmuassa joukkoliikennettä, tilausajoja, taksiliikennettä, sopimusasiakkuuksia ja tapahtumakuljetuksia. Yhteistyömme Korsisaaren kanssa on kestänyt jo vuosia, ja alkunsa se sai edellisen useista sivustoista koostuvan verkkopalvelukokonaisuuden ylläpidon ja kehityksen haltuunotolla. Korsisaari.fi-sivuston laajempi uudistus tuli ajankohtaiseksi syksyllä 2023, jolloin haluttiin modernisoida koko alustaratkaisu ja […] Lue lisää

Newsec – Larun Kehräämö

Tekijä: Avidly

Tärkein teknologia: WordPress

Projektin budjetti: 10 000–30 000 €

Projektin tyyppi: Yrityksen sivusto yritysasiakkaille (B2B)

Historialliselle teollisuusmiljöölle vahva brändi ja modernit nettisivut Lauttasaaressa Kiviaidankadulla sijaitsevalle Larun Kehräämölle luotiin tunnettuuden lisäämiseksi modernit verkkosivut sekä vahva omaleimainen brändi, nimeä myöten. Lähtökohta – Lisää vuokralaisia uniikkeihin toimistotiloihin Lauttasaaressa Kiviaidankadulla sijaitseva toimistotalo omaa pitkän historian entisenä villakehräämönä. Rakennus on yksi Lauttasaaren vanhimmista, sillä toiminta rakennuksessa on alkanut jo 1950-luvulla. Nykyiset mittansa rakennus sai vuonna […] Lue lisää

Rinta-Joupin Autoliike

Tekijä: Evermade

Tärkein teknologia: WordPress

Projektin budjetti: yli 60 000 €

Projektin tyyppi: Yrityksen sivusto kuluttajille

Rinta-Joupin Autoliike on yli 70-vuotias perheyritys ja yksi Suomen menestyneimpiä autoliikkeitä. Yrityksellä on tänä päivänä 28 toimipistettä ympäri Suomen. Vaihtoautojen, uusien autojen, matkailuajoneuvojen ja moottoripyörien myynnin ja oston lisäksi palveluihin kuuluvat merkkihuollot sekä laadukkaat yleishuollot kaikkiin merkkeihin. Uudistuksen lähtökohdat Rinta-Joupin Autoliike etsi uutta yhteistyökumppania digitaalisen myynnin tueksi ja olikin ennen yhteistyötämme kehittänyt digitaalisia myyntikanaviaan. Kun […] Lue lisää

John Nurmisen Säätiö

Tekijä: Evermade

Tärkein teknologia: WordPress

Projektin budjetti: yli 60 000 €

Projektin tyyppi: Järjestön verkkopalvelu

John Nurmisen Säätiö perustettiin takaamaan merellisen kulttuuriperinnön säilyminen. Säätiö on merkittävä yhteiskunnallinen vaikuttaja, joka työskentelee meriluonnon suojelemiseksi, Itämeren tilan parantamiseksi ja merikulttuurin vaalimiseksi. Lähtökohdat ja tavoitteet John Nurmisen Säätiö etsi kumppania uudistamaan verkkopalveluaan yhtenäisemmäksi, käyttökokemukseltaan jouhevammaksi ja hakukonenäkyvyydeltään paremmaksi. Projektissa lähdettiin tekemään kokonaisuudistusta, jossa sekä verkkopalvelun ilme, rakenne että tekninen ratkaisu päivitettiin. Verkkosivuston ilme modernisoitiin […] Lue lisää

Palvelualojen ammattiliitto

Tekijä: Evermade

Tärkein teknologia: WordPress

Projektin budjetti: yli 100 000 €

Projektin tyyppi: Järjestön verkkopalvelu

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 […] Lue lisää

Vierityspalkki-blogi

Julkaistu vuodesta 2006. Vierityspalkki on blogi kotimaisen internet-alan trendeistä, teknologioista ja alan toimistoista. Seuraa, niin tiedät miten ja kenen toimesta syntyvät parhaat verkkopalvelut, verkkokaupat ja räätälöidyt web-sovellukset.
Lisätietoa blogista ja sen lukijoista.

  • 1100+ asiantuntija-artikkelia.

    Toimitettua asiasisältöä kattavasti teknologioista ja web-alan ilmiöistä. Vierityspalkki nostaa esiin alan puheenaiheita ja tuoretta tutkimustietoa, osallistuu keskusteluun sekä haastattelee alan asiantuntijoita ja toimistoja.


    Kaikki artikkelit

  • 1300+ digipalvelun referenssicasea.

    Julkaisut-palsta tarjoaa näkyvyyttä kiinnostaville uusille verkkopalveluille ja web-sovelluksille, ja antaa asiakkaille mahdollisuuden arvioida eri toimistojen osaamista.


    Selaa toimistojen julkaisuja

  • 1000+ aktiivista lukijaa blogin kuukausikirjeellä.

    Kerran kuukaudessa ilmestyvä kuukausikirje koostaa julkaistut artikkelit, uudet julkaisut, avoimet työpaikat ja ajankohtaiset linkkivinkit.


    Tilaa uutiskirje

  • 31 kokenutta digitoimistoa

    on päässyt aina ajantasaiselle Toimistot-listalle. Lista on auttanut asiakkaita löytämään kokeneita digitoimistokumppaneita jo usean vuoden ajan. Lista keskittyy WordPress-osaajiin ja räätälöityjen web-sovellusten tekijöihin.


    Selaa Toimistot-listaa

Tilaa kuukausikirje

Kerran kuukaudessa ilmestyvä uutiskirje koostaa artikkelit, julkaisut, työpaikat ja linkkivinkit. Kirjeellä on jo yli 1000 tilaajaa.
Huom. Sähköpostiosoitettasi ei luovuteta eteenpäin, eikä käytetä mihinkään muuhun tarkoitukseen – ihan oikeasti.

Siirry takaisin sivun alkuun