Autoklinikan uudistettu verkkopalvelu

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

Asiakastarina pähkinänkuoressa

• Autoklinikka.fi on nyt entistäkin nopeampi, helppokäyttöisempi ja energiatehokkaampi. 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.

• Vastuullisuus ja käyttäjälähtöisyys kulkevat käsi kädessä. 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.

• Uusi verkkopalvelu tukee Autoklinikan kasvua ja menestystä. 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.” Heli Avikainen summaa.

Koska ekologisuus ja ympäristövastuun huomioiminen on Autoklinikalle 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.

Ostopolkujen kautta asiakkaan elämän helpottaminen

Uudistuksen keskiössä oli saumattomien ostopolkujen luominen, jotta Autoklinikasta tulisi ensisijainen valinta vahingon sattuessa. Panostimme erityisesti navigaation toimivuuteen ja helppokäyttöisyyteen, jotta asiakas löytää helposti etsimänsä tiedon ja palvelut stressaavassakin tilanteessa. Mobile-first-lähestymistapa varmisti, että verkkosivusto toimii saumattomasti kaikilla laitteilla ja palvelee asiakasta parhaalla mahdollisella tavalla aidossa vahinkotilanteessa.

Yhtenä asiakkaan elämää helpottavana toiminnallisuutena mainittakoon se, että Autoklinikka.fi palvelee kolarivaurioasiakkaita myös digitaalisen 24h palvelun avulla. Palvelun kautta asiakas voi lähettää valokuvat tai videon autonsa vauriosta. Autoklinikan kuvatiimi arvioi kuvien perusteella vaurion laajuuden ja palaa asiakkaalle työ- ja kustannusarvion kera. Palvelun avulla asiakas säästää aikaa ja vaivaa kun ajoa paikan päälle korjaamolle ei tarvita.

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

Kun tunnistamme alusta asti vain ne elementit, joita web-sivustolla oikeasti käytetään, säästetään aikaa ja energiaa muutosten ja uusien asioiden tekemisessä.

Kirjasto nopeuttaa projektien aloitusta

Elementtien variaatioiden ja attribuuttien nimeäminen noudattaa tiettyjä standardeja, joka nopeuttaa jatkossa kehitystä ja turhilta väärinymmärryksiltä vältytään kaikissa vaiheissa.

Kevyempi kuin Googlen Material Design Kit

Googlen Material 3 Design Kitin paino on 64MB, kun taas Autoklinikan kirjaston uudelleenkäytettävät komponentit Figmassa painavat yhteensä 16.9MB – eli jokaisella designerin ja kehittäjän tiedoston avaamisella säästetään runsaasti energiaa verrattuna painavampiin kirjastoihin.

Sujuva yhteys kehitykseen

Toteutukseen kirjasto ui design tokenien avulla. Kirjasto on yhteydessä kehitys-repositorioon, josta kehittäjät saavat käyttöliittymän väri, spacing ym. arvot suoraan käyttöönsä CSS-muuttujina. Tämä vähentää turhien Figma-resurssien käyttöä ja vähentää huomattavasti tehottomia “design to dev handoff” (etä)tapaamisia. Myös ns. punakynän käyttö (virheiden etsintä) designerin toimesta vähenee, kun oikeat arvot ovat jo valmiina kehittäjän käytössä automaattisesti.

Suunnittelun lähtökohtana olleet vakio-HTML-elementit toimivat pohjana WordPressin natiivilohkoille. Tällä vältettiin mahdollisimman hyvin turhien custom-elementtien kehittäminen, ja pyörää ei tarvi keksiä missään kohtaan uudelleen, vaan uudelleenkäytettävyys on sisäänrakennettu kokonaisuuteen.

Kirjaston pohjalta räätälöity kokonaisuus mahdollistaa selkeän, yksinkertaisen, saavutettavan, kevyen sekä käyttäjäystävällisen lopputuloksen, jota on tehokasta kehittää jatkossa vielä paremmaksi.

Tekninen toteutus ja green coding -käytänteet

Moderni serverless-arkkitehtuuri skaalautuu ja suojaa

Autoklinikan verkkopalvelu hyödyntää modernia ja skaalautuvaa serverless-arkkitehtuuria. Se mukautuu automaattisesti kävijämäärän vaihteluihin ja tarjoaa tehokkaan suojan haitallisilta hyökkäyksiltä. Palvelunestohyökkäykset ja bottiliikenne torjutaan jo verkkotasolla, mikä varmistaa sivuston toimivuuden ja saatavuuden.

Uusiutuvalla energialla ylläpidetty palvelu

Autoklinikka.fi hostataan Google Cloudissa Haminan konesalissa, joka saa 97% energiastansa paikallisesta tuulipuistosta, ja joka on yksi Googlen energiatehokkaimmista keskuksista. Vanhaan paperitehtaaseen rakennetussa palvelinsalissa on myös energiankulutusta pienentävä jäähdytysjärjestelmä, jossa käytetään Suomenlahdesta saatavaa merivettä.

Optimoidut välimuistiratkaisut

Autoklinikan verkkopalvelu on optimoitu nopeaan latautumiseen hyödyntämällä tehokasta välimuistitusta. Sivusto latautuu nopeasti usean kerroksen välimuististrategian ansiosta, joka hyödyntää mm. Google Cloudin kuormantasaajan jakeluverkkoa. Tämä vähentää palvelimen kuormitusta ja nopeuttaa sivujen näyttämistä.

Huippunopea tietokanta ja sivustohaku

Sivuston tietokantakyselyt ja sivustohaku ovat optimoitu huippunopean Redis-ratkaisun avulla. Tietokantakyselyiden tallentaminen on yksi kriittisimmistä suorituskykyä nostavista toimenpiteistä. Sivuston sisäinen haku hyödyntää myös Redikseen pohjautuvaa RediSearch hakumoottoria suorituskyvyn parantamiseen hauissa.

Kevyet kuvat ja nopeat latausajat

Modernin WebP-kuvaformaatin, lazyload-tekniikan ja tehokkaan välimuistituksen ansiosta sivusto latautuu nopeasti ja sujuvasti. Kuvat ja muut staattiset tiedostot tarjoillaan nopeasti jakeluverkon kautta. Herokuvat taas esiladataan, jotta sivuston latautuminen olisi mahdollisimman sujuvaa.

Integraatiot

Sivustolle toteutettiin kaksisuuntainen integraatio sivuston ajanvarauksesta ERP järjestelmään sekä ajoneuvotietojen hakeminen rekisterinumeron perusteella ajoneuvotietokannasta.

Sivusto hakee reaaliaikaisesti korjaamoiden varattavissa olevat ajat. Lähetetty varaus toimitettiin tietoturvallisesti ja käyttäjätietoja vaarantamatta toiminnanohjausjärjestelmään. Järjestelmään vietiin asiakasdata, ajoneuvotiedot, varaustiedot sekä mahdolliset kuvat ja videot.

Integraatiossa huomioitiin yksittäisten toimipisteiden varattavissa olevat ajat. Toteutus tehtiin REST rajapintojen avulla.

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.

Uskomme, että tämä on vasta alkua ja että uusi verkkosivusto tukee Autoklinikan kasvua ja menestystä tulevaisuudessa. Jäämme mielenkiinnolla odottamaan vasta julkaistun verkkosivun loppukäyttäjäpalautteita sekä käyttäjätestausten tuloksia.

“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.

Uuden sivuston myötä voimmekin todeta, että olemme parantaneet sivuston käytettävyyttä sekä ekologisuutta merkittävästi. Asiakkaamme voi todeta hyvällä omallatunnolla toimivansa ympäristövastuullisen digikumppanin kanssa.

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ä].

Mitä seuraavaksi?

Sivuston kehitys jatkuu analytiikkaan ja käyttäjätutkimukseen perustuen. Palvelua pyritään aktiivisesti parantamaan ja sivustoa kehitetään samalla entistäkin energiatehokkaampaan suuntaan. Haluamme Autoklinikan palvelun kautta muistuttaa etteivät energiatehokkaat palvelut ole ikinä kerralla valmiita, vaan kehitystyö on prosessi ja aina on parantamisen varaa.

Jatkamme tinkimätöntä arvopohjaista kehitystyötä, jonka tavoitteena on saada verkkopalvelu kerrallaan digimaailma kestävämpään suuntaan. On hienoa tehdä tätä työtä asiakkaiden kanssa joilla on sama visio.