Progettazione dell'interfaccia utente del portafoglio Kin

Requisiti del progetto

Il nostro processo di progettazione inizia determinando i requisiti del prodotto. In questo caso, il nostro prodotto deve introdurre agli utenti Kik il processo di guadagno e spesa di Kin. Ciò significa che inseriremo gli utenti in un'esperienza completamente nuova all'interno di Kik.

Durante la precedente iterazione di questo prodotto (la versione resa disponibile per gli utenti che hanno partecipato all'evento di distribuzione di token), è stato deciso che il portafoglio avrebbe l'aspetto e il marchio Kin.

Ciò significa che i nuovi utenti Kik che visualizzano questo prodotto sperimenteranno sia nuove funzionalità che un nuovo aspetto molto diverso da quello a cui sono abituati finora da Kik.

Per questo motivo, ci siamo presto resi conto che sarà importante mantenere questa versione il più snella possibile.

Pianificazione dei percorsi utente struttura IA

onboarding

Gli utenti verranno introdotti al portafoglio tramite il bot @KikTeam. Questo ci consente di attingere a ciò che gli utenti di Kik hanno familiarità - chat - per introdurre questa nuova esperienza.

Wallet information architecture (IA) - esame di diverse strutture

Abbiamo esaminato due possibili strutture IA durante due iterazioni di questo progetto.

  1. Un solido set di funzionalità che include la cronologia delle transazioni e un'ampia sezione di modi per guadagnare Kin.
  2. Un set più snello che include solo le opzioni di saldo e guadagno / spesa.

La prima iterazione

Durante la prima iterazione, abbiamo iniziato con la pagina principale utilizzata per il portafoglio di un partecipante TDE e aggiunto la navigazione nei menu per la cronologia delle entrate e delle transazioni. La spesa e l'equilibrio rimarrebbero sulla pagina principale per ridurre al minimo l'ambito del progetto e basarsi su ciò che era già disponibile per gli utenti. La struttura del menu aiuterebbe a raggruppare le solide serie di funzionalità pianificate per questa versione in aree separate per aiutare a trovare indicazioni stradali e ridurre il carico cognitivo.

Per le due nuove pagine (guadagni e cronologia delle transazioni), abbiamo esaminato due modelli di progettazione convenzionali:

  1. Una cronologia per la cronologia delle transazioni: questo modello ci permetterà di presentare le informazioni in ordine cronologico, che si adatta allo scopo di questa pagina - mostrando le transazioni Kin in entrata e in uscita nel tempo. Questo è comune per le app bancarie.
  2. Schede di contenuto per guadagnare: questo modello viene utilizzato comunemente nel consumo di contenuti e nei prodotti di e-commerce, che si adatta allo spazio in cui Kin opererà.

Abbiamo anche esplorato utilizzando layout di elenco e schede di grandi dimensioni:

Progettando questa versione, abbiamo ampliato il kit di interfaccia utente per il marchio Kin e abbiamo sperimentato nuovi stili e modelli di interfaccia utente.

La seconda iterazione

Passando alla seconda iterazione di questo progetto (IPLv2), abbiamo iniziato con un set più piccolo di funzionalità. Abbiamo cercato una soluzione di design semplice che esponesse gli utenti di Kik a una nuova esperienza in modo chiaro e che fosse facile da implementare.

Questa versione del portafoglio sarà semplice, con una sola pagina e layout, con un'intestazione e con schede per distinguere tra due tipi di informazioni:

  1. Bilancia Kin e informazioni per l'utente.
  2. Le offerte economiche bilaterali: opportunità di guadagno e spesa.

L'uso di questa struttura ci ha permesso di creare due livelli di gerarchia.

L'intestazione blu attirerebbe l'attenzione degli utenti sul loro saldo Kin, con il loro nome e foto da conservare come rassicurazione che questo è il loro account.

L'area delle schede è scorrevole con un'intestazione appiccicosa, per spostare l'attenzione dall'equilibrio all'economia. Abbiamo ipotizzato che una volta che gli utenti spostano la loro attenzione dal loro bilancio a queste schede, non hanno più bisogno delle informazioni sul saldo. Tuttavia, il passaggio tra le due schede dovrebbe essere sempre disponibile, poiché diamo a entrambe le schede lo stesso livello di gerarchia.

Progettazione dell'interfaccia utente

Guarda e senti

Lo stile dell'interfaccia utente del portafoglio si basa sulla guida di stile del marchio Kin. Miriamo a creare un aspetto che sia affidabile e amichevole usando toni blu, icone di linea e illustrazioni minimali, facendo riferimento a scienza e tecnologia.

Dalla guida allo stile Kin: illustrazione di Hero & spot, usi del logo, colori e tipografiaInterfaccia utente del portafoglio

Animazioni e transizioni dello schermo

Abbiamo usato due tipi di animazione

  1. Transizioni che forniranno feedback sulle azioni degli utenti e creeranno aspettative su ciò che verrà.
  2. Rendere gli errori e le anomalie di sistema amichevoli, in linea con il nostro obiettivo di creare un'atmosfera affidabile e amichevole.

transizioni

Dopo che gli utenti hanno accettato i termini, sono necessari alcuni secondi per configurare il portafoglio. Ciò significa che abbiamo dovuto creare uno stato di caricamento di qualche tipo. Abbiamo deciso di sfruttare questa opportunità per enfatizzare le idee alla base di Kin: decentralizzazione e comunità.

Usando gli elementi del logo (sfere fatte di forme rotonde), abbiamo creato una metafora per gli individui che si muovono secondo il proprio ritmo e direzione, ma che comunque si incontrano.

Micro interazioni

Abbiamo cercato di ridurre al minimo le microinterazioni e di utilizzarle solo come feedback per le azioni dell'utente.

Custodie per bordi

I casi limite e gli stati di errore non sono una grande esperienza, ma dobbiamo tenerne conto anche nella progettazione. Abbiamo cercato di trovare un modo per rendere più amichevole uno stato di errore.

Qual'è il prossimo

Ottenere feedback degli utenti!

Mentre lavoravamo a questo progetto, abbiamo avuto molte domande sull'usabilità, il layout giusto per i nostri utenti e le risposte generali a un nuovo aspetto all'interno di Kik.
Attualmente stiamo organizzando workshop per utenti, test di usabilità e acquisizione dei dati per questa versione una volta avviata.