ブロックチェーンウォレット・サービス企画&プロダクトデザイン

ウォレットの専門的な操作を、わかりやすく。

バックアップを手順に沿って進められる案内と、暗号資産の利用経験に応じて手数料を調整できる取引設定を設計しました。

私の役割
プロダクトデザイン · PM
サービスフロー・画面企画・UXライティング
期間
2019年5月~9月
チーム
プロダクトマネージャー · プロダクトデザイナー
フルスタック開発者 · バックエンド開発者

プロジェクトの課題

ブロックチェーン決済を、専門知識のない人でも利用できるようにすることが課題でした。資産の送受信だけでも、バックアップ、復元、取引手数料といった不慣れな概念を理解する必要がありました。

リサーチの根拠: 競合ウォレット、記事、書籍、技術資料を調べ、初心者と経験者のペルソナをもとに利用フローを設計しました。

バックアップ、資産管理、取引を含むブロックチェーンウォレットのデザイン

課題の発見 / 技術要件をユーザーのタスクへ

バックアップと取引には、手順・状態・設定の明確さが必要でした。

リサーチでは、取引概念のわかりにくさ、バックアップの複雑さ、状態表示の不足が見られました。これらを個別画面の修正ではなく、プロダクト設計で解く課題と捉えました。

資産の保管・送信をわかりやすく案内しながら、経験者には詳細な取引設定をどう提供するか。

課題定義の根拠

競合サービスと記事・書籍・技術資料を調査し、ウォレット、バックアップ、アドレス、取引の画面を比較ボードに整理しました。初心者と経験者のペルソナをもとに、必要な案内と設定の細かさを分けました。

ペルソナ

誰のためのウォレットか。

利用経験、取引時の判断基準、必要な案内を整理するために作成した架空のプロフィールです。

架空のプロフィール

Jimin Kim

29歳 · コンテンツマーケター

個人ウォレットは初めて標準設定を使いたい
「手順を理解して、正しく完了できたか知りたい。」
利用経験
取引所の利用経験はありますが、復元フレーズを自分で保管するウォレットは初めてです。
利用場面
ウォレットを作成し、復元フレーズを保管してバックアップを終えてから、初めての送金を行おうとしています。
目標
復元フレーズを保存し、バックアップを完了したうえで、複雑な設定をせずに資産を送ること。
困りごと
フレーズの保管方法、バックアップの完了状態、選ぶべき取引速度がわかりません。
判断基準
細かな設定より、手順の説明と完了の確認を重視します。
設計への反映

段階的なバックアップ案内と完了表示を用意。基本モードでは、速度の選択肢と手数料をあわせて表示します。

架空のプロフィール

Dohyun Park

35歳 · ソフトウェアエンジニア

個人ウォレットの経験者自分で細かく設定したい
「取引内容を確認し、手数料を自分で調整したい。」
利用経験
個人ウォレットと復元フレーズの役割を理解し、送金前に手数料と宛先を確認します。
利用場面
資産を送る前に取引内容を確認し、状況に応じて速度と手数料を調整しようとしています。
目標
金額と宛先を確認しながら、取引速度と手数料を細かく調整すること。
困りごと
用意された速度の選択肢だけでは、希望する手数料に調整できません。
判断基準
定型の選択肢に限らず、取引条件を確認しながら直接設定できる必要があります。
設計への反映

同じ送信フロー内で詳細モードに切り替え、取引内容を確認しつつスライダーで手数料を調整できるようにします。

バックアップ、トークン、アドレス、取引画面を含む競合ウォレットアプリの注釈付き比較ボード
プロジェクトの競合調査ボードです。画像を開くと元の注釈を確認できます。
01 / 理解

不慣れな技術概念が、基本操作の障壁になっていました。

発見初心者は、資産を管理・送信する段階でブロックチェーンの概念も理解しなければなりませんでした。

問題の定義技術知識を先に求めず、資産の確認や送信といった身近な行動から始められないか。

設計方針資産と取引履歴を区別しやすいウォレット画面を構成し、送信・受信への導線を設けました。

02 / バックアップ

バックアップの手順と完了状態が、つながっていませんでした。

発見調査では、複雑なバックアップ手順と不明瞭なフィードバックが課題として挙がりました。

問題の定義バックアップの方法を説明し、完了したことも明確に伝えるには。

設計方針復元フレーズの操作を段階的に案内し、メイン画面ではバックアップが必要な状態と完了した状態を区別しました。

03 / 取引

初心者と経験者に、同じ設定方法を求めることはできませんでした。

発見両者とも送信時に取引速度と手数料を選ぶ必要がありました。

問題の定義簡単な選択と細かな調整を、同じ送信フローでどう両立するか。

設計方針基本モードでは速度の選択肢を、詳細モードでは微調整できるスライダーを提供しました。

課題定義をサービスフローと画面企画につなぐ

企画スケッチで作成・復元、バックアップ、資産確認、送受信、取引状態をつなぎました。手数料選択と詳細モードのメモには、課題を実際のフローと画面に落とし込む過程が残っています。

ウォレット作成、バックアップ、送受信、手数料選択、詳細モードをつなぐ手描きの設計スケッチ
ウォレットのジャーニーと画面ごとの判断をつなぐ元の作業スケッチ。
作成・復元の経路からウォレットと取引画面へ進む初期のフロー図
元のケーススタディに含まれていた初期のフロー図。
課題探索と調査からフローチャート、ワイヤーフレーム、UIデザインへ進むプロジェクト工程
リサーチからフロー設計、ワイヤーフレーム、UIデザインまでの過程。

プロダクト構造 / オンボーディングと資産確認

詳細設定の前に、ウォレットと資産を理解できるように。

オンボーディングで製品とウォレットの概念を紹介し、トークンカードで資産を区別。資産詳細に残高、送受信ボタン、取引履歴を配置し、バックアップと取引を始めるための構造を整えました。

製品、セキュリティ、ウォレットを紹介する三つのオンボーディング画面
元のオンボーディング画面デザイン。
資産カード、残高、送受信ボタン、取引履歴のある資産詳細
プロジェクトのウォレット概要と選択した資産の詳細画面。

01 / バックアップの手順と完了状態

手順を案内し、完了したことも伝える。

リサーチで見つかった課題

競合分析とデスクリサーチで、バックアップの複雑さと状態案内の不足を確認しました。中核機能だからこそ、方法だけでなく完了も明確に伝える必要があると判断しました。

判断の理由

フロー内では復元フレーズの保存・確認方法を、メイン画面ではバックアップの要否を表示。作業後も状態を確かめられるよう、手順と結果をつなぎました。

画面に落とし込んだ方法

実行前は警告とBack Upボタン、完了後はBacked upを表示。具体的な操作を示す文言、単語の順序選択、入力の進捗で各段階を案内しました。

バックアップ前の警告・実行ボタンと、完了後の表示
バックアップ前後の状態を示す画面です。リデザイン前後の比較ではありません。

完了前警告とBack Upボタンで、バックアップが必要なことを伝えます。

完了後ウォレット概要のBacked up表示で完了を伝えます。

復元フレーズの案内、正しい順番での単語選択、フレーズ入力画面
バックアップ画面:復元フレーズの保存、単語順の確認、指定単語の入力、進捗表示。

02 / 利用経験に応じた取引設定

簡単な選択と細かな調整を、2つのモードに。

設計が必要だった理由

初心者と経験者の双方を想定し、それぞれの経験に応じて取引速度とガス代を選べる必要がありました。

二つのモードを使った理由

基本モードではLow・Medium・Fastとガス代を提示。詳細モードではスライダーで直接調整できるようにしました。経験によって必要な操作の細かさが異なるためです。

画面への反映

どちらも同じ送信フローで利用できます。金額と宛先を確認しながら、基本モードでは速度を選択し、詳細モードでは手数料を調整します。

取引速度を選ぶ基本モードの送信画面
標準モード: 取引速度の選択肢とガス代をあわせて表示します。
スライダーで取引速度を調整する詳細送信画面
詳細モード: 同じ送信フロー内でスライダーを使って調整します。

2画面は、下の全体UIシートから該当箇所を拡大したものです。

サービスフローと全画面デザイン

バックアップと取引を、ウォレット全体の流れに。

作成・復元から取引、バックアップ、設定までを設計。復元はフレーズと秘密鍵の2経路に、取引は確認・パスワード入力・完了の段階に分けました。

作成と復元新規作成と既存ウォレットの復元を分け、復元にはフレーズまたは秘密鍵を使う経路を設けました。

送信と完了取引確認、パスワード入力、完了を分け、各段階の進行を案内しました。

サービスフローを見る

ウォレットのサービスフロー全体

全画面デザインを見る

標準・詳細取引画面を含むウォレット全体のUIシート

プロモーション素材を見る

ウォレットのプロモーション素材

ビジュアルシステム / 色・文字・コンポーネント

画面が変わっても、機能と状態の表現を統一する。

パレット、Poppins、ボタン、ナビゲーション、資産一覧、ウォレットカードを定義。主要機能、残高、バックアップ状態を一貫して表現しました。

コンポーネントシートには送受信ボタン、無効状態、復元方法、バックアップ前後のカードを収録。最終UIとともに、各画面に適用したビジュアル基準を示しています。

紫、赤、黄土色、白、中間色を含むプロジェクトのカラーパレット
元のカラーパレット。
文字サイズとウェイトを示すPoppinsのタイポグラフィ見本
タイポグラフィの選択とテキストの階層。
送受信ボタン、無効状態、復元方法、資産行、ウォレットカード状態を含むコンポーネント
機能と状態を統一して表現するコンポーネント定義。
文字組み、パレット、コンポーネント、ナビゲーション、アイコンを含む全体のビジュアルガイド
プロジェクト全体のビジュアルガイドシート。

製品モックアップ

全画面のUIを反映したウォレットアプリ。

ウォレットカード、バックアップ、取引画面を示す完成したスマートフォンのモックアップ
完成したウォレットUIのアプリモックアップ。

Output / Result · 成果物と結果

フローと状態の定義から、最終UIまで。

作成・復元・バックアップ・送受信を設計し、20画面と共通のビジュアル基準にまとめました。

20画面最終ウォレットUIシート
2つのバックアップ状態バックアップが必要 · 完了済み
2つの取引モード基本選択 · 詳細調整

01 / SERVICE FLOW

作成から復元・取引までの全体フロー

作成・復元・取引・バックアップをつなぐ利用フローを整理しました。

  • 新規作成と既存ウォレット復元の経路を区別
  • フレーズ・秘密鍵を使った復元経路
  • 送受信、取引確認、パスワード入力、完了
作成・復元・バックアップ・取引・設定をつなぐ最終フロー
サービスフローの成果物
全体フローを見る →

02 / SCREEN PLANNING

バックアップ状態の案内と経験別の取引設定

状態表示、段階的な案内、基本・詳細モードの手数料設定を設計しました。

  • バックアップ警告とBacked upの完了表示
  • フレーズ保存・単語順の確認・入力進捗の案内
  • 基本の速度選択と詳細のスライダー調整
バックアップが必要な状態と完了状態を分けた画面
状態別の画面設計

03 / PRODUCT DESIGN

20画面と共通のビジュアル基準

ウォレットUIと販促デザインを制作しました。サービスは独自トークン、Bitcoin、Ethereumに対応していました。

  • オンボーディング、資産一覧・詳細、送受信画面
  • 色・Poppins・ボタン・ウォレットカードの定義
  • 全体UIシート、ビジュアルガイド、販促物
作成からバックアップ・送受信・復元までの20画面
全体UIの成果物
ビジュアル基準とコンポーネントを見る →

プロダクトに反映した利用フロー

バックアップ
  1. バックアップの要否を確認
  2. 復元フレーズを保存
  3. 単語順を確認
  4. 完了状態を表示
取引
  1. 金額・宛先を入力
  2. 基本・詳細モードを選択
  3. 速度・手数料を設定
  4. 取引内容を確認
プロジェクトの成果
送受信、バックアップ案内、取引設定、共通のビジュアル基準を一つの体験にまとめました。バックアップは手順と完了をつなぎ、送信は同じフローで簡単な選択と細かな調整を両立しています。

得られる経験

デザインとユーザーリサーチに加え、Google Analyticsの活用とP2Pサービスの企画も経験しました。

現在、サービスは終了しています。当時設計した利用フローと成果物を紹介しています。