デザイナーのtorimizunoです。こちらはカンム Advent Calendar 2023、7日目の記事です。先日の記事はhikkyさんによるSecure W2で証明書を発行してEntra ID CBAを設定するでした。

はじめに

バンドルカードは2023年10月に Google Pay に対応しました。お買い物という日々利用されるシーンのなか、非接触でバンドルカードが使えるようになったことに気づいて迷わず使い始められるよう、デザイナーとして意識したことをご紹介いたします。

とにかく、気づきやすく

Google Pay に追加ボタンのレギュレーション上、カードが表示されている画面でのみ表示が可能となります。

当初はひとつ奥の階層となる「カード情報」に設置することも検討していました。しかし、お買い物先のサイトで既にカード情報を登録した方は、頻繁にカード情報を見ない可能性もあります。そのため、明細を見に行ったり、アプリを起動したときに誰でも気づけるよう、最終的にはホーム画面にボタンを設置しました。

明確に伝える

今までバンドルカードを実店舗で使いたい場合、リアルカードを発行する必要がありました。

Google Pay では、Visa のタッチ決済を利用してスマホひとつでコンビニやスーパーなどで買い物ができるようになるため、そのことが伝わるようにライティングを意識しました。

具体的には、「タッチ決済」だとカードのタッチ決済と含めて勘違いされる可能性もあるため、「スマホタッチ決済」という機能名でお伝えしています。

そのタイミングで知りたいことに絞って伝える

Google Pay の設定前と後で、知りたい情報と取るアクションは変わります。そのため、設定前では「何がどう便利になるのか」具体的にイメージできる情報に絞って伝えています。

設定後に起こすアクションはお店での支払いです。実際どこで、どう使うのかが知りたい情報となります。このマークがあるお店で使えることや、フィールドテストで自分たちが使い方に迷った、有人レジと無人レジでの使用方法をお伝えしています。

同じニーズに答える

Google Pay は「実店舗での支払いが可能になる」機能です。そのため、同じく実店舗での支払いが可能となる「リアルカード」を発行しようとしている方にも、便利となるものです。

リアルカードをいざ発行しようとしている方や、リアルカードを申請したけれど住所の不備等で却下されてしまった方にも、「早く実店舗で使いたい」と同じニーズがある可能性があります。

そういった方たちがカードの発行途中で、「これならすぐに実店舗で支払いができるようになる」新しい機能に気づけるような導線をご案内しています。

リリース後もつまづきを減らす

リリース後の経過観測で、 Google Pay の設定を終えても Google ウォレットからカードが削除されてしまう、という問い合わせがありました。

調査したところ、「 Android の画面ロックを解除した状態で設定を完了すると、セキュリティ上の問題で Google ウォレットからカードが削除される」という Google のセキュリティ機能があり、それに気づかず設定まで終えてしまう課題が発生していました。

数値的にも、設定を試みた方の15〜20%ほど、数としても数百件/1日この現象が発生していることがわかりました。（他の理由でのカード削除も含まれるため、すべてには該当しない）

そこで対応策として、画面ロック未設定の方に対して、設定に進もうとボタンを押したタイミングで、画面ロックの設定が必要なことをお伝えする打ち手を実施しました。

施策のリリース後、数値として10%以下まで数としても100件以下/1日に減少したことが確認できました。

おわりに

以上で一部抜粋にはなりますが、 Google Pay 対応の担当デザイナーとして意識した点のご紹介になります。

Google Pay のプレスリリース用の写真をチームメンバーで撮影したり、思い出深いプロジェクトとなりました。

また、今回文言まわりでレギュレーションがかなり厳格にあったため、AIを使って下記のようなプロンプトを書いてチェックを試したりしていました。

以下の文章をルールに沿って修正してください。

【ルール】
・ Google Pay の Google と Pay の間に必ず半角スペースをいれる
・文頭に Google Pay の単語がある場合、 Pay の後ろに半角スペースをいれる
・文中に Google Pay の単語がある場合、単語の前後に半角スペースをいれる
・文頭に Google ウォレット の単語がある場合、 Pay の後ろに半角スペースをいれる
・文中に Google ウォレット の単語がある場合、単語の前後に半角スペースをいれる
・文頭に Android の単語がある場合、後ろに半角スペースをいれる
・文中に Android の単語がある場合、単語の前後に半角スペースをいれる

【文章】
ここに推敲したい文章を入れる

AIについては他にPhotoshopで撮影した写真の不足部分を補うときに利用していますが、他にも試していきたいところです。

ここまで読んでくださりありがとうございました。