DID Wallet 4.0のデザイン手法
著者： 曹雯（ArcBlock UXデザイナー）
謝辞： デザインプロセスと手法について丁寧にご指導くださった外部デザインメンターのRokey Zhang氏、細部のデザインに貢献いただいた外部デザイナーのNi Cheng氏、フィードバックとご協力をいただいた早期Beta参加者の皆様に感謝します。
今年、私たちは新しいウォレット4.0をリリースしました。今回のデザインでは従来の構成を全面的に見直し、既存ブランドを改善することで、ユーザー体験と中核的な競争力の向上を目指しました。
老ユーザーならすぐに気づくと思いますが、ブランドを大幅に刷新しただけでなく、プロダクトのフレームワークも大きく変わりました。資産ページをプロダクトの最初の画面に配置し、以前の曖昧だったアプリ一覧に代わりました。取引履歴はホーム画面の2番目のタブに移動し、最後のタブはリアルタイムコミュニケーションに割り当てました。
なぜこれほど大胆に変更できたのか？これからその背後にあるデザインストーリーを一つずつ明かしていきます。
プロダクトのコンパスを修正する
過去3つのバージョンで最も深刻かつ厄介だった問題は、プロダクトのポジショニングが明確でなかったことです。今回はオンラインワークショップを一度しっかり実施し、プロダクトのコアな差別化ポイントに焦点を当てました。思考を広げながらポジショニングを議論し続け、最終的に明確でクリアなデザインの方向性を確立しました。これにより、チームのデザインと開発がかつてないほど統一されました。
1. オンラインワークショップ
- ワークショップでは、プロダクトチーム、エンジニア、デザイナーがプロダクトの内容、構造、仕組みについて、思いつく限りのアイデアを4つの軸のディスカッションボードに貼り出しました（下図参照）。
- 最初は個別に作業し、その後全員でまとめと調整を行いました。これはオンライン参加者全員が十分に関与できるようにし、また異なるユーザーのプロダクト理解を豊かにするためです。
2. グループ集計
- 似たタイプの付箋をまとめてグループ分けしました（下図参照）。
- 性能や差別化ポイントはプロダクト属性に属し、説明から属性を表す方向性を抽出できます。最初は「資産の移動能力」「履歴検索能力」など具体的でしたが、最終的には「資産移動・取引」という大きなカテゴリに分類されました。
- コアな差別化ポイントについてチームで投票し、最も重要な3点を選び、その後議論とまとめを行いました。
3. 分析結果
- シナリオタイプの付箋も抽出してグループ化し、ユーザーフローに沿って連結しました。
- 下図右側は投票数の列挙によってシナリオの優先順位を判定する方法で、数字は該当テーマの付箋数を示しています。
Tips：上図のユーザーコアシナリオで「閲覧・管理」が「資産移動」より上にあるのは、チームの投票数が資産の閲覧・管理に多く集まったためです。
プロダクトアーキテクチャの再構築
1. コアシナリオに対応した下部ナビゲーション
上記の議論と投票から、プロダクトの3つのコアが導き出され、3つのタブ構成とその重要な注目点が決まりました。
タブの順番はユーザーの接触頻度の高い順に調整しました。現在、ユーザーは資産管理を最も頻繁に行い、アプリを使うのは時々、情報プッシュを見るのはさらに少ない状況です。
2. コア機能に対応したトップバー
トップバーには引き続き、ID設定とQRコードスキャンを配置しています。これらは全体で頻繁に使われる機能です。右上のユーザーカードは将来的により多くの分散型ID機能を拡張するための重要な位置を確保し、設定などの低頻度機能は次の階層に格納しました。
3. 全体フレームワークの構築
コアシナリオのUXフロー設計では、シナリオをいくつかの独立したシナリオに細分化できます。例えば、ウォレット初回利用シナリオから3つ抽出し、それぞれのシナリオに設計原則を設定しました。
下図は最初に設計したアーキテクチャ図で、ページ上は既に決まっているトップとボトム以外はすべてモジュール形式で表現し、ページ間の基本的なインタラクションを設定しています。低忠実度のプロトタイプは全体を俯瞰し、大枠を掴むのに役立ちます。
Tips：ページ内のモジュールの体積が大きいほど比重が高くなります。各モジュールの優先順位を事前に設定し、おおよその高さを調整してから詳細化しましょう。
UXデザインの段階的推進
1. サブフローの構築
コアシナリオのプロトタイプ設計が確定したら、優先順位に従ってそのシナリオ内の全ページ構造のプロトタイプを作成します。
Tips：特定のシナリオでは、利用頻度が高い、または重要度の高い機能入口を最適化し、より短い到達経路を設けるべきです。
2. モジュール化デザイン
すべてのコアページのサブフローページが確定したら、次のステップに進みます。モジュール単位で細分化し、低忠実度から中忠実度のデザインへと移行します。
- コンテンツデザイン
- 構造デザイン
- 分解デザイン
- 組み合わせと接続
コンテンツデザイン
探索ページを例に、Feed配信モジュールの内容について思考を広げたものです。
構造デザイン
複雑なモジュールはさらに小さなモジュールに分解します。 要素の内容まで細かくせず、色ブロックで示します。下図はモジュールの大きさに基づいて区分した例です。
分解モジュールデザイン
モジュールのスタイルをさらに発散的にデザインします。ここでの発散はアイデアを刺激するためのもので、制限しないことが重要です。下図ではカード型やリスト型など、モジュールのスタイルをさらに多様化しています。
組み合わせと接続
設計したモジュールをページ上で組み合わせ、中忠実度のプロトタイプを作成します。
Tips：ちょうどこの時点で開発チームが待機しているため、モジュール設計と中忠実度の機能開発は並行して進められます。
下図はホーム画面を例に、3段階の設計変遷を経て最終的に高忠実度UIデザインに至った様子です。
高忠実度デザインの議論
この段階ではNotionのオンラインドキュメントを活用し、ドキュメントリンクを共有してチームでコメントしながら段階的に案を確定しました。議論の過程はサブページ「History」に完全に保存され、後からの振り返りに役立ちます。
デザインスタイル
- プロダクト内で最も代表的な3〜4ページを選び、ブランドスタイルに基づいてフォントの試行を行いました。
- フォントが決まったら、ブランドガイドラインに従いUIの調整と拡充を行いました。余白、フォントサイズ、色、アイコンなどを含みます。
ガイドラインの作成
適切なガイドラインは「形式構造 > ロジック > 使用シーン > 状態」の順に段階的に進め、重複を避けて効率的に作成します。
Tips
- ブランドスタイルを早期に確定すると多くの探索時間を節約できます。
- モジュールの注釈をしっかり行うことで手戻りを減らせます。
- 類似モジュールの設計は共通のルールをまとめて独自のロジックを形成しましょう。
- 既存リソースを最大限活用し、無駄な再発明は避けましょう。
このページに関わるもの
製品
-
DID Wallet
renamed
デジタル ID（DID）の作成・管理と、関連する証明情報の管理を、一つのアプリで。