Design af Kin Wallet-brugergrænsefladen

Projektkrav

Vores designproces starter med at bestemme produktkrav. I dette tilfælde skal vores produkt introducere Kik-brugere til processen med at tjene og bruge Kin. Dette betyder, at vi ombordstiller brugere til en helt ny oplevelse inden for Kik.

Under den forrige iteration af dette produkt (den version, der blev gjort tilgængelig for brugere, der deltog i token-distribution-begivenheden), blev det besluttet, at tegnebogen får Kin-mærket udseende og fornemmelse.

Dette betyder, at nye Kik-brugere, der ser dette produkt, vil opleve både nye funktioner og et nyt look og fornemmelse, der er meget anderledes end hvad de er vant til fra Kik indtil videre.

Af denne grund indså vi tidligt, at det vil være vigtigt at holde denne version så smal som muligt.

Planlægning af brugerrejser IA-struktur

onboarding

Brugere introduceres til tegnebogen gennem @KikTeam-bot. Dette giver os mulighed for at udnytte det, som Kik-brugere er bekendt med - chatte - for at introducere denne nye oplevelse.

Wallet information architecture (IA) - undersøgelse af forskellige strukturer

Vi undersøgte to mulige IA-strukturer under to iterationer af dette projekt.

  1. Et robust sæt funktioner, der inkluderer transaktionshistorik og et stort afsnit af måder at tjene Kin på.
  2. Et slankere sæt, der kun inkluderer mulighederne for balance og indtjening / forbrug.

Den første iteration

Under den tidlige iteration startede vi med den hovedside, der blev brugt til en TDE-deltagers tegnebog og tilføjet menunavigation til indtjening og transaktionshistorik. Udgifter og balance forbliver på hovedsiden for at minimere omfanget af projektet og bygge oven på det, der allerede var tilgængeligt for brugerne. Menustrukturen vil hjælpe med at gruppere de robuste funktionssæt, der er planlagt til denne version i separate områder for at hjælpe med vejfinding og reducere kognitiv belastning.

For de to nye sider (indtjenings- og transaktionshistorik) undersøgte vi to konventionelle designmønstre:

  1. En tidslinje for transaktionshistorik: Dette mønster tillader os at præsentere information i kronologisk rækkefølge, der passer til formålet med denne side - der viser indgående og udgående Kin-transaktioner over tid. Dette er almindeligt for bankapps.
  2. Indholdskort til at tjene: Dette mønster bruges ofte til indholdsforbrug og e-handelsprodukter, der passer til det rum Kin fungerer i.

Vi udforskede også ved hjælp af listlayouts og store kort:

Ved at designe denne version har vi udvidet UI-kit til Kin-mærket, og vi blev nødt til at eksperimentere med nye stilarter og UI-mønstre.

Den anden iteration

Skiftede til den anden iteration af dette projekt (IPLv2), startede vi med et mindre sæt funktioner. Vi ledte efter en enkel designløsning, der ville udsætte Kik-brugere for en ny oplevelse på en klar måde og være let at implementere.

Denne version af tegnebogen er enkel, med kun en side og layout, med en overskrift og med faner for at skelne mellem to typer information:

  1. Kinebalance og brugerinformation.
  2. Tosidede økonomitilbud - muligheder for at tjene og bruge.

Brug af denne struktur tillader os at oprette to niveauer af hierarki.

Den blå overskrift ville henlede brugernes opmærksomhed på deres Kin-balance, med deres navn og fototoserve som forsikring om, at dette er deres konto.

Fanerområdet kan rulles med en klistret overskrift for at skifte fokus fra balance til økonomi. Vi antog, at når brugere, når brugerne skifter opmærksomhed fra deres balance til disse faner, ikke har brug for balanceoplysningerne. Skift mellem de to faner skal dog altid være tilgængeligt, da vi giver begge faner det samme niveau af hierarki.

UI-design

Look & Feel

UI-stil for tegnebogen er baseret på Kin-mærke-stilguiden. Vi sigter mod at skabe et look og følelse, der er både pålidelig og venlig ved at bruge blå toner, linieikoner og minimale linieillustrationer, der refererer til videnskab og teknologi.

Fra Kin stil guide: Hero & spot illustration, logo bruger, farver og typografiWallet-brugergrænseflade

Animationer og skærmovergange

Vi brugte to typer animationer

  1. Overgange, der giver feedback om brugerhandlinger og skaber forventninger til hvad der skal komme.
  2. At lave fejl og systemfejl er venlige i overensstemmelse med vores mål om at skabe en pålidelig og venlig fornemmelse.

Overgange

Når brugerne er enige om betingelserne, tager det et par sekunder at indstille tegnebogen. Dette betyder, at vi var nødt til at oprette en lastningstilstand af en eller anden art. Vi besluttede at benytte denne lejlighed til at understrege ideerne bag Kin - decentralisering og samfund.

Ved at bruge elementer fra logoet (sfærer lavet af runde former) skabte vi en metafor for enkeltpersoner, der bevæger sig i deres eget tempo og retning, men stadig kommer sammen.

Mikrointeraktioner

Vi forsøgte at minimere mikrointeraktioner til et minimum og bruger dem kun som en feedback til brugerhandlinger.

Kantsager

Kantsager og fejltilstande er ikke en stor oplevelse, men vi er også nødt til at redegøre for dem i designet. Vi forsøgte at finde en måde at få en fejltilstand til at se mere venlig ud.

Hvad er det næste

Få brugerfeedback!

Under arbejdet med dette projekt havde vi en masse spørgsmål om brugervenlighed, det rigtige layout for vores brugere og generelle svar på et nyt udseende og indtryk i Kik.
Vi er i øjeblikket i færd med at etablere brugerworkshops, udføre brugbarhedstest og få data til denne version, når den først er lanceret.