Suomen parasta palvelukokemusta ja energiatehokkuutta

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.

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.

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.

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.

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.