Daily UI #002 「Credit Card Checkout」決済画面

2日目のお題

2日目のお題は「Credit Card Checkout」
ということでクレジットカード登録に関連するUIデザインです。

お題に関連する業種を選択

スプレッドシートを使って今回のお題に関連する業種をランダムで選択しました。
引き当てた業種は「ファッション・アクセサリー・ジュエリー」

ということで業種から今回はアパレル系ECサイトのクレジット登録画面をデザインしていくことにします！

制作の流れ

簡易的なペルソナ設定

前回と同様ChatGPTでペルソナを設定しておきます。
簡易的なペルソナを設定することでユーザーが求めるものがわかるので、設定した方が意外と作りやすいです！

彼女がクレジットカードの登録画面で求めるもの

①安全性とセキュリティ
サイトの信頼性と安全性を求めている

②利便性と使いやすさ
支払い手続きが迅速で数クリックで支払いが完了するプロセスが良い
（ポイントを活用して、よりお得にショッピングを楽しみたい）

以上のペルソナを設定してデザインに入っていきます。

アパレル系ECアプリの調査

カートからクレジットカード支払いまでのプロセスを調査するため以下のアパレル企業アプリを調査しました。

• ユニクロ
• ZOZO
• GU

カートに商品を入れて購入手続きに進むと、配送の指定と支払い方法をまとめて1つのページとしているパターンが多くみられました。

UIデザインを作成

カートページ

カートのデザインはユニクロのアプリをベースにしています。

クーポンの表記

今回ベースにさせていただいたユニクロのデザインで気になった箇所が、使用できるクーポンの表記で「クーポン（1）」という文言です。

ブログのアーカイブで「2024年01月（3）」で見覚えがある人も多いのではないでしょうか？

今回デザインをするにあたって文言を下記に変更してみました。

「2枚のご利用可能なクーポンがあります」という表記で、ユーザーに対して具体的な情報や利用できるクーポンの枚数を表すことができます。
よく利用している？「DLサイト」で商品を購入でクーポンを勧める際に使用されていた文言です。

クレジットカード登録

注文手続きの集約

ペルソナの「利便性と使いやすさ」という求めに応じて、お届け日とお支払い方法を1つにまとめることで必要な情報を1度に入力できることで簡潔に注文手続きを進めることができます。

逆にデメリットとしては情報の過多になりがちなので、フォームをトグル形式でクリック時以外を格納することによりユーザーが求める情報に直感的にアクセスしやすくなるかと思います。

セキュリティコード

カード登録時に必須となるセキュリティコードの場所を説明するためのページをトグル形式で表示する形にしています。

開閉後は「閉じる」という文言でクリック後のアクションをはっきりとさせています。

まとめ

Daily UI 2回目のまとめです。

• 利用できるクーポンがあるのかないのか具体的な文言で示す
• 支払い手続きをなるべく簡単に済ませるために無駄な導線は減らして情報を集約する
• ボタンの文言にはその後のアクションをはっきりとさせる

Daily UI #002 「Credit Card Checkout」決済画面 プロトタイプはこちら ↓ ↓

今回の制作には4時間ほどかかりましたが、幅広い視点でデザインを調査することができるので、やはりDaily UIはやりがいがあります！

最後までご覧いただきありがとうございました！