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.

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.

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.

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.

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.

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.

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.

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