Kin Wallet -käyttöliittymän suunnittelu

Projektivaatimukset

Suunnitteluprosessimme alkaa määrittelemällä tuotevaatimukset. Tässä tapauksessa tuotteemme on johdettava Kikin käyttäjiä Kin ansainta- ja kulutusprosessiin. Tämä tarkoittaa, että otamme käyttäjät käyttöön täysin uudessa kokemuksessa Kikin sisällä.

Tämän tuotteen edellisen iteraation aikana (versio, joka on saatu käyttämään merkkijakelutapahtumaan osallistuneille käyttäjille) päätettiin, että lompakolla on Kin-tuotemerkin ulkoasu ja tunnelma.

Tämä tarkoittaa, että uudet Kik-käyttäjät, jotka katsovat tätä tuotetta, kokevat sekä uusia ominaisuuksia että uuden ilmeen ja tunteen, joka on hyvin erilainen kuin mitä he ovat tottuneet Kikiin tähän mennessä.

Tästä syystä ymmärsimme jo varhain, että on tärkeää pitää tämä versio mahdollisimman vähäisenä.

Käyttäjämatkojen suunnittelu IA-rakenne

perehdytyksessä

Käyttäjät esitellään lompakkoon @KikTeam-botin kautta. Tämän avulla voimme tutkia mitä Kikin käyttäjät tuntevat - keskustella - esitelläksemme tämän uuden kokemuksen.

Lompakotietoarkkitehtuuri (IA) - tutkitaan erilaisia ​​rakenteita

Tarkastelimme kahta mahdollista IA-rakennetta projektin kahden toiston aikana.

  1. Vahva ominaisuusjoukko, joka sisältää tapahtumahistorian ja suuren osan tavoista ansaita Kin.
  2. Kevyempi sarja, joka sisältää vain saldo- ja ansainta- / kulutusvaihtoehdot.

Ensimmäinen iteraatio

Varhaisen iteraation aikana aloitimme pääsivulla, jota käytettiin TDE-osallistujan lompakkoon, ja lisäsimme valikon selauspalkkiot ansainta- ja tapahtumahistoriaan. Menot ja tasapaino säilyisivät pääsivulla hankkeen laajuuden minimoimiseksi ja käyttäjien jo olemassa olevan tiedon päälle rakentamiseksi. Valikkorakenne auttaisi ryhmittelemään tähän versioon suunnitellut vankat ominaisuusjoukot erillisiksi alueiksi auttamaan suuntaamiseen ja vähentämään kognitiivista kuormitusta.

Kahdelle uudelle sivulle (ansainta- ja tapahtumahistoria) tutkittiin kahta tavanomaista suunnittelumallia:

  1. Tapahtumahistorian aikajana: Tämän kaavion avulla voimme esittää tiedot aikajärjestyksessä, joka sopii tämän sivun tarkoitukseen - näyttää saapuvat ja lähtevät Kin-transaktiot ajan myötä. Tämä on yleinen pankkisovelluksissa.
  2. Ansaitsevat sisältökortit: Tätä mallia käytetään yleisesti sisällönkulutuksessa ja verkkokaupan tuotteissa, mikä sopii siihen tilaan, jossa Kin toimii.

Tutkimme myös luetteloasetteluita ja suuria kortteja:

Suunnitellessamme tätä versiota, olemme laajentaneet Kin-brändin käyttöliittymäpakettia ja joutuneet kokeilemaan uusia tyylejä ja käyttöliittymämalleja.

Toinen iterointi

Siirtyessämme tämän projektin toiseen toistoon (IPLv2) aloitimme pienemmällä ominaisuusjoukolla. Etsimme yksinkertaista suunnitteluratkaisua, joka paljastaisi Kikin käyttäjät selvästi uudella kokemuksella ja olisi helppo toteuttaa.

Tämä lompakon versio on yksinkertainen, sillä siinä on vain yksi sivu ja asettelu, otsikko ja välilehdet erottaakseen kahden tyyppiset tiedot:

  1. Sukulaisten tasapaino ja käyttäjätiedot.
  2. Kaksipuolinen talouden tarjonta - mahdollisuudet ansaita ja käyttää.

Tämän rakenteen avulla voimme luoda kaksi hierarkian tasoa.

Sininen otsikko kiinnittäisi käyttäjien huomion omaisuuteensa, ja heidän nimensä ja valokuvansa vakuuttavat, että tämä on heidän tilinsä.

Välilehtiä voidaan vierittää tarttuvalla otsikolla keskittymisen siirtämiseksi tasapainosta talouteen. Oletetaan, että kun käyttäjät siirtävät huomionsa tasapainosta näihin välilehtiin, he eivät enää tarvitse saldotietoja. Vaihtamisen kahden välilehden välillä tulisi kuitenkin olla aina käytettävissä, koska annamme molemmille välilehdille saman hierarkian tason.

UI-suunnittelu

Katso ja tunne

Lompakon UI-tyyli perustuu Kin-brändin tyylioppaaseen. Pyrimme luomaan luotettavan ja ystävällisen ilmeen käyttämällä sinisiä sävyjä, viivakuvakkeita ja minimaalisia viivakuvia, viitaten tieteeseen ja tekniikkaan.

Kin-tyylioppaasta: sankari- ja pistekuvia, logon käyttö, värit ja typografiaWallet UI

Animaatiot ja näyttösiirtymät

Käytimme kahta animaatiotyyppiä

  1. Siirtymät, jotka antavat palautetta käyttäjän toimista ja luovat odotuksia tulevasta.
  2. Virheiden ja järjestelmän häiriöiden tekeminen ystävällisiksi tavoitteemme mukaisesti luoda luotettava ja ystävällinen tunnelma.

siirtymät

Kun käyttäjät ovat hyväksyneet ehdot, lompakon asettaminen kestää muutaman sekunnin. Tämä tarkoittaa, että meidän oli luotava jonkinlainen lastaustila. Päätimme käyttää tätä tilaisuutta korostaaksemme Kinin ideoita - hajauttamista ja yhteisöä.

Käyttämällä logon elementtejä (pyöreät muodot tehdyt pallot) loimme metaforin yksilöille, jotka liikkuvat omassa tahdissaan ja suuntaansa, mutta yhä kokoonpanossa.

Mikrovuorovaikutukset

Yritimme pitää mikrovuorovaikutukset minimissä ja käyttää niitä vain palautteena käyttäjän toimiin.

Reunalaukut

Reunatapaukset ja virhetilat eivät ole hieno kokemus, mutta meidän on huomioitava ne myös suunnittelussa. Yritimme löytää tavan saada virhetila näyttämään ystävällisemmältä.

Mitä seuraavaksi

Palautteen saaminen käyttäjältä!

Projektin parissa työskennellessään meillä oli paljon kysymyksiä käytettävyydestä, oikeasta ulkoasusta käyttäjillemme ja yleisistä vastauksista uuteen ulkoasuun ja tunteeseen Kikin sisällä.
Olemme parhaillaan perustamassa käyttäjätyöpajoja, tekemässä käytettävyystestejä ja hakemassa tietoja tästä versiosta heti, kun se käynnistyy.