Daily UIデザイン #027 支払い画面

おはようございます。

支払いってドキドキするし、イライラするし、とにかくエモーショナルになる瞬間だなと私は思います。エモいとは決して言えませんが、とにかくなんかしらの感情が動く時。

今日のお題はこちら。

クレジットカード入力の場面って結構ストレスフルだったりします。そんなストレスを解消できるようなデザインを作っていきます。

完成品はこちら

コンセプト

●ペルソナ 
・初めて決済アプリを使う
・25歳
・何事にも慎重
・都内在住
・キャッシュレス化したい
・ミニマリストに憧れ
・履いている靴はNewBalance

●機能面
・カードはカメラで読み込み
・フューチャー感

ユーザー課題の想像

・早く決済を済ませてしまいたい
・入力が面倒
・エラーが何かわからない時がある
・新しい支払い方法を体験したい

エラーが明確なUIは頑張ろうって気持ちになるので、今回は頑張ってエラー画面も作りました。

使ったフォント・色

●フォント
Grey…近未来な雰囲気のこのフォントをメインに。どうせ読まないような飾りの文字にGreyを使いました。
Montserrat…その他の読む必要のある文字にはこれを採用。

●色
ブルーがベースで黄色をアクセントカラーにしました。カードの色もフューチャー感を出すためにグラデ仕様にしています。

制作にあたっての工夫点

・支払い方法を複数登録できることを、複数枚カードを並べることで表現
・支払いが準備できたら「PAY NOW」のボタンの色がはっきりとした色に変わる
・エラーが起こったらすぐにトライできるように、エラー理由とタップして戻れるように導線を作った
・手入力の場合も一眼でわかるようにした

指紋認証やQRコード認証にしても、最初のステップとして必ずカードの入力は必須になるので、このカメラ読み取りタイプだと、実際に使っている身としても楽ですよね。このタイプの形式じゃないと、めんどくさいからやめとこって思った時も実際にありました。

いかにユーザーから煩わしさを取り除くってことが大切ですよね。

振り返ってみての改善点

・よくわからない背景になってしまった…
・エラー時の文字が背景色に負けて見えづらいかも。
・遠目で見ると、カード情報の文字色が見えづらい。

制作時間1時間30分　15分構想　1時間15分制作