St1 Biogas - uusi sivusto nopeasti Webflow’lla

St1 tarvitsi uudelle biokaasuliiketoiminnalleen Ruotsissa verkkosivuston erittäin tiukalla aikataululla. Lamian design-tiimi toteutti ripeän projektin alusta loppuun Webflow-alustalla ilman tyypillistä devausvaihetta. Neljässä viikossa julkaistu st1biogas.se on laadukas sivusto, joka tukee ja kasvattaa St1:n brändiä Ruotsin biokaasumarkkinassa.

Uusi sivusto St1 Biogasille Webflow'lla.

Alkukesästä 2021 St1 aloitti biokaasuliiketoiminnan Ruotsissa ostamalla E.ON Biofor Sverige AB:n. Ostettu yhtiö toimii nyt nimellä St1 Biogas AB ja se on johtavia biokaasualan toimijoita n. 30% markkinaosuudella Ruotsin liikennesegmentissä.

Projektin keskeisin tavoite oli luoda uudelle liiketoiminnalle käyttäjälähtöiset verkkosivut ja tarjota kohderyhmille tietoa St1:n biokaasutoiminnasta Ruotsissa sekä sen tuotteista ja palveluista. Visuaalisesti tavoitteena oli tehdä uusi brändi tutuksi niin yritys- kuin kuluttaja-asiakkaille ja liittää se mielikuvallisesti osaksi St1-konsernia.

Projektille asetettiin tiukka 4 viikon aikataulu, jonka aikana luotiin koko sivusto sekä kerättiin julkaistava sisältö kokonaisuudessaan. Lisäksi vaatimuksena oli, että sivuston muokkaamisen pitäisi olla helppoa eikä vaatia lainkaan koodausosaamista.

Webflow’lla sivusto ilman koodausta

Projektissa teknologiaksi valikoitui sisällönhallinta- ja julkaisujärjestelmä Webflow, koska se toimii kattavana “yhden luukun” palveluna ja näin ollen tarjoaa paitsi helppokäyttöisen käyttöliittymän verkkosivujen rakentamiseen, myös työkaluja sen ylläpitämiseen ja päivittämiseen.

Käytännössä Webflow-alustalla oli siis mahdollista toteuttaa laadukas verkkosivusto ilman tyypillistä ohjelmistokehittämisvaihetta. Tämä olikin ratkaisu projektin tiukkaan aikatauluun, koska Webflow’n avulla voitiin rakentaa verkkosivusto ilman devausta St1:n ja Lamian markkinointi- ja design-osaajien voimin. Käytännössä Weblow on kuitenkin teknologiana väliaikainen ratkaisu St1:lle.

Webflow’n lisäksi projektissa käytettiin Slickplan-palvelua sivuston rakenteen suunnitteluun sekä design-työkalut Sketch ja Invision rautalankamallien luomiseen ja konseptien validointiin.

Lamia rakensi St1 Biogas verkkosivut Weblow'lla ennätysajassa.
Lamia rakensi St1 Biogas verkkosivut Weblow'lla ennätysajassa.

Nopeaankin projektiin mahtui monta vaihetta

Vaikka projektin aikataulu oli tiukka, se toteutettiin silti palvelukehityksen parhaiden käytäntöjen mukaisesti.

Kick-offissa tarkennettiin hankkeen tavoitteet, projektin kulku ja aikataulu. Lisäksi käytiin läpi ehdotus uuden sivuston rakenteesta ja priorisoitiin sen pohjalta julkaistava toimitussisältö sekä eri vaiheet toteutukselle. “Keräsimme myös mahdollisimman paljon tietoa asiakkaan uudesta liiketoiminnasta sekä sivuston loppukäyttäjistä niin B2B- kuin B2C-puolella”, Ruta Damanskis Lamian design-tiimistä kertoo.

Sitten projekti eteni sivuston käyttöliittymän suunnitteluun ja tärkeimpien sivujen rautalankamallien luomiseen. Käyttöliittymän toiminnan peruslogiikka käytiin yhdessä asiakkaan läpi ja kun todettiin sen toimivan, jatkettiin sivujen visuaaliseen suunnitteluun.

Visuaalisessa suunnittelussa hyödynnettiin olemassa olevaa St1 design systeemiä eli uuden sivuston visuaalinen ilme oli valmiiksi määritelty. “Tässä vaiheessa teimme tiivistä yhteistyötä asiakkaan markkinointitiimin kanssa kuvien valinnan ja sisällöntuotannon osalta, jotta lopputulos täytti kaikki brändilliset ja sisällölliset tarpeet. Julkaistavaksi valmiit sivut kävimme tehokkaasti aina yhdessä läpi”, Ruta kuvaa yhteistyömallia St1:n tiimin kanssa.

Toteutuksessa varmistettiin mm. sivuston optimaalinen käyttökokemus sekä responsiivisuus eli toiminnallisuus eri päätelaitteille. Tässä projektin vaiheessa myös Lamian kasvumarkkinointitiimi teki uudelle sivustolle SEO-määrittelyn hakukonenäkyvyyden rakentamiseksi.

QA-vaiheessa testattiin sivusto kokonaisuutena ja korjattiin havaitut bugit.

Uuden sivuston st1biogas.se julkaisu tehtiin askeleittain kolmessa vaiheessa.

Julkaisusta siirryttiin ensimmäiseen jatkokehitysvaiheeseen, jossa implementoitiin uusia toiminnallisuuksia, kuten kolmannen osapuolen tarjoamia ja käyttäjän tunnistautumisen mahdollistavia lomakkeita sekä biokaasuasema- ja sisältöhaku.

Jatkokehitys on siirtynyt jo seuraavaan vaiheeseen ja seuraavaksi on tarkoitus on kehittää verkkosivustoa palvelemaan määriteltyjä kohderyhmiä paremmin ja myös sivuston hakukonenäkyvyys on tärkeä kehityskohde. Yhtäaikaisesti verkkosivuston kehittämisen kanssa suunnitellaan myös St1 Biogas Appia mobiilikäyttäjiä varten.

Lamia rakensi St1 Biogas verkkosivut Weblow'lla ennätysajassa.
Lamia rakensi St1 Biogas verkkosivut Weblow'lla ennätysajassa.

"Tämä oli onnistunut projekti ja saimme hyvää palautetta St1:ltä. Pääsimme asetettuihin tavoitteisiin ja sivusto julkaistiin aikataulussa. Neljässä viikossa tämä oli iso saavutus."

Designerin opit projektista

Päädesignerina projektissa ollut Ruta Damanskis listaa kolme keskeisintä oppia projektista:

  1. “Sidosryhmät vaikuttavat luonnollisesti projektin onnistumiseen ja tässä tiukan aikataulun projektissa asiakkaan aktiivisuudella sekä joustavuudella työpajojen, materiaalin toimittamisen suhteen oli erityisesti suuri rooli. Ilman St1:n sitoutumista asetettuun aikatauluun, projektin tavoitteisiin pääseminen olisi ollut melkein mahdotonta. Tästä iso kiitos koko St1:n tiimille!”
  2. “Oli selkeästi erilainen haaste päästä toteuttamaan verkkosivusto ilman devaustiimiä. Tämä mahdollisti nopean MVP-vaiheen toteutuksen, joustavan reagoinnin ja ketterän kehityksen ilman projektiaikataulun venymistä. Webflow on mielenkiintoinen alusta tällaisiin toteutuksiin.”
  3. “Koska tässä projektissa vastasin itse suunnittelun implementoinnista, se vahvisti teknistä ymmärrystäni front-end ohjelmoinnista kuten siihen liittyvistä työkaluista, toimintatavoista ja eri layout-teknologioista. Pääsin kehittymään suunnittelijana ja sain arvokasta uutta tietoa design-ratkaisujen kehittämisestä devausnäkökulmasta. Tästä on varmasti apua myös kommunikoinnissa front-end devaajien kanssa esimerkiksi projektien QA-vaiheessa.”