„Kin Wallet“ vartotojo sąsajos projektavimas

Projekto reikalavimai

Mūsų projektavimo procesas prasideda nustatant produkto reikalavimus. Tokiu atveju mūsų produktas turi supažindinti Kik vartotojus su Kin uždirbimo ir išlaidų procesu. Tai reiškia, kad įtrauksime vartotojus į visiškai naują patirtį „Kik“.

Ankstesnio šio produkto kartojimo (versijos, prieinamos vartotojams, dalyvavusiems žetonų platinimo renginyje) metu, buvo nuspręsta, kad piniginė turės Kin prekės ženklo išvaizdą.

Tai reiškia, kad nauji „Kik“ vartotojai, žiūrintys šį produktą, patirs ir naujų funkcijų, ir naują išvaizdą bei pojūtį, kuris labai skiriasi nuo to, kuo jie įpratę nuo „Kik“ iki šiol.

Dėl šios priežasties anksti supratome, kad bus svarbu išlaikyti šią versiją kuo lieknesnę.

Vartotojo kelionių planavimas IA struktūra

Bortas

Vartotojai bus supažindinti su pinigine per „@KikTeam“ robotą. Tai leidžia mums pažinti tai, kas „Kik“ vartotojams pažįstama - bendrauti - ir pristatyti šią naują patirtį.

Piniginės informacijos architektūra (IA) - skirtingų struktūrų tyrimas

Per dvi šio projekto iteracijas mes ištyrėme dvi galimas IA struktūras.

  1. Tvirtas funkcijų rinkinys, apimantis operacijų istoriją ir didelis būdai, kaip uždirbti Kin.
  2. Lengvesnis rinkinys, apimantis tik balanso ir uždarbio / išlaidų parinktis.

Pirmoji iteracija

Ankstyvos iteracijos metu mes pradėjome nuo pagrindinio puslapio, kuris buvo naudojamas TDE dalyvio piniginei, ir pridėjome meniu naršymą uždarbiui ir operacijų istorijai. Išlaidos ir likutis liktų pagrindiniame puslapyje, kad būtų sumažinta projekto apimtis ir pasinaudota tuo, kas vartotojams jau buvo prieinama. Meniu struktūra padėtų sugrupuoti tvirtus šios versijos funkcijų rinkinius į atskiras sritis, kad būtų lengviau surasti kelią ir sumažinti pažintinę apkrovą.

Dviejuose naujuose puslapiuose (uždarbio ir operacijų istorijoje) nagrinėjome du įprastus dizaino modelius:

  1. Operacijų istorijos tvarkaraštis: Šis modelis leis mums pateikti informaciją chronologine tvarka, kuri atitinka šio puslapio tikslą - rodyti gaunamus ir išeinančius Kin sandorius per tam tikrą laiką. Tai yra įprasta bankinėms programoms.
  2. Turinio kortelės, skirtos uždirbti: Šis modelis dažniausiai naudojamas turinio vartojimui ir el. Prekybos produktams, tinkamas erdvei, kurioje veiks Kin.

Mes taip pat tyrėme naudodamiesi sąrašų išdėstymais ir didelėmis kortelėmis:

Kurdami šią versiją, išplėtėme Kin prekės ženklo vartotojo sąsajos rinkinį ir turėjome eksperimentuoti su naujais stiliais ir vartotojo sąsajos modeliais.

Antrasis kartojimas

Pereidami prie antrosios šio projekto pakartojimo (IPLv2), pradėjome nuo mažesnio funkcijų rinkinio. Ieškojome paprasto dizaino sprendimo, kuris aiškiai „Kik“ vartotojams suteiktų naujos patirties ir būtų lengvai įgyvendinamas.

Ši piniginės versija bus paprasta, joje bus tik vienas puslapis ir išdėstymas, antraštė ir skirtukai, skirti atskirti dviejų rūšių informaciją:

  1. Giminių pusiausvyra ir informacija apie vartotoją.
  2. Dvipusis ekonomikos pasiūlymas - galimybės užsidirbti ir išleisti.

Šios struktūros naudojimas leido mums sukurti du hierarchijos lygius.

Mėlyna antraštė atkreiptų vartotojų dėmesį į jų giminaičių likutį, o jų vardas ir nuotrauka patikėtų, kad tai jų sąskaita.

Skirtukų sritis galima slinkti lipnia antrašte, kad būtų galima nukreipti dėmesį nuo balanso į ekonomiką. Manėme, kad vartotojams perkėlus dėmesį nuo pusiausvyros į šiuos skirtukus, jiems nebereikia informacijos apie balansą. Tačiau perjungimas tarp dviejų skirtukų visada turėtų būti prieinamas, nes abiem skirtukams suteikiame tą patį hierarchijos lygį.

UI dizainas

Pažiūrėk ir pajusk

Piniginės UI stilius pagrįstas Kin prekės ženklo stiliaus vadovu. Mes siekiame sukurti patikimą ir draugišką vaizdą naudodami mėlynus tonus, linijų piktogramas ir minimalias linijų iliustracijas, remdamiesi mokslu ir technologijomis.

Iš Kin stiliaus vadovo: herojaus ir dėmėsio iliustracija, logotipo panaudojimas, spalvos ir tipografijaPiniginės vartotojo sąsaja

Animacijos ir ekrano perėjimai

Mes panaudojome dviejų tipų animaciją

  1. Perėjimai, kurie suteiks grįžtamąjį ryšį apie vartotojo veiksmus ir sukurs lūkesčius dėl ateities.
  2. Padaryti klaidų ir sistemos trūkumų draugiškas, atsižvelgiant į mūsų tikslą sukurti patikimą ir draugišką jausmą.

Perėjimai

Kai vartotojai sutinka su sąlygomis, piniginės nustatymas užtrunka keletą sekundžių. Tai reiškia, kad mes turėjome sukurti tam tikrą pakrovimo būseną. Mes nusprendėme pasinaudoti šia proga pabrėžti Kin idėjas - decentralizaciją ir bendruomeniškumą.

Naudodamiesi elementais iš logotipo (sferos sudarytos iš apvalių formų), mes sukūrėme metaforą asmenims, judantiems savo tempu ir kryptimi, tačiau vis dar einantiems kartu.

Mikro sąveika

Stengėmės, kad mikro-sąveika būtų kuo mažesnė, ir naudoti ją tik kaip atsiliepimą apie vartotojo veiksmus.

Kraštų dėklai

Kraštų atvejai ir klaidų būsenos nėra puiki patirtis, tačiau ir į juos turime atsižvelgti kurdami dizainą. Bandėme rasti būdą, kaip klaidų būseną padaryti draugiškesnę.

Kas toliau

Gaukite vartotojo atsiliepimus!

Dirbdami prie šio projekto, mes turėjome daug klausimų dėl tinkamumo naudoti, tinkamo išdėstymo vartotojams ir bendrų atsakymų į naują išvaizdą ir pojūtį „Kik“ viduje.
Šiuo metu rengiame vartotojų seminarus, atliekame tinkamumo naudoti testus ir gauname šios versijos duomenis, kai ji bus paleista.