Itsepalvelukassan käyttökokemuksen parannus uudella ulkoasulla

Henkilökohtainen projekti | UI/UX suunnittelu
Mockup, Kesko itsepalvelukassaMockup, Kesko itsepalvelukassa

Itsepalvelukassan tavoitteena nopea ja vaivaton asiointi

Keskon päivittäistavarakaupan itsepalvelukassojen tavoitteena on tarjota käyttäjille nopea ja vaivaton tapa asioida kassalla. Itsepalvelukassalla käyttäjä itse skannaa ja veloittaa tuotteet ilman kassahenkilöä. Nykyisessä itsepalvelukassassa on kehityskohtia ja puutteita, minkä takia nopeus ja vaivattomuus ei aina toteudu.

Tavoitteeni oli luoda helppokäyttöinen itsepalvelukassa, jota kaikki osaavat käyttää nopeasti ja vaivattomasti ilman opastusta. Lisäksi halusin keskittyä UI-suunnitteluun ja luoda itsepalvelukassalle selkeän ja modernin ulkoasun, joka täsmää Keskon brändäys. Toteutin suunnitelmani henkilökohtaisena projektina Figmassa.

Käyttäjätutkimus aiemmalla kokemuksella

Työskennellessäni Keskolla nykyisten itsepalvelukassojen parissa minulle kehittyi käsitys niiden toiminnoista, puutteista ja kehityskohdista.
Hyödynsin tässä projektissa saamaani tietoa, jota kertyi observoimalla oikeiden käyttäjien itsepalvelukassan käyttöä itsepalvelukassalle tarkoitetussa ympäristössä. Lisäksi sain kuulla palautetta suoraan käyttäjiltä itsepalvelukassan käytöstä.

Nykyisen itsepalvelukassan ongelmat (kuvassa jäljitelmä nykyisestä itsepalvelukassasta)

Nykyisen itsepalvelukassan ongelmat

Keräämäni tiedon ansiosta olen huomannut, etteivät käyttäjät aina tiedä miten itsepalvelukassalla edetään tai miten jotkut toiminnot toteutetaan. Käyttäjän hämmennys johtuu nappien puutteellisesta hierarkiasta ja epäselvistä call-to-actioneista. Suurin osa napeista ovat samanvärisiä, -muotoisia ja -kokoisia eikä niiden call-to-actionit ole aina selkeitä. Hämmennystä aiheuttaa myös kanta-asiakaskortin lukuohje, joka näyttää napilta, jolloin käyttäjät yrittävät painaa sitä. Kanta-asiakaskortin onnistuneesta lukemisesta ei myöskään tule selkeää ilmoitusta.

‍Nykyisestä itsepalvelukassasta puuttuvat kokonaisalennuksen näkyminen ja toiminto kumota ostokset. Kaikki visuaaliset ratkaisut eivät vastaa Keskon brändäystä niin hyviuin voisivat, kuten puuttuvat logot ja sloganit sekä taustavärin haalea oranssi.

User flow -kartta
User flow -kartta

Uuden itsepalvelukassan suunnitteluprosessi

Ensimmäiseksi toteutin user flow -kartan ja jäljitelmän nykyisen itsepalvelukassan ulkoasusta Figmaan. Nämä antoivat entistä syvällisemmän käsityksen itsepalvelukassan toiminnoista ja parannettavista asioista. Aloitin uuden itsepalvelukassan suunnittelun tuotteiden skannaus -vaiheesta ja etenin siitä seuraavien vaiheiden suunnitteluun.

Päätin aloittaa suunnittelun rakentamalla raakalankamallin tyhjästä ja edetä siitä. Tämä osottautui kuitenkin vääräksi lähestymistavaksi, koska suunnittelin lopulta kaksi itsepalvelukassaa, jotka eivät täsmänneet oikeaa lopputulosta.

Halusin alunperin uuden suunnitelman muistuttavan ulkoasultaan nykyistä itsepalvelukassaa, minkä takia päätin lopulta käyttää rakentamaani nykyisen itsepalvelukassan jäljitelmää pohjana ja pääsin näin tavoittelemaani lopputulokseen.

Jäljitelmä nykyisestä itsepalvelukassasta
Suunnittelemani uusi itsepalvelukassa
Mockup, Kesko itsepalvelukassa

Tuotteiden skannaus -vaiheen muutokset ja niiden tarkoitukset

Aloitin suunnitteluprosessin tuotteiden skannaus -vaiheesta. Jos vertaa nykyiseen itsepalvelukassaan, uudessa tuotteiden skannaus -vaiheessa selkein ero on kuitin muuttuneessa sijainnissa ja lisötyissä napeissa. Päätin vaihtaa kuitin paikan oikealle ja ohjeistukset vasemmalle, koska ihmissilmä lukee vasemmalta oikealle. Vasta ennen maksuvaihetta tarkistetaan kuitti ja lopullinen hinta. Tämän takia sijoitin "maksamaan"-napin kuitin alapuolelle, ja korostin sitä kirkkaalla oranssilla tuomaan hierarkiaa nappien välille.

Lisäsin usein käytetyille toiminnoille eli pullonpalautukselle ja alennustarralle omat nappinsa. Nämä napit kuuluvat samaan kategoriaan ja ovat tällöin saman värisiä ja kokoisia myyjäkutsun kanssa, minkä takia lisäsin ikonit erottamaan ne toisistaan. Näiden usein käytettyjen nappien alapuolelle sijoitin kassien lisäys -napit, joissa on "+"-merkki ilmaisemaan kassin lisäystä.

Lisäsin K-plussan logon muistuttamaan käyttäjää näyttämään kanta-asiakaskorttinsa. Kun kanta-asiakaskortti on luettu, tämän logon tilalle tulee selkeä ilmoitus onnistuneesta kortin lukemisesta. Lisäsin myös nykyisestä itsepalvelukassasta puuttuvan toiminnon ostosten kumoamisen ja poistin kielivalinta-napeista valitun kielen, joka on turhaan näkyvissä nykyisessä itsepalvelukassassa.

Jäljitelmä nykyisestä itsepalvelukassasta
Suunnittelemani uusi itsepalvelukassa
Mockup, Kesko itsepalvelukassa

Aloitus-vaiheen muutokset ja niiden tarkoitukset

Olin aloittanut suunnittelun tuotteiden skannaus -vaiheesta, jonka valmista suunnitelmaa käytin pohjana seuraavien vaiheiden suunnittelussa. Eniten visuaalista eroa muihin vaiheisiin on aloitus-vaiheessa, koska päätin keskittää elementit ja unohtaa isot logot, joka selkeyttää kokonaisuutta ja korostaa aloitusnappia.

Nykyisen itsepalvelukassan aloitusvaiheessa on pitkä teksti ohjeistamaan kassan käyttöä. Käyttäjä haluaa toimia mahdollisimman nopeasti ja sujuvasti, eikä tällöin lue ohjeistusta vaan aloittaa kassan käytön suoraan. Poistin pitkän tekstiohjeistuksen omasta suunnitelmastani, mutta jätin kuitenkin tiedon kameravalvonnasta, jonka viereen lisäsin kameran ikonin. Näin käyttäjä tietää ilman lukemistakin, mistä teksti kertoo. Kutsu myyjä -napin sijoitin vasempaan alakulmaan, missä se korostuu hyvin tummaa taustaa vasten. Oikeaan alakulmaan jäi kielivalinta, josta olin poistanut valitun kielen.

Jäljitelmä nykyisestä itsepalvelukassasta
Suunnittelemani uusi itsepalvelukassa
Mockup, Kesko itsepalvelukassa

Kanta-asiakaskortin lukuvaiheen muutokset ja niiden tarkoitukset

Nykyisessä itsepalvelukassassa kasseja pystyy lisätä vain skannaus-vaiheessa. Jos kassi skannataan maksu- tai kanta-asiakaskortin lukuvaiheessa, järjestelmä hälyttää myyjän paikalle. Siksi päätin lisätä kassien lisäys -napit skannausvaiheen lisäksi myös näihin vaiheisiin.

Kanta-asiakaskortin lukuvaiheeseen lisäsin K-plussan logon muistuttamaan käyttäjää lukemaan Plussa-korttinsa. Kun Plussa-kortti on luettu, näytölle tulee selkeä ilmoitus onnistuneesta tapahtumasta. Kun käyttäjä ei halua lukea Plussa-korttia, hän painaa keskellä olevaa "Minulla ei ole Plussa-korttia" -nappia. Kun napista on painettu, näytölle ilmestyy ilmoitus, ettei käyttäjällä ole Plussa-korttia.

Kanta-asiakaskortin lukuvaiheessa kutsu myyjä -nappi on siirtynyt takaisin vasempaan alakulmaan, jonka päälle sijoitin takaisin-napin. Nämä napit erotin toisistaan väreillä, koska ne ovat lähekkäin toisiaan, vaikka ne eivät kuulu samaan kategoriaan. Enemmän kontrastia on kutsu myyjä -napilla, koska käyttäjä haluaa painaa sitä todennäköisemmin kuin takaisin-nappia.

Suunnittelemani itsepalvelukassan kaikki vaiheet
Mockup, Kesko itsepalvelukassa
Mockup, Kesko itsepalvelukassa
Mockup, Kesko itsepalvelukassa
Mockup, Kesko itsepalvelukassa
Mockup, Kesko itsepalvelukassa
Mockup, Kesko itsepalvelukassa

Käytettävyystestaus

Testasin valmiin suunnitelmani neljällä henkilöllä. Testihenkilöt saivat tehtäväkseen suorittaa itsepalvelukassa aloituksesta lopetukseen ohjeitani seuraten, kuten he tekisivät normaalisti kaupan itsepalvelukassalla. Tuli ilmi muutama muokkausta vaativa asia, kuten aloitusnappia täytyi suurentaa sekä joidenkin nappien järjestystä ja call-to-actionia täytyi muuttaa.

Lopputuloksen tiivistelmä

Uuteen itsepalvelukassaan lisäsin vanhasta itsepalvelukassasta puuttuvat toiminnot sekä selkeytin ulkoasua, jotta käyttäjä tietää ilman kassahenkilön apua, miten edetä ja miten suorittaa haluamansa toiminnot. Uusi itsepalvelukassa muistuttaa väreiltään ja tyyliltään vanhaa itsepalvelukassaa, mutta näyttää eloisammalta, ja siitä näkyy selkeästi, mistä kaupasta on kyse.

Suunnittelemani itsepalvelukassa parantaisi käyttäjän käyttökokemusta sekä lisäisi mahdollisesti itsepalvelukassojen käyttöä. Käytön lisääntyminen vähentäisi mahdollisesti kassaosaston ruuhkia ja kassahenkilöstön tarvetta.

Projektissa käytetyt logot ovat Keskon omasta aineistopankista. Olen saanut projektin julkaisuun luvan Keskon viestinnältä.