Entwerfen der Kin Wallet-Benutzeroberfläche

Projektanforderungen

Unser Designprozess beginnt mit der Bestimmung der Produktanforderungen. In diesem Fall muss unser Produkt Kik-Benutzern den Prozess des Verdienens und Ausgebens von Kin vorstellen. Dies bedeutet, dass wir die Benutzer in eine völlig neue Erfahrung in Kik einbinden.

Bei der vorherigen Iteration dieses Produkts (die Version, die Benutzern zur Verfügung gestellt wurde, die am Token-Verteilungsereignis teilgenommen haben) wurde entschieden, dass die Brieftasche das Erscheinungsbild der Marke Kin aufweist.

Dies bedeutet, dass neue Kik-Benutzer, die dieses Produkt betrachten, sowohl neue Funktionen als auch ein neues Erscheinungsbild erleben, das sich stark von dem unterscheidet, an das sie bisher von Kik gewöhnt sind.

Aus diesem Grund haben wir früh erkannt, dass es wichtig ist, diese Version so schlank wie möglich zu halten.

Planung von Benutzerreisen IA-Struktur

Onboarding

Benutzer werden über den @ KikTeam-Bot in die Brieftasche eingeführt. Dies ermöglicht es uns, das zu nutzen, mit dem Kik-Benutzer vertraut sind - Chatten -, um diese neue Erfahrung vorzustellen.

Wallet Information Architecture (IA) - Untersuchung verschiedener Strukturen

Während zweier Iterationen dieses Projekts haben wir uns mit zwei möglichen IA-Strukturen befasst.

  1. Eine robuste Reihe von Funktionen, einschließlich des Transaktionsverlaufs und einer Vielzahl von Möglichkeiten, Kin zu verdienen.
  2. Ein schlankeres Set, das nur Optionen für Guthaben und Verdienen / Ausgeben enthält.

Die erste Iteration

Während der frühen Iteration begannen wir mit der Hauptseite, die für die Brieftasche eines TDE-Teilnehmers verwendet wurde, und fügten eine Menüführung für das Sammeln und den Transaktionsverlauf hinzu. Die Ausgaben und das Gleichgewicht bleiben auf der Hauptseite, um den Umfang des Projekts zu minimieren und auf dem aufzubauen, was den Benutzern bereits zur Verfügung stand. Die Menüstruktur würde dabei helfen, die für diese Version geplanten robusten Funktionssätze in separate Bereiche zu gruppieren, um die Orientierung zu erleichtern und die kognitive Belastung zu verringern.

Für die beiden neuen Seiten (Ertrags- und Transaktionsverlauf) haben wir uns zwei herkömmliche Entwurfsmuster angesehen:

  1. Eine Zeitleiste für den Transaktionsverlauf: Mit diesem Muster können wir Informationen in chronologischer Reihenfolge darstellen, die dem Zweck dieser Seite entsprechen - eingehende und ausgehende Kin-Transaktionen im Zeitverlauf. Dies ist bei Banking-Apps üblich.
  2. Inhaltskarten zum Sammeln: Dieses Muster wird häufig für Inhaltskonsum- und E-Commerce-Produkte verwendet, die mit dem Bereich übereinstimmen, in dem Kin tätig sein wird.

Wir haben uns auch mit Listenlayouts und großen Karten beschäftigt:

Bei der Entwicklung dieser Version haben wir das UI-Kit für die Marke Kin erweitert und müssen mit neuen Stilen und UI-Mustern experimentieren.

Die zweite Iteration

Beim Übergang zur zweiten Iteration dieses Projekts (IPLv2) haben wir mit einem kleineren Satz von Funktionen begonnen. Wir suchten nach einer einfachen Designlösung, mit der Kik-Benutzer auf übersichtliche Weise eine neue Erfahrung machen und die einfach zu implementieren ist.

Diese Version der Brieftasche ist einfach, mit nur einer Seite und einem Layout, einer Kopfzeile und Registerkarten zur Unterscheidung zwischen zwei Arten von Informationen:

  1. Kin Balance und Benutzerinformationen.
  2. Die zweiseitigen Sparmöglichkeiten - Möglichkeiten zum Verdienen und Ausgeben.

Mithilfe dieser Struktur konnten wir zwei Hierarchieebenen erstellen.

Die blaue Kopfzeile macht die Nutzer auf ihren Kin-Kontostand aufmerksam. Ihr Name und ihr Foto sollen ihnen versichern, dass dies ihr Konto ist.

Der Registerkartenbereich kann mit einer klebrigen Kopfzeile gescrollt werden, um den Fokus von der Balance auf die Wirtschaft zu verlagern. Wir gingen davon aus, dass Benutzer, die ihre Aufmerksamkeit von ihrem Guthaben auf diese Registerkarten verlagern, die Guthabeninformationen nicht mehr benötigen. Das Wechseln zwischen den beiden Registerkarten sollte jedoch immer verfügbar sein, da beide Registerkarten dieselbe Hierarchieebene haben.

UI-Design

Sehen und fühlen

Der Benutzeroberflächenstil der Brieftasche basiert auf dem Stilleitfaden der Marke Kin. Unser Ziel ist es, durch die Verwendung von Blautönen, Liniensymbolen und minimalen Linienabbildungen unter Bezugnahme auf Wissenschaft und Technologie ein vertrauenswürdiges und freundliches Erscheinungsbild zu schaffen.

Aus dem Kin Style Guide: Hero & Spot Illustration, Verwendung von Logos, Farben und TypografieBrieftaschen-Benutzeroberfläche

Animationen und Bildschirmübergänge

Wir haben zwei Arten von Animationen verwendet

  1. Übergänge, die Feedback zu Benutzeraktionen geben und Erwartungen an zukünftige Aktionen wecken.
  2. Machen Sie Fehler und Systemfehler freundlich, im Einklang mit unserem Ziel, ein vertrauenswürdiges und freundliches Gefühl zu schaffen.

Übergänge

Nachdem die Benutzer den Bedingungen zugestimmt haben, dauert es einige Sekunden, bis die Brieftasche eingerichtet ist. Das heißt, wir mussten einen Ladezustand erzeugen. Wir haben uns entschlossen, diese Gelegenheit zu nutzen, um die Ideen hinter Kin - Dezentralisierung und Gemeinschaft - hervorzuheben.

Durch die Verwendung von Elementen aus dem Logo (Kugeln aus runden Formen) haben wir eine Metapher für Personen geschaffen, die sich in ihrem eigenen Tempo und ihrer Richtung bewegen, aber dennoch zusammenfinden.

Mikrointeraktionen

Wir haben versucht, Mikrointeraktionen so gering wie möglich zu halten und sie nur als Feedback für Benutzeraktionen zu verwenden.

Edge-Fälle

Randfälle und Fehlerzustände sind keine großartige Erfahrung, aber wir müssen sie auch im Design berücksichtigen. Wir haben versucht, einen Weg zu finden, um einen Fehlerzustand freundlicher aussehen zu lassen.

Was kommt als nächstes

Nutzer-Feedback einholen!

Während der Arbeit an diesem Projekt hatten wir viele Fragen zur Benutzerfreundlichkeit, zum richtigen Layout für unsere Benutzer und zu allgemeinen Antworten auf ein neues Erscheinungsbild von Kik.
Wir sind derzeit dabei, Benutzerworkshops einzurichten, Usability-Tests durchzuführen und Daten für diese Version zu erhalten, sobald sie veröffentlicht wird.