Daily UI #025 決済モーダル画面

おはようございます。

早くメキシコがキャッシュレスな世の中になってほしいと願う大善です。

今回のお題はこちら。

私もこういう支払いがワクワクするような世の中になってほしいなと思いますが、メキシコはインフラとかの関係で当面難しいそうです。

私自身、こういう支払いを初めて体験した時はワクワクしました。こういう雰囲気を思い出しつつ、制作していきましょう。

完成品はこちら。

コンセプト

●ペルソナ 
・キャッシュレス
・荷物少なめ
・Bluetooth
・コンビニへよく行く
・便利で効率重視
・ストリート系のおしゃれ

●機能面
・支払いに応じたポイント加算
・QRコード支払い

ユーザー課題の想像

・支払いが完了すると「使ってしまった」感がある
・逆にちゃんと支払いができたと言う「ほっとした」感

使ったフォント・色

●フォント
Poppins
読みやすいフォント、おなじみのPoppinsです。

●色
「未来の決済」ということで、バイオレットを基調にアクセントカラーとして黄色を追加。あと白と、ほぼほぼこの３色で制作。

カラーパレットを使って制作が楽しくなってきました。

制作にあたっての工夫点

・ゴールに向かってポイントが溜まっていることが分かる
・カラーパレットを３色だけに絞って制作できた
・支払いと履歴確認だけに絞ったシンプルな構造にした

振り返ってみての改善点

・決済のモーダル画面の情報が偏りすぎているので、間隔を開けることを意識する
・ポイントゲットの吹き出しがちゃっちい。作り込みすればよかった。
・何ポイントゲットしたか、見えづらい。

制作時間　1時間30分　20分構想　1時間10分制作