制作期間
２週間半
プロセス
- 情報収集、共感、問題定義
- ターゲット設定、ペルソナシート作成、カスタマージャーニーマップ作成
デザインカンプ（紙）
デザイン作成（figma）
プロトタイプ作成
いろんな決済アプリを調査し、こちらのgoogleシートにまとめました。
https://docs.google.com/document/d/1xH5U6YehViBMgynMrxc1IXqrfAiLFVGOCoZq9dHi2FM/edit?usp=sharing
ペルソナ
ターゲットは20代前半の女性にしました。
基本的に女性は現金派が多く、女性でも使いやすい決済アプリとはどういったものが良いのか、そのデザインを考えてみようと思ったからです。
カスタマージャーニーマップ
デザインカンプ（ラフ）
UIフロー
ホーム画面
paypayのようなカード型UIではなく、origamiペイ・楽天ペイなどに使われているバーコードとQRコードが一緒に表示することができるUIデザインにしました。支払い時に必要なコードの情報を多くでも載せることができ、店員の方がスキャンしやすいなどの利点があると考えたからです。
コード拡大表示画面
●支払い方法がクレジットカードの場合
●支払い方法がウォレットチャージの場合
●支払い方法選択画面
支払い方法はモーダル画面にして支払い方法を選択できるようにしました。
コード読み取り画面
コード読み取りの際に同時にクーポンを選択させるのか迷いました。
ボタンのしたにエラーのポップ画面が表示される場合、エラーの内容に気が散ってしまいそうなので、以下のようにボタンを赤くしてみるようにしてみました。
ボタンのラインと文字を赤く表示してクーポンが選択されていないことを利用者に注意を促すことに考えが集中していたのですが、そもそも、コードを読み取ることに集中させた方がいいと思ったので、余計な気を散らさないよう優先順位が低い”クーポン適応ボタン”を無くし下の画面にしました。
クレジットカードの追加画面
参考記事
いろんなペイをさっとまとめた記事
https://jacketbuylife.com/service/pay-review01/1218
林先生初耳学キャッシュレスについて
楽天ペイ
origamiペイ
https://origami.com/origami-pay/
https://paynomi.com/origami-merit
https://appllio.com/how-to-use-origami-pay
paypay
https://mobilelaby.com/blog-entry-how-to-use-paypay.html
LINEペイ
https://mobilelaby.com/blog-entry-how-to-use-line-pay-and-card.html
決済アプリのマイクロインタラクション
https://note.tsumikiinc.com/n/nd24ddb19d5fa