Het ontwerpen van de Kin Wallet-gebruikersinterface

Project vereisten

Ons ontwerpproces begint met het bepalen van productvereisten. In dit geval moet ons product Kik-gebruikers kennis laten maken met het proces van het verdienen en uitgeven van Kin. Dit betekent dat we gebruikers een geheel nieuwe ervaring binnen Kik bieden.

Tijdens de vorige iteratie van dit product (de versie die beschikbaar was voor gebruikers die hebben deelgenomen aan het tokendistributiegebeurtenis), werd besloten dat de portemonnee het Kin-merk eruit zal zien en voelen.

Dit betekent dat nieuwe Kik-gebruikers die dit product bekijken, zowel nieuwe functies als een nieuwe look en feel zullen ervaren die heel anders is dan wat ze tot nu toe van Kik gewend zijn.

Om deze reden realiseerden we ons al vroeg dat het belangrijk is om deze versie zo slank mogelijk te houden.

IA-structuur voor gebruikersreizen plannen

Onboarding

Gebruikers zullen via de @KikTeam-bot kennis maken met de portefeuille. Dit stelt ons in staat om te weten waar Kik-gebruikers bekend mee zijn - chatten - om deze nieuwe ervaring te introduceren.

Wallet Information Architecture (IA) - onderzoek naar verschillende structuren

We hebben twee mogelijke IA-structuren onderzocht tijdens twee iteraties van dit project.

  1. Een krachtige set functies met transactiegeschiedenis en een groot deel van manieren om Kin te verdienen.
  2. Een slankere set met alleen balans- en verdien- / bestedingsopties.

De eerste iteratie

Tijdens de vroege iteratie zijn we begonnen met de hoofdpagina die werd gebruikt voor de portemonnee van een TDE-deelnemer en voegde menunavigatie toe voor inkomsten en transactiegeschiedenis. De uitgaven en het saldo zouden op de hoofdpagina blijven om de reikwijdte van het project te minimaliseren en voort te bouwen op wat al beschikbaar was voor gebruikers. De menustructuur zou helpen bij het groeperen van de krachtige functiesets die voor deze versie zijn gepland in afzonderlijke gebieden om te helpen bij het vinden van de weg en het verminderen van de cognitieve belasting.

Voor de twee nieuwe pagina's (inkomsten- en transactiegeschiedenis) hebben we twee conventionele ontwerppatronen onderzocht:

  1. Een tijdlijn voor transactiegeschiedenis: met dit patroon kunnen we informatie in chronologische volgorde presenteren, die past bij het doel van deze pagina - inkomende en uitgaande Kin-transacties in de loop van de tijd weergeven. Dit is gebruikelijk voor bank-apps.
  2. Inhoudskaarten om te verdienen: dit patroon wordt vaak gebruikt in inhoudconsumptie en e-commerce producten, wat past bij de ruimte waarin Kin zal opereren.

We hebben ook onderzocht met behulp van lijstlay-outs en grote kaarten:

Bij het ontwerpen van deze versie hebben we de UI-kit voor het Kin-merk uitgebreid en moeten we experimenteren met nieuwe stijlen en UI-patronen.

De tweede iteratie

Op weg naar de tweede iteratie van dit project (IPLv2), zijn we begonnen met een kleinere set functies. We zochten naar een eenvoudige ontwerpoplossing die Kik-gebruikers op een duidelijke manier aan een nieuwe ervaring zou blootstellen en gemakkelijk zou kunnen worden geïmplementeerd.

Deze versie van de portefeuille is eenvoudig, met slechts één pagina en lay-out, met een koptekst en met tabbladen om onderscheid te maken tussen twee soorten informatie:

  1. Kin-balans en gebruikersinformatie.
  2. Het aanbod van de tweezijdige economie - kansen om te verdienen en te besteden.

Met behulp van deze structuur konden we twee niveaus van hiërarchie creëren.

De blauwe kop zou de aandacht van gebruikers vestigen op hun Kin-saldo, met hun naam en foto als zekerheid dat dit hun account is.

Het gebied met de tabs kan worden geschoven met een plakkerige kop om de focus van de balans naar de economie te verplaatsen. We gingen ervan uit dat zodra gebruikers hun aandacht verleggen van hun balans naar deze tabbladen, ze de balansinformatie niet langer nodig hebben. Schakelen tussen de twee tabbladen moet echter altijd beschikbaar zijn, omdat we beide tabbladen hetzelfde niveau van hiërarchie geven.

UI-ontwerp

Kijk & voel

De UI-stijl van de portemonnee is gebaseerd op de Kin-stijlstijlgids. We willen een look en feel creëren die zowel betrouwbaar als vriendelijk is door blauwe tinten, lijnpictogrammen en minimale lijnillustraties te gebruiken, verwijzend naar wetenschap en technologie.

Uit Kin-stijlgids: Hero & spot-illustratie, logo-gebruik, kleuren en typografieWallet UI

Animaties en schermovergangen

We hebben twee soorten animaties gebruikt

  1. Overgangen die feedback geven over acties van gebruikers en verwachtingen wekken over wat er gaat komen.
  2. Fouten en systeemstoringen vriendelijk maken, in overeenstemming met ons doel om een ​​betrouwbaar en vriendelijk gevoel te creëren.

Transitions

Nadat gebruikers akkoord zijn gegaan met de voorwaarden, duurt het een paar seconden om de portemonnee in te stellen. Dit betekent dat we een soort laadstatus moesten creëren. We besloten van deze gelegenheid gebruik te maken om de ideeën achter Kin te benadrukken - decentralisatie en gemeenschap.

Door elementen uit het logo te gebruiken (bollen gemaakt van ronde vormen), creëerden we een metafoor voor individuen die in hun eigen tempo en richting bewegen, maar nog steeds bij elkaar komen.

Micro-interacties

We hebben geprobeerd micro-interacties tot een minimum te beperken en alleen te gebruiken als feedback voor gebruikersacties.

Randgevallen

Randgevallen en foutstatus zijn geen geweldige ervaring, maar we moeten er ook rekening mee houden in het ontwerp. We hebben geprobeerd een manier te vinden om een ​​foutstatus vriendelijker te maken.

Wat is het volgende

Feedback van gebruikers krijgen!

Tijdens het werken aan dit project hadden we veel vragen over bruikbaarheid, de juiste lay-out voor onze gebruikers en algemene antwoorden op een nieuwe look en feel in Kik.
We zijn momenteel bezig met het opzetten van workshops voor gebruikers, het testen van de bruikbaarheid en het verkrijgen van gegevens voor deze versie zodra deze wordt gelanceerd.