見出し画像

Daily Cocoda! 2周目に取り組んでみた 027

現在、UX/UIデザイナーとして就職を目指している仲田 光佑です!

今日もDaily Cocoda!のお題に取り組んでいきたいと思います。

今日のお題はクレジット情報の入力画面です。

027 クレジット情報の入力画面

まずはお題の確認をしていきたいと思います!

誰向け
はじめて決済アプリを使ってみる20代男性
コンセプト
手続きもお支払いもワンタップな決済アプリ
雰囲気
未来の支払いを体験しているような雰囲気
参考アプリ
PayPay
LINE Pay
Google Pay

今回はPayPayのランキング画面をトレースし、リデザインしたものを公開していきたいと思います。

PayPayのクレジット情報の入力画面のトレースと分析

PayPay(以下、ペイペイ)はスマホ一つでQRコードを読み取るあるいはバーコードを見せるだけで支払いができるサービスです。

現在ユーザー数は2800万人を越え、220万カ所以上の加盟店舗でサービスを利用することができます。

そんなペイペイのをクレジット情報の入力画面をトレースしたものがこちらです。

画像1

スクリーンショット 2020-04-20 17.56.51

※このトレースは2020年5月時点のものです。
※画像の数値はスクショの数値なので、実際の数値と違う場合があります。

ペイペイでクレジットカードを登録する場合は、2つの方法があります。1つは上記のトレースのように手動でカード情報を入力する方法です。「カード番号」「有効期限」「セキュリティカード」の三項目を入力すれば、カードを登録することができます。入力する項目が少ないので、ユーザーはすぐにカードを追加できそうです。

もう1つはカメラでスキャンしてカード情報を読み取る方法で、ペイペイの場合はカードを登録する場合、以下の画面が表示されます。

画像3

※こちらはスクショしたものをトレースしたものですが、時間短縮のため、数値は入力していません。

ユーザーが所持しているカードをカメラの枠内にはめ込めば、すぐにカード情報を読み取り、追加することができるので非常に便利な機能だと思います。

競合のクレジット情報の入力画面

競合の調査として、今回は2つのアプリを調査しました。今回のお題の参考アプリの1つであるLINE Payとメルペイです。
※Google Pay は私がiPhoneユーザーなので、ダウンロードできませんでした。

ペイペイを含めたクレジット入力画面はこちらです。

027 競合比較@3x

※LINE Payとメルペイはスクショです。

クレジット入力画面は入力する項目が決まっているため、共通点が多いです。具体的には感じたのは以下です。

・カード番号の横にカメラのアイコンを設置して、カード情報をスキャンしてもらうようにしている
・ボタンはすべての項目を記入するまで押せなくっている

しかし、ペイペイとLINE Payとメルペイの違いがあるとすれば、ペイペイは他の2つとは異なり、最初にカメラを使い、カード情報をスキャンしてもらう設計にしていることです。

この設計の違いはペイペイがスピードを重視しているからだと思われます。

以下のメッセージはPayPay株式会社の採用情報のLPを引用したものです。

Be a Rockstar

PayPay(ペイペイ)株式会社は、2018年10月5日にバーコードやQRコードを使って決済ができる新たなスマホ決済サービス「PayPay」をローンチしました。
わたしたちの最大のライバルは“現金”です。

この困難な課題に前向きに取り組み、他社に真似できない圧倒的なスピードでプロダクトを磨き上げ、日本のキャッシュレス決済の普及を一気に推進することにプロフェッショナルとして取り組むことができる方を募集します。

引用元

このメッセージからペイペイはサービスとプロダクト開発においてスピードを相当重視していることが考えられます。

実際に、PayPayは公式サイトのLPで

登録は無料!最短1分
お支払い方法も選べます
ご利用の登録は簡単な操作で最短1分で完了!
お支払い、チャージ方法も豊富です

というメッセージがありました。

また、開発においても、プロダクトブログでもスピードを重視したデザインプロセスを掲げています。

PayPayアプリのデザイナーがスピードを保つために大切にしていること

・とにかくスピーディーに数多くの機能をリリースする
・リリース後改善する

引用元

このことからペイペイがサービスにおいてとにかくスピードを重視していることがわかると思います。そのため、ペイペイのクレジット入力画面は最初にカメラのスキャンを表示し、サービス利用までのスピードを上げるようにデザインしていると考えられます。

リデザインの方向性

ペイペイのクレジット入力画面のトレースと分析を終え、ターゲットに合わせたリデザインの方向性を決めました。サービス側からすれば、カードをカメラでスキャンしてもらいたいところが本音だと思います。しかし、今回のターゲットは「はじめて決済アプリを使ってみる20代男性」なので、「カード情報をカメラでスキャンする」ことに抵抗があるかもしれません。
※ペイペイはこうしたユーザーを想定しているのか、ボタンを配置し、手動での入力もできます。

そのため、今回のリデザインではカード情報を手動で入力した場合のリデザインを考えました。

ペイペイのラクレジット情報画面のリデザイン

完成したリデザインがこちらです。

画像5

比較したものがこちらです。

ペイペイ比較@3x

銀行口座の入力形式に

リデザインではクレジットカードの情報入力をカードの形式に変更しました。ペイペイではクレジットカードの他に銀行口座の登録もできます。メンタルモデルを合わせるために、クレジットカードの入力も銀行口座と同じ、カード形式に仕様を変更しました。

paypay 三井住友 口座@3x

※上記の画面はスクショです。

銀行口座で登録内容を入力する場合、支店、口座番号、名義、生年月日をテキストフィールドに打ち込み、項目が反映される仕組みになっています。しかし、項目ごとに一回一回に画面が切り替わると、ペイペイのUIの特徴であるスピードを実現することが難しくなってしまいます。

リデザインではカードのオブジェクトだけで入力を完了できるようにし、スピードを重視したデザインにしました。

おわりに

次回は028 404ページのトレースとリデザインをこのnoteに書いていければと思います!

noteを読んでいただき、ありがとうございます!


この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
3
Cocoda!のポートフォリオ→https://cocoda-design.com/KN619
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。