Designe Kin Wallet brukergrensesnitt

Prosjektkrav

Designprosessen vår starter med å bestemme produktkrav. I dette tilfellet må produktet vårt introdusere Kik-brukere til prosessen med å tjene og bruke Kin. Dette betyr at vi vil ombord brukere til en helt ny opplevelse i Kik.

Under den forrige iterasjonen av dette produktet (versjonen gjort tilgjengelig for brukere som deltok i token-distribusjonshendelsen), ble det bestemt at lommeboken skal få Kin-merket utseende og preg.

Dette betyr at nye Kik-brukere som ser på dette produktet, vil oppleve både nye funksjoner og et nytt utseende og følelse som er veldig forskjellig fra hva de er vant til fra Kik så langt.

Av denne grunn innså vi tidlig at det vil være viktig å holde denne versjonen så mager som mulig.

Planlegger brukerreiser IA-struktur

onboarding

Brukere blir introdusert for lommeboken gjennom @KikTeam-bot. Dette gjør at vi kan benytte oss av hva Kik-brukere er kjent med - å chatte - for å introdusere denne nye opplevelsen.

Lommebokinformasjonsarkitektur (IA) - undersøke forskjellige strukturer

Vi har sett på to mulige IA-strukturer i løpet av to iterasjoner av dette prosjektet.

  1. Et robust sett med funksjoner som inkluderer transaksjonshistorikk og en stor del av måtene å tjene Kin på.
  2. Et slankere sett som kun inkluderer alternativer for balanse og tjene / bruke.

Den første iterasjonen

Under den tidlige iterasjonen startet vi med hovedsiden som ble brukt til en TDE-deltakers lommebok og la til menynavigering for inntjening og transaksjonshistorikk. Utgifter og balanse vil forbli på hovedsiden for å minimere omfanget av prosjektet og bygge på toppen av det som allerede var tilgjengelig for brukerne. Menystrukturen vil hjelpe til med å gruppere de robuste funksjonsettene som er planlagt for denne versjonen i separate områder for å hjelpe med å finne og finne kognitiv belastning.

For de to nye sidene (inntjenings- og transaksjonshistorikk) har vi sett på to konvensjonelle designmønstre:

  1. En tidslinje for transaksjonshistorikk: Dette mønsteret vil tillate oss å presentere informasjon i kronologisk rekkefølge, som passer til formålet med denne siden - som viser innkommende og utgående Kin-transaksjoner over tid. Dette er vanlig for bankapper.
  2. Innholdskort for å tjene: Dette mønsteret brukes ofte i innholdskonsum og e-handelsprodukter, som passer med det stedet Kin vil operere i.

Vi utforsket ved hjelp av listelayouts og store kort:

Ved å utforme denne versjonen, har vi utvidet UI-settet for Kin-merket, og vi fikk eksperimentere med nye stiler og UI-mønstre.

Den andre iterasjonen

Når vi gikk over til den andre iterasjonen av dette prosjektet (IPLv2), startet vi med et mindre sett med funksjoner. Vi så etter en enkel designløsning som ville utsette Kik-brukere for en ny opplevelse på en tydelig måte og ville være enkel å implementere.

Denne versjonen av lommeboken vil være enkel, med bare en side og layout, med en overskrift og med faner for å skille mellom to typer informasjon:

  1. Kinebalanse og brukerinformasjon.
  2. Tosidig økonomitilbud - muligheter til å tjene og bruke.

Ved å bruke denne strukturen tillot vi oss å lage to nivåer av hierarki.

Den blå overskriften vil trekke brukernes oppmerksomhet til Kin-balansen deres, med navn og fototoserve som forsikring om at dette er deres konto.

Fanene er rullbar med en klebrig overskrift for å skifte fokus fra balanse til økonomi. Vi antok at når brukere først har skiftet oppmerksomhet fra balansen til disse fanene, trenger de ikke lenger balanseinformasjonen. Bytte mellom de to fanene skal imidlertid alltid være tilgjengelig, siden vi gir begge kategoriene samme nivå av hierarki.

UI-design

Se og føle

UI-stilen til lommeboken er basert på Kin-merkestilguiden. Vi tar sikte på å skape et utseende og er både pålitelig og vennlig ved å bruke blå toner, linjeikoner og minimale linjeillustrasjoner, med referanse til vitenskap og teknologi.

Fra Kin stil guide: Hero & spot illustrasjon, logo bruker, farger og typografiLommebok-brukergrensesnitt

Animasjoner og skjermoverganger

Vi brukte to typer animasjon

  1. Overganger som gir tilbakemeldinger om brukerhandlinger og skaper forventninger til hva som kommer.
  2. Å gjøre feil og systemfeil vennlig, i tråd med vårt mål å skape et pålitelig og vennlig preg.

overganger

Etter at brukere samtykker til vilkårene tar det noen sekunder å sette opp lommeboken. Dette betyr at vi måtte opprette en lastetilstand av noe slag. Vi bestemte oss for å bruke denne muligheten til å understreke ideene bak Kin - desentralisering og fellesskap.

Ved å bruke elementer fra logoen (kuler laget av runde former), skapte vi en metafor for enkeltpersoner som beveger seg i sitt eget tempo og retning, men som likevel kommer sammen.

Mikrointeraksjoner

Vi prøvde å holde mikrointeraksjoner til et minimum og bare bruke dem som en tilbakemelding for brukerhandlinger.

Kantsaker

Kanttilfeller og feiltilstander er ikke en flott opplevelse, men vi må også redegjøre for dem i designen også. Vi prøvde å finne en måte å få en feiltilstand til å se mer vennlig ut.

Hva blir det neste

Få tilbakemeldinger fra brukerne!

Mens vi jobbet med dette prosjektet, hadde vi mange spørsmål om brukervennlighet, riktig layout for brukerne våre, og generelle svar på et nytt utseende og inntrykk i Kik.
Vi er for tiden i gang med å sette opp brukerverksteder, utføre tester av brukervennlighet og skaffe data for denne versjonen når den skal lanseres.