UI/UXデザイナーのSaiです。
東京を拠点に、企業のプロダクトやサービスをより直感的で快適な体験へと導く設計を手がけています。
クライアント
楽天ペイメント株式会社
カテゴ リ
IoT
期間
3ヶ月
課題
1. ユーザー体験の向上とBluetooth接続による購買フローの最適化
2. ユーザーの購買行動と設計されたフローのズレを解消
3. 自販機の自動切断による購買体験の影響を防ぐ
役割
リサーチ、ユーザーフロー設計、プロトタイプ作成、ユーザーテスト
ペイメントアプリ x 自動販売機 UX設計
楽天ペイとBluetooth接続を活用した、自販機向けのスムーズで直感的な購入体験を実現するUXデザインプロジェクトです。
前期調査・準備
インターネットを活用して、市場における主要な自販機の情報や利用者の特性を調査し、CokeOnやPayPayなどの競合サービスにおける一般的な利用者の動向を把握しました。また、Bluetoothを利用してスマホと接続する際の要件や注意点についてエンジニアチームと詳細に打ち合わせを行い、自販機メーカーを訪問して操作の仕組みや利用プロセスを実際に観察しました。この取り組みにより、私たちのチームはユーザーの視点からサービス全体のプロセスをより深く理解することができました。
Research
デザインプロセス
1.
市場にある類似サービス（CokeON、PayPayなど）のユーザー体験、ユーザー層、使用シナリオを詳細に調査し、成功要素を取り入れる。
2.
自販機ユーザーの属性や行動特性をウェブ調査と企業調査データから分析し、明確なユーザー像を形成。
3.
エンジニアチームとBluetooth接続の技術要件を検証。接続トラブルや、通信状態を考慮した技術的制約を調べる。
4.
自販機メーカーを訪問して、どんな仕組みで動いているのか現場で直接確認。
成果
調査結果に基づき、明確なユーザーニーズと技術制約を把握し、プロジェクト初期段階の方向性を明確化した。
2次元コードを読み取り
商品選択
決済完了
ユーザーフロー設計
開発の初期段階において、メーカーから提供されたシステム仕様書と類似サービスのユーザーから得た情報を基に、迅速に初期のユーザーフローを作成しました。このフローは、ユーザーの理想的な行動に対する我々とメーカーの期待を反映したものでした。過去のIoTプロジェクトの経験から考えると、理論に依存するのではなく、実際のユーザーデータを活用して最適な解決策を見つけるために、早期に全体像が見えるものを作る必要があった。
Userflow
デザインプロセス
1.
UMLシーケンス図を活用し、ユーザーの期待行動と理想的な利用シナリオを迅速に可視化。
2.
技術的な制約（Bluetooth接続エラーや位置共有設定手順）を考慮し、実現可能な範囲でユーザーのストレスを最小化することを重視。
3.
エラー発生後のフィードバックではなく、事前の明確な説明と誘導を行うことで、ユーザーが迷わないよう工夫。
4.
接続切断を防ぐため、「自販機から離れないでください」「〇秒以内に商品をお選びください」など、事前の注意喚起を設置。
成果
ユーザーがどんなことを求めていて、技術的な制限は何があるのかがクリアになって、プロジェクト初期段階の方向性を明確化した。
技術的制約とプロセスの最適化
プロジェクトの進行に伴い、考慮すべき特殊なケースがいくつか浮上してきた。まず、Bluetooth接続に関しては、スマホの権限管理（位置情報の共有）や接続の安定性に関する技術的な制約が存在し、そのためユーザーが接続完了できない可能性がある。また、接続が成功した後、利用者は自販機から商品を選ぶか、スマホ側を通じて商品選択する可能性もある。これにより、開発コストが大幅に増加し、予算も制御が難しい要素が増える恐れがあった。
Optimization
デザインプロセス
1.
開発チームおよびプロジェクトマネージャーとの協議の結果、ユーザーが自動販売機で商品を選択するのほうが、ユーザーの習慣に適しており、リスク管理や初期開発コスト、予算の抑 制になると考えた。アプリ側の操作より、自販機側での操作に限定することで、開発リソースを最適化。
2.
自販機画面にアニメーションとテキストを活用し、ユーザーが直感的に自販機へ商品を選択できるよう視覚的に誘導。
成果
直感的でシンプルな商品選択方法を設計し、開発負荷を軽減しつつユーザー体験を向上。
*AIで生成されたイメージ画像です。
高忠実度プロトタイプ制作
IoTに関するプロジェクトであったため、ユーザーがスマートフォンを取り出し、カメラを起動し、QRコードをスキャンし、Bluetoothの設定や位置情報共有サービスの許可を行う一連の体験を、できる限りリアルにシミュレーションする必要がありました。このため、場当たり的な作業ではなく、ユーザーテストの際により正確なデータを収集できる再現性の高いプロトタイプを作成することが求められました。Protopieというツールに大変助けられました。
Prototype
デザインプロセス
1.
Protopieを利用して高忠実度プロトタイプを作成し、インタラクティブ性を考慮する利用体験を忠実に再現。
2.
スケジュールに合わせて、段階的にプロトタイプを進化させる。
成果
リアルな使用体験を事前に確認できる高品質のプロトタイプを提供し、ユーザーテストに効果的に活用。
ユーザーテストと改善
ユーザーテストを通じて仮説を検証し、開発途中で予期せぬユーザー行動や問題点を発見して対応することが必要であった。ユーザーテストを通じて、ユーザーの実際の購買フローは、当初設計されたフローと異なっているところが判明された。
・ユーザーは、まず商品を選んでから支払い方法を考える傾向がある。
・自販機の前で長時間商品を選ぶユーザーが多い。
行動パターンA
先に2次元コード
を読み取り
商品選択
決済完了
行動パターンB
先に商品選択
2次元コードを読み取り
決済完了
User Testing
デザインプロセス
1.
最初にスマートフォンを接続することを前提としたフローではなく、「商品を選択後に接続する」という流れにも対応する必要がある。
2.
時間経過後にリマインダー通知や軽いなバイブレーションを追加することで、接続が切断される前にユーザーへアクションを促す仕組みを導入した。
成果
予期せぬユーザー行動にも対応可能な柔軟な設計に改善し、ユーザー満足度を向上。