Proiectarea interfeței de utilizator Kin Wallet

Cerințe de proiect

Procesul nostru de proiectare începe prin determinarea cerințelor produselor. În acest caz, produsul nostru trebuie să introducă utilizatorii Kik în procesul de a câștiga și cheltui Kin. Aceasta înseamnă că vom fi la bordul utilizatorilor pentru o experiență complet nouă în Kik.

În timpul iterației anterioare a acestui produs (versiunea pusă la dispoziția utilizatorilor care au participat la evenimentul de distribuție a jetoanelor), s-a decis că portofelul va avea aspectul și senzația mărcii Kin.

Acest lucru înseamnă că noii utilizatori Kik care vizionează acest produs vor experimenta atât caracteristici noi, cât și un aspect nou, care este foarte diferit de ceea ce obișnuiau până acum de la Kik.

Din acest motiv, ne-am dat seama de timpuriu că va fi important să păstrăm această versiune cât mai slabă.

Planificarea călătoriilor utilizatorilor Structura IA

La imbarcare

Utilizatorii vor fi introduși în portofel prin intermediul botului @KikTeam. Acest lucru ne permite să analizăm ceea ce utilizatorii Kik sunt familiarizați - chat-ul - pentru a introduce această nouă experiență.

Arhitectura informațiilor din portofel (IA) - examinarea diferitelor structuri

Am analizat două structuri IA posibile în timpul a două iterații ale acestui proiect.

  1. Un set robust de funcții care include istoricul tranzacțiilor și o secțiune mare de modalități de a câștiga Kin.
  2. Un set mai slab care include doar opțiuni de echilibru și câștig / cheltuieli.

Prima iterație

În timpul iterației timpurii, am început cu pagina principală care a fost folosită pentru portofelul unui participant TDE și am adăugat navigare în meniu pentru istoricul câștigurilor și tranzacțiilor. Cheltuielile și echilibrul vor rămâne pe pagina principală pentru a minimiza sfera de aplicare a proiectului și a construi pe deasupra ceea ce era deja disponibil pentru utilizatori. Structura meniului ar ajuta la gruparea seturilor de caracteristici robuste planificate pentru această versiune în zone separate pentru a ajuta la identificarea și reducerea încărcării cognitive.

Pentru cele două noi pagini (câștig și istoricul tranzacțiilor), am analizat două modele de design convenționale:

  1. O cronologie pentru istoricul tranzacțiilor: Acest model ne va permite să prezentăm informații în ordine cronologică, care se potrivește scopului acestei pagini - afișarea tranzacțiilor Kin primite și ieșite în timp. Acest lucru este comun pentru aplicațiile bancare.
  2. Carduri de conținut pentru câștig: Acest model este utilizat în mod obișnuit în consumul de conținut și produsele de comerț electronic, care se potrivește cu spațiul în care va funcționa Kin.

De asemenea, am explorat folosind machete de listă și carduri mari:

Proiectând această versiune, am extins kitul UI pentru marca Kin și trebuie să experimentăm noi stiluri și modele UI.

A doua iterație

Trecând la a doua iterație a acestui proiect (IPLv2), am început cu un set mai mic de funcții. Am căutat o soluție simplă de proiectare care să expună utilizatorii Kik la o nouă experiență într-o manieră clară și să fie ușor de implementat.

Această versiune a portofelului va fi simplă, cu o singură pagină și aspect, cu antet și cu file pentru a diferenția două tipuri de informații:

  1. Bilanțul și informațiile despre utilizator.
  2. Ofertele cu două fețe ale economiei - oportunități de a câștiga și cheltui.

Utilizarea acestei structuri ne-a permis să creăm două niveluri de ierarhie.

Antetul albastru ar atrage atenția utilizatorilor asupra soldului lor Kin, cu numele și foto-ul lor asigură o asigurare a faptului că acesta este contul lor.

Zona file este defilabilă cu un antet lipicios, pentru a muta focalizarea de la echilibru la economie. Am presupus că, odată ce utilizatorii își mută atenția de la sold la aceste file, nu mai au nevoie de informațiile despre sold. Cu toate acestea, comutarea între cele două file trebuie să fie întotdeauna disponibilă, deoarece oferim ambelor file același nivel de ierarhie.

Proiectare UI

Privește și simte

Stilul UI al portofelului se bazează pe ghidul stilului de brand Kin. Ne propunem să creăm un aspect care să fie de încredere și prietenos, folosind tonuri de albastru, pictograme de linie și ilustrații de linii minime, referire la știință și tehnologie.

Din ghidul stilului Kin: ilustrare Hero & spot, utilizări de logo, culori și tipografieUI portofel

Animații și tranziții pe ecran

Am folosit două tipuri de animație

  1. Tranziții care vor oferi feedback cu privire la acțiunile utilizatorilor și vor crea așteptări cu privire la ce urmează.
  2. Efectuarea erorilor și a glitches-urilor sistemului, în conformitate cu obiectivul nostru de a crea un sentiment de încredere și prietenos.

tranziţii

După ce utilizatorii sunt de acord cu termenii, este nevoie de câteva secunde pentru a configura portofelul. Aceasta înseamnă că a trebuit să creăm o stare de încărcare. Am decis să folosim această oportunitate pentru a sublinia ideile din spatele lui Kin - descentralizare și comunitate.

Folosind elemente din logo (sfere formate din forme rotunde), am creat o metaforă pentru indivizii care se mișcă în ritmul și direcția proprie, dar încă se reunesc.

Interacțiuni micro

Am încercat să menținem micro-interacțiunile la minimum și să le folosim doar ca feedback pentru acțiunile utilizatorilor.

Carcase de margine

Cazurile de margine și stările de eroare nu sunt o experiență grozavă, totuși trebuie să luăm în calcul și ele în proiectare. Am încercat să găsim o modalitate de a face o stare de eroare să pară mai prietenoasă.

Ce urmeaza

Obținerea feedback-ului utilizatorilor!

În timp ce lucram la acest proiect, am avut o mulțime de întrebări cu privire la capacitatea de utilizare, dispunerea potrivită pentru utilizatorii noștri și răspunsuri generale la un aspect nou în Kik.
Momentan suntem în proces de configurare a atelierelor utilizatorilor, facem testări de uzabilitate și obținem date pentru această versiune, odată ce va fi lansată.