UX & UI suunnittelu verkkokaupalle
Harjoitustyö fiktiiviselle kahvikone yritykselle. Projektissani tein käyttöliittymäsuunnittelun mobiiliversion etusivulta lähtien aina verkko-ostoksen loppuun suorittamiseen asti. Käytin suunnitteluun Figmaa, jotta oppisin käyttämään ohjelmaa. Figma oli helppo omaksua.
Haaste
Rajoittunut näyttötila voi hankaloittaa tuotteiden vertailua ja vaikuttaa käyttäjän ostopäätökseen mobiiliversiossa. Halusin luoda selkeän, yksinkertaisen ja helposti käytettävän käyttöliittymän mobiiliverkkokaupalle.
Rautalankamallin luominen helpotti hahmottamaan pinta-alan käytössä ja pitämään elementit yksinkertaisina. Koska siinä ei käytetä brändin visuaaleja, pysyy huomio yksinkertaisuudessaan elementtien hierarkiassa ja niiden sijoittelussa sekä käyttäjäpolussa.
Prosessi
Seuraavaksi tein moodboardin. Tutkin mitä muut olivat tehneet ja mitä värit, muodot ja asettelut toimivat erityisen hyvin. Mietin myös miten visuaalisesti voisi erottautua kilpailijoista.
Aloin rakentamaan verkkokaupalle väripalettia, käytettäviä fontteja ja muotoja. Opin käyttämään Figmaan rakennettuja plugareita, joilla muun muassa hain valmiita ikoneita Iconifystä ja ilmaisia stokkikuvia Pexelssistä ja Unsplashistä.
Prosessi
Opin luomaan buttoneita, ikoneita ja muita ui komponentteja.
Animoinnit ja prototypointi tuli myös tutuksi. Prototypoinnin avulla pystyy hyvin testaamaan toimivuutta. Kokeilemalla prototypointia itse omalla älypuhelimella huomaa heti onko elementit liian lähekkäin tai onko jokin button liian pieni.
Mitä opin?
Kaiken Figman teknilisen ohjelmisto-osaamisen lisäksi opin, että kaiken ytimessä on käyttäjäymmärrys ja hänen tarpeet. Käyttäjä haluaa tietää missä mennään, missä vaiheessa hän on ostoprosessia. Sekä tärkeää muistaa infota käyttäjää jos jokin ei toimi. Esimerkiksi selkokieliset error viestit. Aiemmat teoreettisen hahmopsykologian opinnot tulivat tässä projektissa käyttöön. Ryhmittämällä, koon ja värien kontrasteilla leikkiminen ja liike luovat mahdollisuuksia suunnitteluun.
Opin mielestäni tekemään tavoitteen mukaisen helposti käytettävän ja visuaalisesti tyylikkään verkkokaupan polun. Aiempi animointitausta auttoi paljon omaksumaan liikemahdollisuuksia käyttöliittymäsuunnittelussa.
