Kin Walletユーザーインターフェイスの設計

プロジェクト要件

設計プロセスは、製品の要件を決定することから始まります。この場合、当社の製品は、KikのユーザーにKinの獲得と支出のプロセスを紹介する必要があります。これは、Kik内のまったく新しいエクスペリエンスにユーザーを参加させることを意味します。

この製品の前回の反復(トークン配布イベントに参加したユーザーが利用できるバージョン)の間に、ウォレットのKinブランドのルックアンドフィールが決定されました。

つまり、この製品を表示する新しいKikユーザーは、これまでKikで使用していたものとはまったく異なる新しい機能と新しい外観の両方を体験できます。

このため、このバージョンをできるだけスリムにすることが重要であることを早い段階で認識しました。

ユーザージャーニーのIA構造の計画

オンボーディング

ユーザーは@KikTeamボットを介してウォレットに導入されます。これにより、Kikユーザーが使い慣れているもの、つまりチャットを活用して、この新しいエクスペリエンスを紹介できます。

ウォレット情報アーキテクチャ(IA)—さまざまな構造の調査

このプロジェクトを2回繰り返して、2つの可能なIA構造を調査しました。

  1. 取引履歴とKinを獲得する方法の大部分を含む堅牢な機能セット。
  2. バランスと獲得/支出オプションのみを含む無駄のないセット。

最初の繰り返し

初期のイテレーションでは、TDE参加者のウォレットに使用されるメインページから始め、収益と取引履歴のメニューナビゲーションを追加しました。プロジェクトの範囲を最小限に抑え、ユーザーが既に利用できるものの上に構築するために、支出とバランスがメインページに残ります。メニュー構造は、このバージョンで計画されている堅牢な機能セットを個別の領域にグループ化して、経路探索を支援し、認知負荷を軽減するのに役立ちます。

2つの新しいページ(収益と取引履歴)について、2つの従来のデザインパターンを検討しました。

  1. トランザクション履歴のタイムライン:このパターンを使用すると、このページの目的に合った情報を時系列に表示できます。時間の経過に伴う送受信のKinトランザクションを表示します。これは、銀行のアプリでは一般的です。
  2. 獲得のためのコンテンツカード:このパターンは、Kinが運営するスペースに適合するコンテンツ消費および電子商取引製品で一般的に使用されます。

また、リストレイアウトと大きなカードを使用して調査しました。

このバージョンを設計して、KinブランドのUIキットを拡張し、新しいスタイルとUIパターンを実験する必要がありました。

2回目の反復

このプロジェクトの2番目の反復(IPLv2)に移り、小さな機能セットから始めました。 Kikユーザーを明確な方法で新しいエクスペリエンスにさらし、簡単に実装できるシンプルな設計ソリューションを探しました。

このバージョンのウォレットはシンプルで、ページとレイアウトが1つだけで、ヘッダーと、2種類の情報を区別するタブがあります。

  1. 親族のバランスとユーザー情報。
  2. 両面エコノミーの提供-獲得と支出の機会。

この構造を使用すると、2つのレベルの階層を作成できました。

青いヘッダーは、ユーザーのKinバランスに注意を促します。名前と写真は、これがアカウントであることを保証するものです。

タブ領域は、バランスから経済にフォーカスを移動するために、スティッキーヘッダーでスクロール可能です。ユーザーがバランスからこれらのタブに注意を移すと、ユーザーはバランス情報が不要になると想定しました。ただし、両方のタブに同じ階層レベルを与えるため、2つのタブ間の切り替えは常に使用可能になっている必要があります。

UIデザイン

ルックアンドフィール

ウォレットのUIスタイルは、Kinブランドスタイルガイドに基づいています。ブルートーン、線のアイコン、最小限の線のイラストを使用して、科学と技術を参照することで、信頼性が高くフレンドリーなルックアンドフィールを作成することを目指しています。

Kinスタイルガイドから:ヒーロー&スポットイラスト、ロゴの使用、色、タイポグラフィウォレットUI

アニメーションと画面遷移

2種類のアニメーションを使用しました

  1. ユーザーの行動に関するフィードバックを提供し、今後の期待を高める移行。
  2. 信頼できる友好的な雰囲気を作り出すという目標に沿って、エラーやシステムの不具合を友好的にする。

遷移

ユーザーが条件に同意した後、ウォレットをセットアップするのに数秒かかります。つまり、ある種の読み込み状態を作成する必要がありました。この機会を利用して、Kinの背後にあるアイデア、つまり地方分権化とコミュニティを強調することにしました。

ロゴの要素(丸い形の球体)を使用することにより、私たちは自分のペースと方向で動いているがまだ一緒になっている個人のための比phorを作成しました。

マイクロ相互作用

マイクロインタラクションは最小限に抑え、ユーザーアクションのフィードバックとしてのみ使用するようにしました。

エッジケース

エッジケースとエラー状態は素晴らしい経験ではありませんが、デザインでもそれらを考慮する必要があります。エラー状態をよりわかりやすくする方法を見つけようとしました。

次は何ですか

ユーザーのフィードバックを取得します!

このプロジェクトに取り組んでいる間、ユーザビリティ、ユーザー向けの適切なレイアウト、およびKik内の新しいルックアンドフィールに対する一般的な応答について多くの質問がありました。
現在、ユーザーワークショップのセットアップ、ユーザビリティテストの実施、およびこのバージョンのリリース後のデータの取得を進めています。