Käyttäjä­lähtöinen sähkö­autojen datapalvelu

Tausta

FLTP (Finlandwide Light Vehicles Test Procedure) on testaus­me­ne­telmä, joka pyrkii selvit­tämään sähkö­au­to­mallien todel­lisen kulutuksen Suomen olosuh­teissa. Toiminta perustuu eri vuode­nai­koina järjes­tet­täviin testia­joihin ja testeistä syntyvän datan jakamiseen FLTP:n verkkosivuilla.

Projektin tavoit­teena oli suunni­tella ja toteuttaa uusi, käyttä­jäys­tä­väl­li­sempi verkko­palvelu. Työsken­telin projek­tissa UX/UI-suunnit­te­lijana ja kehittäjänä.

Haasteet

1. Verkko­pal­velun rakenne, toiminnot ja visua­li­soinnit eivät tukeneet datan ymmärtämistä
2. Datan kerää­minen, käsittely ja julkaisu oli hajau­tettu eri palve­luihin, jonka vuoksi ylläpito vei paljon aikaa

Ratkaisut

• Teimme käyttä­jä­tut­ki­muksen, jonka pohjalta suunnit­te­limme käyttäjän tarpeisiin vastaavat toiminnot ja rakenteen
• Suunnit­te­limme ja toteu­timme datan ymmär­tä­mistä helpot­tavia grafiikoita
• Yhdis­timme datan keräyksen, käsit­telyn ja verkko­si­vuston yhdelle alustalle ja loimme ylläpitoa helpot­tavia automaatioita

Prosessi

Demoversion (MVP) rakentaminen

Ennen suunnit­telun alkua tarvit­simme vastauksen kysymykseen, voimmeko luvata asiak­kaalle myös projektin toteu­tuksen? Datan­kä­sit­telyn automa­ti­soinnin haaste kuulosti niin kiinnos­ta­valta, että halusin yrittää. Siksi käytin ensim­mäiset 2 viikkoa MVP:n (minimum viable product) rakentamiseen.

Demoversion sisältö oli:

• lomake, jonka kautta testi­kul­jet­tajat tallen­tavat auton kulutus­datan ja muut testiajon tiedot
• lomakkeen tietojen tallen­tu­minen tieto­kantaan luonnoksina, jotka ylläpitäjä tarkastaa ennen julkaisua
• tallen­netun testi­datan näyttä­minen sivus­tolla (automal­li­koh­tai­sesti)

Koska kaikki ydintoi­minnot onnis­tuivat demover­siossa, pääsimme aloit­tamaan suunnit­te­lu­pro­jektin. Tässä vaiheessa sain tiimiin mukaan kolme uutta jäsentä ja siirryin UX/UI-suunnit­te­lijan rooliin.

Brändin määrittely

Tarvit­simme tarkemman kuvan FLTP:n brändistä, jotta suunnittelu tukisi toiminnan tavoit­teita. Järjestin asiak­kaalle keskus­telun, jossa kävimme läpi FLTP:n arvoja, viestiä ja tavoitteita.

FLTP:n arvoiksi määri­teltiin rehel­lisyys, suoma­laisuus ja puolu­eet­tomuus. Niihin nojaten suunnit­te­limme visuaa­lisen ilmeen:

• väritee­maksi sinisen eri sävyjä
• fontiksi asial­linen Inter
• kuville linjaus: pohjois­maiset maisemat, selkeät kohteet ja neutraali editointi.

Käyttä­jä­tut­kimus

Käyttäjää palve­levan loppu­tu­loksen takaa­mi­seksi ja meidän täytyi ymmärtää paremmin käyttäjän syitä vierailla FLTP-sivus­tolla. Aikataulun vuoksi päätimme käyttää tutki­mus­me­todina kyselyä.

• Käytimme kysymys­tyyp­peinä Likert-asteikkoa ja monivalintaa
• Julkai­simme kyselyn 39 000 sähkö­au­toi­lusta kiinnos­tuneen Facebook-käyttäjän ryhmässä (tavoit­ta­vuuden ja kohde­ryhmän vuoksi)
• Saimme viikon­lopun aikana yli 250 ihmisen vastauksen

Kyselyllä selvi­timme, mitkä tiedot käyttäjiä kiinnos­tavat ja kuinka tärkeinä he pitävät erilaisia toimintoja. Huomioimme mahdol­liset vääris­tymät kartoit­ta­malla myös käyttäjien suhdetta sähkö­au­toiluun yleisesti. Käytimme tulosten analy­soinnin apuna tekoälyä.

Käyttö­liit­ty­mä­suun­nittelu

Teimme käyttö­liit­ty­mä­suun­nit­telua yhdessä toisen UX/UI-suunnit­te­lijan kanssa. Parisuun­nittelu osoit­tautui hyväksi työsken­te­ly­ta­vaksi, sillä saimme jatkuvaa palau­tetta ja ideoita toisiltamme.

Käyttö­ko­kemus

Sivus­tolla on paljon infor­maa­tiota ja paljon lukuja. Siksi käyttö­liit­tymän suunnit­te­lussa oli erityisen tärkeää keskittyä selkeyteen ja turhan infor­maation karsimiseen.

Esimer­kiksi tällai­silla ratkai­suilla paran­simme käyttökokemusta:

• asette­limme elementit väljästi ja selkeisiin ryhmiin
• nostimme tärkeimmät asiat sivujen yläosiin
• selkeällä hakutoi­min­nolla ja suodattimilla
• haita­rie­le­men­teillä
• selkeillä teksteillä (esim. painikkeissa)

Validoimme suunnit­te­lu­rat­kaisuja tekemällä pieniä käyttä­jä­tes­tauksia prosessin aikana. Kaikessa suunnit­te­lussa pyrimme varmis­tamaan loppu­tu­loksen saavutettavuuden.

Datan visua­li­sointi

Kyselyn mukaan tärkein tieto käyttä­jille oli auton toimin­ta­matka. Siksi keski­tyimme tekemään sen esittä­mi­sestä erityisen selkeää. Käyttäjät arvos­tivat myös mahdol­li­suutta vertailla autoja keskenään, joten yritimme tehdä siitä mahdol­li­simman helppoa.

Ratkai­summe käyttä­jäys­tä­väl­liseen visua­li­sointiin oli tällainen:

• automallit näytetään listana, jotta niitä voidaan vertailla
• jokaisen automallin kohdalla on lukujen lisäksi kaksi viivaa: arvioitu toimin­ta­matka ja todel­linen toimintamatka
• viivat skaalau­tuvat näytön koon mukaan ja ovat aina keskenään vertailukelpoisia.

Tekninen toteutus

Kun valtaosa suunnit­te­lusta oli tehty, siirryin takaisin kehit­täjän rooliin. Aloin jatko­ke­hittää demoa, jonka olin tehnyt projektin alussa.

Automaatio

Automaation ja datara­kenteen suunnittelu oli yksi suurim­mista tehtä­vistä tässä projek­tissa. Lopul­linen ratkaisu perustuu hyvin paljon demover­sioon, mutta eri tietojen yhteyksiä ja tieto­tyyppejä jouduin määrit­te­lemään monta kertaa uudestaan. Näin suuren datako­ko­nai­suuden hallinta oli minulle uutta ja siksi haastavaa – ja äärim­mäisen kiinnostavaa.

Sivuston raken­ta­minen

Käytin sivuston kehityk­sessä Oxygen Builderia, ACF-kenttiä ja PHP- ja JavaScript-koodia. Toteutin sivus­tolle mm. tällaisia asioita:

• ajotie­tojen tallennuslomakkeen
• hakutoi­minnon
• suoda­tus­toi­minnon
• backend-automaation, joka käsit­telee ja yhdistää autojen datan.

Tein sivus­tolle myös oman CSS-systeemin, jotta ilme pysyisi yhtenäisenä ja ylläpito olisi helppoa. Systeemiin sisältyi esimer­kiksi luokat välis­tyk­sille, paddin­geille, eriko­koi­sille teksteille ja grideille.

Ja kuten suunnit­te­lussa, myös toteu­tuk­sessa pyrin tekemään ratkaisut mahdol­li­simman saavu­tet­ta­viksi. Käytän­nössä se tarkoitti esimer­kiksi oikein nimettyjä painik­keita, elementtien kohdis­tuksen näkymistä, loogi­sesti eteneviä otsikoita ja näppäi­mis­tö­käy­töllä toimivia haitareita. 

Loppu­tulos

Loppu­tuloksena FLTP-palvelu uudistui täysin ja onnistui täyttämään sille asetetut tavoitteet. Uusi sivusto odottaa vielä julkaisua, joten käyttä­jiltä ei ole vielä saatu palau­tetta. Joitakin ideoita jouduimme karsimaan, sillä projektin toteu­tuk­selle oli aikaa vain 6 viikkoa. Käyttä­jä­kysely auttoi kuitenkin priori­soimaan tärkeimpiä uudis­tus­koh­teita, ja uskon että palvelun käyttö on nyt sekä loppu­käyt­tä­jälle että ylläpi­to­tii­mille helpompaa.

Kuinka kehityin projektin aikana

Toimin projek­tissa sekä UX/UI-suunnit­te­lijana että web-kehit­täjänä, ja kehityin molem­missa tehtä­vissä tämän projektin myötä todella paljon. Projektin aikana huomasin, että hallitsen hyvin erilaisia tehtäviä ja pystyn sovel­tamaan taitojani käytännössä.

Mitä uutta ymmärsin UX/UI-suunnit­te­lusta:

• käyttä­jä­ky­se­lyssä kysymyksen asettelu ja kysymys­tyypit vaikut­tavat vastauksiin, ja niiden kriit­tinen tarkastelu on tärkeää
• tekoäly on erinomainen apu käyttä­jä­datan analysoinnissa
• todella pienet käyttä­jä­tes­taukset voivat antaa todella tärkeää palautetta
• parisuun­nittelu tekee työsken­te­lystä kevyempää ja tehokkaampaa

Kehit­täjänä pääsin uudelle automa­ti­soinnin ja käsin koodaa­misen tasolle, sillä projekti vaati molempia paljon. Ymmärsin myös, että tekniikan tunte­minen auttaa valta­vasti suunnitteluvaiheessa.