Autoklinikan uudistettu verkkopalvelu tarjoaa paitsi energiatehokkuutta, myös Suomen parasta palvelukokemusta.

Asiakastarina pähkinänkuoressa

• Uusi verkkopalvelu tarjoaa saumattoman asiakaskokemuksen ja samalla pienentää hiilijalanjälkeä. Etusivun paino on keventynyt 92%, mikä tarkoittaa 180,9 kg CO₂e vähennystä vuositasolla.
• Hionin kehittämän Green Sustainable Web (GSW) -käyttöliittymäkirjaston avulla toteutettu sivusto on suunniteltu helppokäyttöiseksi ja palvelemaan asiakkaiden tarpeita parhaalla mahdollisella tavalla. Samalla se on energiatehokas.
• Uudistus on jo nyt tuottanut positiivisia tuloksia, kuten 8% kasvun huoltovarausten määrässä. Afilar-työkalumme avulla mitattuna sivusto on myös merkittävästi aiempaa nopeampi. Sen odotetaan parantavan entisestään asiakastyytyväisyyttä ja liiketoiminnan tehokkuutta.

”Muista vahingossa – Autoklinikka”

Joku kolhaisi ovea parkkipaikalla. Kivi iski tuulilasiin moottoritiellä. Auto kaipaa huoltoa.

Ihmiset kohtaavat autovahinkoja keskimäärin 7 vuoden välein – tarpeeksi harvoin tietääkseen heti mitä tehdä ja keneen olla yhteyksissä. Jos apua ei kysytä vanhemmilta tai naapurin Penalta, suunnataan usein Googleen. Tämän vuoksi autojen vahinko- ja korjauspalvelut on löydyttävä käden käänteessä digikanavista ja apua on saatava nopeasti.

Autoklinikka on Suomen johtava vahinkokorjaamoketju. Autoklinikalla hoituvat ammattitaidolla kaikkien automerkkien pelti- ja lasikorjaukset, ja Helsingissä yritys tarjoaa myös autohuoltopalveluja. Autoklinikalla oltiin vuonna 2023 ison kysymyksen ääressä: miten olla jatkossa kuluttajan ensimmäinen vaihtoehto vahingon sattuessa? Tätä haastetta lähdimme heidän kanssaan ratkaisemaan.

Ekologisuudella on Autoklinikalle valtava rooli

Vastuullisuus ja erityisesti ympäristövastuu on Autoklinikalle tärkeä arvo. Kuluttaja-asiakkaat ovat tietoisia palveluiden ympäristökuormituksesta ja vaativat palveluntarjoajilta konkreettisia vastuullisia toimia.

“Kuluttajat ovat entistä kiinnostuneempia siitä, että ostetut palvelut on tuotettu ympäristö huomioon ottaen. Suurin osa asiakkaistamme tulee meille vakuutusyhtiöiden kautta ja vakuutusyhtiöille ympäristöasiat ovat tärkeitä myös. Meille on tärkeää, että lunastamme sidosryhmien odotukset ja että toimimme kaikin puolin vastuullisesti.”, summaa Heli Avikainen, Autoklinikan Head of Marketing and Communications.

Koska ekologisuus ja ympäristövastuun huomioiminen on Autoliitolle tärkeää, nousi Hionin digitaalisuuden saralla tekemä ympäristövastuutyö edukseen jo tarjousvaiheessa. Muita valintaa tukevia seikkoja olivat lisäksi Hionin kansainvälinen kokemus, referenssit, ratkaisuehdotuksen esittely ja projektin hinta.

Tavoitteiden ja datan kautta liikkeelle

Lähtökohtamme Autoklinikan verkkosivuston uudistuksessa oli selkeä: luoda digitaalinen asiakaskokemus, joka on yhtä saumaton ja miellyttävä kuin Autoklinikan palvelu toimipisteissä.

Tiesimme, että kilpailu alalla on kovaa ja parasta asiakaspalvelua tarjoavat toimijat menestyvät. Sukelsimme syvälle Autoklinikan liiketoiminnallisiin tavoitteisiin ja analysoimme vanhan sivuston dataa ymmärtääksemme paremmin heidän tarpeitaan. Pohjoismainen yhteistyö konsernin kanssa mahdollisti laajan näkökulman ja auttoi tunnistamaan sekä yhteneväisyyksiä että eroavaisuuksia eri maiden verkkopalvelutarpeissa.

Ymmärsimme, että autovahinko on usein stressaava ja harvinainen tilanne. Siksi digitaalisen palvelun tuli olla erityisen selkeä ja helppokäyttöinen, jotta asiakas löytää tarvitsemansa tiedon ja palvelut vaivattomasti. Autoklinikan strategisen ytimen – palveluiden esittelyn, kilpailijoista erottautumisen ja mutkattoman asiakaspalvelun – tuli heijastua vahvasti myös verkkosivustolla. Lisäksi tavoitteena oli tehdä tämä kaikki mahdollisimman ekologisesti.

Palvelumuotoilulla tärkeä rooli onnistumisessa

Käyttäjälähtöisyys oli suunnittelumme kulmakivi. Määrittelimme neljä motiivipohjaista kohderyhmää, jotka perustuivat Autoklinikan markkinoinnin määrittelemiin kohderyhmiin ja asiantuntijoiden näkemykseen tyypillisistä asiakkaista.

Yhdistämällä käyttäjien tarpeet, sivuston tavoitteet ja analytiikan löydökset, muodostimme pääteemat ja viestit, joiden ympärille rakensimme uuden, selkeän ja loogisen sisältöhierarkian, käyttäjäpolut ja navigaatiorakenteen. Suunnittelun osana määrittelimme myös palvelun tone-of-voicen, jotta yhtenäinen palvelu- ja brändikokemus saadaan toteutettua pohjoismaisella tasolla.

Suunnittelun pohjana Hion Green, sustainable web (GSW) -käyttöliittymäkirjasto

Käyttöliittymän suunnitteluvaiheen pohjana toimi Hionin kehittämä GSW UI Kit -käyttöliittymäkirjasto, joka on suunniteltu energiatehokkaita selainpohjaisia digitaalisia palveluita, pääasiassa verkkosivustoja varten.

GSW UI Kit on räätälöity HTML5-pohjaisten verkkosivujen ja -palveluiden suunnitteluun Figmassa. Se sisältää oletuksena kaikki verkkoselaimen natiivit UI-komponentit ja se laajentuu niiden avulla suuremmiksi osakokonaisuuksi.

Energiatehokkuus suunnittelun ytimessä

Kirjaston suunnittelussa on tunnistettu energiatehokkain tapa toteuttaa verkkosivuston front end; web-standardit (semanttinen HTML ja moderni CSS), ja pyritty välttämään nykyaikana entistä tunnetuimmaksi tulleet trendikkäät, standardeista poikkeavat ratkaisut, jotka saattavat itsessään olla resursseiltaan suurempia kuin koko sivuston front-end-koodi. Web-standardiin kuuluu saavutettavuus, joka itsessään on hyvä lähtökohta energiatehokkuudelle, varsinkin kun käyttöliittymäelementit yhdistetään tarkasti suunniteltuihin käyttäjäpolkuihin.

Kirjasto on yksi osa Hionin suunnittelemaa GSW Frameworkia, joka on ennen kaikkea ajatustapa, mutta joka sisältää myös valmiiksi pureskeltuja palasia designin ja kehittämisen tehostamiseksi. Yksi palasista on UI Kit.

GSW UI Kit-kirjaston hyödyt

GSW UI Kit on suunniteltu alusta asti mahdollisimman energiatehokkaaksi.

• GSW UI Kit -kirjasto on helppokäyttöinen ja sisältää vain kaiken tarvittavan
• Kirjasto nopeuttaa projektien aloitusta
• Kevyempi kuin Googlen Material Design Kit

Tekninen toteutus ja green coding -käytänteet

• Moderni serverless-arkkitehtuuri skaalautuu ja suojaa
• Uusiutuvalla energialla ylläpidetty palvelu
• Optimoidut välimuistiratkaisut
• Huippunopea tietokanta ja sivustohaku
• Kevyet kuvat ja nopeat latausajat

Mitatusti nopea ja energiatehokas

Sivuston nopeutta on hiottu huippuunsa Core Web Vitals -mittariston ja muiden optimointityökalujen avulla, jotta se latautuisi salamannopeasti.

Hionin Afilar-työkalu

• Mittaukseen käytimme Google PageSpeed Insights -ohjelmistoon perustuvaa omaa Afilar-työkaluamme. Afilar on Hionin kehittämä työkalu, jolla mitataan sivutyyppien Core Web Vitals -arvoja ja tunnistetaan mahdollisia parannuskohteita. Työkalu tarjoaa kehittäjille Hionin kehitysympäristöön sovitetut ohjeet parannuksien toteuttamiseksi.

OpenTelemetry-kehys

• Verkkopalvelimen suorituskykyä olemme mittaroineet pilvipalvelimelta OpenTelemetry-kehyksellä. OpenTelemetryn avulla pystymme selvittämään tuotantoa vastaavassa ympäristössä suorituskyvyn pullonkauloja jo lähdekooditasolla.

Tuloksena raikas ja asiakasta palveleva kokonaisuus

Palvelun käytettävyys sekä visuaalinen ilme paranivat uudistuksessa ja ovat saaneet hyvää palautetta varsinkin Autoklinikan sisäisiltä sidosryhmiltä.

Asiakaspalvelulomakkeiden uudelleenmuotoilu on jo parantanut varausastetta. Vaikka sivusto on ollut referenssitekstin kirjoittamisen aikaan käytössä vasta lyhyen aikaa, olemme jo nähneet positiivisia tuloksia: lomakkeiden kautta tehtyjen varausten määrä on kasvanut 8% viime vuoteen verrattuna.

“Tosi selkeät, helppokäyttöiset ja freesit sivut.” - Kommentti Autoklinikan henkilöstöltä

Uudistus näkyy keveytenä ja nopeutena

Uuden sivuston myötä olemme onnistuneet laskemaan etusivun painoa 92% ja yhden sivun mediaanipainoa 40%. Päästöinä tarkoittaa autoklinikan verkkosivuston osalta noin 180.9 kg CO₂e kevennystä vuositasolla verrattuna aikaisempaan.

Etusivu on kaikkein käydyin sivu, joten positiiviset muutokset näkyvät ennen kaikkea käyttäjäkokemuksessa. Erityisesti ensimmäisen sivulatauksen tiedonsiirtoa on saatu pienennettyä huomattavasti.

Ennen sivustouudistusta keskimääräinen Autoklinikan etusivu kaikkine lisäosineen oli kuormaltaan 6.4 MB, joka tuotti 0.215 g CO₂e päästöjä [CO2.js perusteella laskettu].

Uuden sivuston osalta etusivu kaikkine lisäosineen on 0.7MB [0.024 g CO₂e päästöjä].

Lue koko asiakastarina sivuiltamme.