Dizajn korisničkog sučelja Kin novčanika

Zahtjevi projekta

Naš proces dizajniranja započinje određivanjem zahtjeva proizvoda. U ovom slučaju naš proizvod mora Kik korisnike upoznati s procesom zarade i trošenja Kina. To znači da ćemo biti uključeni u korisnike u potpuno novom iskustvu unutar Kik-a.

Tijekom prethodne iteracije ovog proizvoda (verzija je bila dostupna korisnicima koji su sudjelovali u događaju distribucije tokena) odlučeno je da će novčanik imati izgled Kin marke.

To znači da će novi korisnici Kik-a koji gledaju ovaj proizvod doživjeti i nove značajke i novi izgled i dojam koji se vrlo razlikuju od dosad naviknutih na Kik.

Iz tog smo razloga rano shvatili da će biti važno da ova verzija ostane što ležernija.

Planiranje strukture korisničkih putovanja putovanja korisnika

Ukrcavanje

Korisnici će se putem novčanika upoznati putem bota @KikTeam. To nam omogućava da iskoristimo ono što korisnici Kik-a upoznaju - razgovaraju - kako bi predstavili ovo novo iskustvo.

Informacijska arhitektura novčanika (IA) - ispitivanje različitih struktura

Tijekom dvije iteracije ovog projekta razmatrali smo dvije moguće procjene utjecaja.

  1. Robustan skup značajki koje uključuje povijest transakcija i veliki dio načina zarade.
  2. Ležerniji skup koji uključuje samo opcije ravnoteže i zarade / potrošnje.

Prva iteracija

Tijekom rane iteracije započeli smo s glavnom stranicom koja je korištena za novčanik učesnika TDE-a i dodali navigaciju izbornikom za zaradu i povijest transakcija. Potrošnja i ravnoteža ostat će na glavnoj stranici kako bi se smanjio opseg projekta i nadogradilo ono što je korisnicima već bilo na raspolaganju. Struktura izbornika pomoći će u grupiranju robusnih skupova značajki planiranih za ovu verziju u zasebna područja kako bi se olakšalo pronalaženje putova i smanjilo kognitivno opterećenje.

Za dvije nove stranice (zarada i povijest transakcija) razmotrili smo dva uobičajena dizajna:

  1. Vremenska crta za povijest transakcija: Ovaj obrazac omogućit će nam da prezentiramo informacije kronološkim redoslijedom, što odgovara svrsi ove stranice - prikazivanje ulaznih i odlaznih Kin transakcija tijekom vremena. Ovo je uobičajeno za bankarske aplikacije.
  2. Sadržajne kartice za zaradu: ovaj se obrazac uobičajeno koristi u proizvodima potrošnje sadržaja i e-trgovine, a uklapa se s prostorom u kojem će Kin djelovati.

Istražili smo i pomoću rasporeda popisa i velikih kartica:

Dizajnirajući ovu verziju, proširili smo UI komplet za marke Kin i morali smo eksperimentirati s novim stilovima i UI obrascima.

Druga iteracija

Prelazeći na drugu iteraciju ovog projekta (IPLv2) započeli smo s manjim nizom značajki. Tražili smo jednostavno dizajnersko rješenje koje će Kik korisnike izložiti novom iskustvu na jasan način i lako će se implementirati.

Ova verzija novčanika bit će jednostavna, sa samo jednom stranicom i izgledom, zaglavljem i karticama kako bi se razlikovale dvije vrste podataka:

  1. Rodni bilans i informacije o korisniku.
  2. Dvostrana ponuda ekonomije - mogućnosti zarade i potrošnje.

Korištenje ove strukture omogućilo nam je stvaranje dvije razine hijerarhije.

Plavo zaglavlje skrenulo bi pozornost korisnika na njihov Kin balans, s njihovim imenom i fotografijom kao uvjeravanjem da je to njihov račun.

Područje kartica može se pomicati ljepljivim zaglavljem kako bi se fokus prebacio iz ravnoteže u ekonomiju. Pretpostavili smo da jednom kada korisnici preusmjere pažnju sa svoje ravnoteže na ove kartice, više im nisu potrebne informacije o bilanci. No, prebacivanje između dvaju kartica uvijek mora biti dostupno jer obje kartice dajemo istu razinu hijerarhije.

Dizajn korisničkog sučelja

Pogledajte i osjetite

UI stil novčanika temelji se na vodiču za stil marke Kin. Naš je cilj stvoriti izgled i osjećaj koji je i pouzdan i prijateljski koristeći plave tonove, ikone linija i minimalne crtežne ilustracije, referirajući znanost i tehnologiju.

Iz vodiča za Kin stil: Ilustracija heroja i spota, upotreba logotipa, boja i tipografijaKorisničko sučelje novčanika

Animacije i prijelazi na zaslonu

Koristili smo dvije vrste animacija

  1. Prijelazi koji će dati povratne informacije o radnjama korisnika i stvoriti očekivanja o tome što slijedi.
  2. Stvaranje prijateljskih grešaka i problema u skladu s našim ciljem stvaranja pouzdanog i prijateljskog osjećaja.

prijelazi

Nakon što se korisnici slože s uvjetima, potrebno je nekoliko sekundi da postave lisnicu. To znači da smo morali stvoriti neku vrstu učitavanja. Odlučili smo iskoristiti ovu priliku kako bismo istakli ideje koje stoje iza Kina - decentralizaciju i zajednicu.

Upotrebom elemenata iz logotipa (sfere izrađene od okruglih oblika) stvorili smo metaforu za pojedince koji se kreću u svom tempu i smjeru, ali se još uvijek zbližavaju.

Mikro interakcije

Mi smo pokušali svesti mikro-interakcije na minimum i upotrijebiti ih samo kao povratne informacije za korisničke radnje.

Slučajevi ivica

Slučajevi ivica i stanja pogrešaka nisu sjajno iskustvo, ali moramo ih uzeti u obzir i u dizajnu. Pokušali smo pronaći način da stanje pogreške izgleda prijateljskije.

Što je sljedeće

Dobivanje povratnih informacija korisnika!

Tijekom rada na ovom projektu imali smo puno pitanja o upotrebljivosti, pravilnom izgledu za naše korisnike i općenitim odgovorima na novi izgled i osjećaj unutar Kik-a.
Trenutno smo u procesu postavljanja korisničkih radionica, vršimo testiranje upotrebljivosti i dobivanje podataka za ovu verziju čim se pokrene.