Ang pagdidisenyo ng Kin Wallet User Interface

Mga Kinakailangan sa Proyekto

Ang aming proseso ng disenyo ay nagsisimula sa pamamagitan ng pagtukoy ng mga kinakailangan ng produkto. Sa kasong ito, ang aming produkto ay kailangang ipakilala ang mga gumagamit ng Kik sa proseso ng pagkamit at paggasta sa Kin. Nangangahulugan ito na maglalagay kami ng mga gumagamit sa isang bagong karanasan sa loob ng Kik.

Sa nakaraang pag-ulit ng produktong ito (ang bersyon na magagamit para sa mga gumagamit na lumahok sa kaganapan ng pamamahagi ng token), napagpasyahan na ang pitaka ay magkakaroon ng hitsura at pakiramdam ng tatak ng Kin.

Nangangahulugan ito na ang mga bagong gumagamit ng Kik na tumitingin sa produktong ito ay makakaranas ng parehong mga bagong tampok at isang bagong hitsura at pakiramdam na ibang-iba sa kung ano ang ginagamit nila mula sa Kik hanggang ngayon.

Para sa kadahilanang ito, napagtanto namin nang maaga na ito ay mahalaga na panatilihin ang bersyon na ito bilang sandalan hangga't maaari.

Pagpaplano ng mga paglalakbay ng gumagamit ng istraktura ng IA

Nakasakay

Ang mga gumagamit ay ipakilala sa pitaka sa pamamagitan ng bot ng @KikTeam. Pinapayagan kaming mag-tap sa kung ano ang pamilyar sa mga gumagamit ng Kik - pakikipag-chat - upang ipakilala ang bagong karanasan.

Arkitektura ng impormasyon sa Wallet (IA) - sinusuri ang iba't ibang mga istraktura

Tumingin kami sa dalawang posibleng mga istruktura ng IA sa panahon ng dalawang mga iterasyon ng proyektong ito.

  1. Ang isang matatag na hanay ng mga tampok na kasama ang kasaysayan ng mga transaksyon at isang malaking seksyon ng mga paraan upang kumita Kin.
  2. Isang set ng sandalan na kasama lamang ang balanse at kumita / gumastos ng mga pagpipilian.

Ang unang pag-ulit

Sa maagang pag-ulit, nagsimula kami sa pangunahing pahina na ginamit para sa pitsa ng kalahok ng TDE at nagdagdag ng nabigasyon sa menu para sa kita at kasaysayan ng transaksyon. Ang paggastos at balanse ay mananatili sa pangunahing pahina upang mabawasan ang saklaw ng proyekto at bumuo sa tuktok ng kung ano ang magagamit na sa mga gumagamit. Ang istraktura ng menu ay makakatulong sa pag-aayos ng mga matatag na tampok na tampok na binalak para sa bersyon na ito sa magkahiwalay na mga lugar upang makatulong sa wayfinding at mabawasan ang pag-load ng cognitive.

Para sa dalawang bagong pahina (kasaysayan ng kita at transaksyon), tiningnan namin ang dalawang maginoo na pattern ng disenyo:

  1. Isang timeline para sa kasaysayan ng transaksyon: Ang pattern na ito ay magbibigay-daan sa amin upang maipakita ang impormasyon nang sunud-sunod, na naaangkop sa layunin ng pahinang ito - na nagpapakita ng papasok at palabas na mga transaksyon sa Kin sa paglipas ng panahon. Ito ay isang pangkaraniwan para sa mga apps sa pagbabangko.
  2. Mga kard ng nilalaman para sa pagkamit: Ang pattern na ito ay ginagamit na karaniwang sa pagkonsumo ng nilalaman at mga produkto ng e-commerce, na umaangkop sa puwang na Kin ay gumana sa.

Nag-explore din kami gamit ang mga layout ng listahan at malalaking kard:

Ang pagdidisenyo ng bersyon na ito, pinalawak namin ang UI kit para sa tatak ng Kin, at mag-eksperimento kami sa mga bagong estilo at pattern ng UI.

Ang pangalawang pag-ulit

Ang paglipat sa pangalawang pag-ulit ng proyektong ito (IPLv2), nagsimula kami sa isang mas maliit na hanay ng mga tampok. Naghanap kami ng isang simpleng solusyon sa disenyo na ilantad ang mga gumagamit ng Kik sa isang bagong karanasan sa isang malinaw na paraan at madaling ipatupad.

Ang bersyon na ito ng pitaka ay magiging simple, na may isang pahina lamang at layout, na may header, at may mga tab upang magkakaiba sa pagitan ng dalawang uri ng impormasyon:

  1. Ang balanse ng Kin at impormasyon ng gumagamit.
  2. Ang dalawang panig na handog sa ekonomiya - mga pagkakataon upang kumita at gumastos.

Ang paggamit ng istraktura na ito ay nagpapahintulot sa amin na lumikha ng dalawang antas ng hierarchy.

Ang asul na header ay iguguhit ang pansin ng mga gumagamit sa kanilang Kin balanse, na may kanilang pangalan at larawan na mailabas bilang katiyakan na ito ang kanilang account.

Ang lugar ng mga tab ay maaaring mai-scroll na may isang sticky header, upang ilipat ang pokus mula sa balanse sa ekonomiya. Ipinapalagay namin na kapag ang mga gumagamit ay lumipat ng kanilang pansin mula sa kanilang balanse sa mga tab na ito, hindi na nila kailangan ang impormasyon ng balanse. Gayunpaman, ang paglipat sa pagitan ng dalawang mga tab ay dapat palaging magagamit, dahil binibigyan namin ang parehong mga tab ng parehong antas ng hierarchy.

Disenyo ng UI

Tumingin at Pakiramdam

Ang estilo ng UI ng pitaka ay batay sa gabay sa istilo ng tatak ng Kin. Nilalayon naming lumikha ng isang hitsura at pakiramdam na kapwa mapagkakatiwalaan at palakaibigan sa pamamagitan ng paggamit ng mga asul na tono, linya ng linya at mga guhit ng minimal na linya, tinukoy ang agham at teknolohiya.

Mula sa gabay sa estilo ng Kin: Ang paglalarawan ng bayani at lugar, gumagamit ng logo, kulay at palalimbaganWallet UI

Mga animation at mga paglilipat ng screen

Gumamit kami ng dalawang uri ng animation

  1. Mga transisyon na magbibigay ng puna sa mga aksyon ng gumagamit at lumikha ng mga inaasahan sa darating.
  2. Ang paggawa ng mga error at system glitches friendly, alinsunod sa aming layunin upang lumikha ng isang mapagkakatiwalaan at palakaibigan na pakiramdam.

Mga Paglilipat

Matapos sumang-ayon ang mga gumagamit sa mga term na aabutin ng ilang segundo upang mai-set up ang pitaka. Nangangahulugan ito na kailangan naming lumikha ng isang estado ng paglo-load ng ilang uri. Napagpasyahan naming gamitin ang pagkakataong ito upang bigyang-diin ang mga ideya sa likod ng Kin - desentralisasyon at pamayanan.

Sa pamamagitan ng paggamit ng mga elemento mula sa logo (spheres na gawa sa mga bilog na hugis), lumikha kami ng isang talinghaga para sa mga indibidwal na gumagalaw sa kanilang sariling bilis at direksyon ngunit magkakasabay pa rin.

Pakikipag-ugnayan sa Micro

Sinubukan naming panatilihing minimum ang mga micro-interaksyon at gagamitin lamang ito bilang isang puna para sa mga aksyon ng gumagamit.

Mga kaso

Ang mga kaso ng edge at mga error sa estado ay hindi isang mahusay na karanasan, gayunpaman kailangan din namin na account para sa mga ito sa disenyo din. Sinubukan namin upang makahanap ng isang paraan upang magmukhang mas magiliw ang estado ng error.

Anong susunod

Pagkuha ng feedback ng gumagamit!

Habang nagtatrabaho sa proyektong ito mayroon kaming maraming mga katanungan sa kakayahang magamit, ang tamang layout para sa aming mga gumagamit, at pangkalahatang mga tugon sa isang bagong hitsura at pakiramdam sa loob ng Kik.
Kasalukuyan kaming nasa proseso ng pag-set up ng mga workshop ng gumagamit, paggawa ng pagsubok sa kakayahang magamit at pagkuha ng data para sa bersyon na ito sa sandaling ilulunsad ito.