BASEでUIデザイナーをしているイシグロです。
今年の9月に、BASEから「BASEカード」という新機能をリリースしました。
これまではネットショップでの売上は、ショップオーナーご自身の銀行口座へ振込申請を行っていただき、振り込みされるのを待って利用してもらう流れだったのですが、「BASEカード」を使うことによって振込をせずともすぐに使えるようになりました。
「BASE」のお金の流れの体験を大きく変えるこの機能開発の裏側では、「情報設計」が大きな鍵となっていました。
今回は、担当デザイナーの私目線で、この機能開発のプロセスやポイントを振り返ってみようと思います。UIデザイナーのみなさんやフロントエンドエンジニアのみなさんなど、「情報設計」に関わる方々にお役に立てるものになると嬉しいです。
「BASEカード」は、2020年8月ごろから動き出したプロジェクトです。
もともと、「ショップオーナーの潜在的な資金繰りの課題発生を防ぎ、スムーズな経済活動をサポートする」ことを目的に、2020年当初から構想されていました。
BASEカードで提供したいスムーズなキャッシュフローのイメージ
機能面では、バーチャルカードの発行から、ご利用可能額の確認、その他本人確認(eKYC)フローなど、一連の「BASEカードを使ったお金の管理」ができるようになっています。
お金管理画面からのBASEカード導線
BASEカード情報を参照するための画面
ここからは、主にUIデザイン面について、どのような流れで今の形に至ったのかについて振り返っていきます。
「BASEカード」の開発は以下のような体制で進めていきました。長期に渡るプロジェクトのため人数は流動的でした。デザイナーは私がUIを担当し、もうひとりは「BASEカード」の券面やLPのデザインを担当しています。
・PM：1名
・デザイナー：2名
・エンジニア：3~6名
これまでの機能改善や、ショップ運営をさらに便利にするための「BASE Apps」 の新機能開発とは違い、今回は「BASEカードという新しい体験を既存サービスに加える」ものであったため、定型的な進め方はありませんでした。
ひとまず、実現したい機能要件は固まっていたので、ざっくりとした機能の流れを、ワイヤーレベルで可視化してみます。
また、同時進行で、「BASEカードでは、どんな体験が大事なのか？」をFigma上にブレスト的に書き出していきました。
「不正利用防止のために、パスワードを設定してもらう」など、体験レベルではもちろん、UI上も考慮するべきポイントが多くあったので、懸念点はすべてFigma上に書き出しました。
ワイヤーレベルで、大枠の流れができたら、画面の詳細をどんどん詰めていきます。
入り口の体験となる「お金管理画面のUIデザイン」から着手していきました。
お金管理画面の改修の途中経過
BASEカード画面の途中経過
ビジュアルを詰めていく上で、多く話題に上がったのが「おくべき情報の整理」についてでした。
例えば、この本人確認(eKYC)を促す導線について。
本人確認導線のUIの初期バージョン
「BASE」の管理画面内では、主にショップのステータスに合わせてショップ運営に必要な情報とアクションを表示していますが、今回の本人確認に関する情報はユーザーに対してメリットがあることを訴求するような「BASEからの案内」に近いものになってしまっていました。
そこで、マネージャーの小山さんから「情報のタイプが違うものが同じUIで並列に並ぶのは、管理画面としては違和感がある」とレビューいただきました。
「BASE」には160万ものショップがあります。また、ショップオーナーにも初心者の方からリテラシーの高い方、個人や法人、売上規模の大小など多様な方々がいます。
そのため、これだけ重要な機能では特に「誰でもかんたんに使えるかどうか」を非常に重視しています。
多くの人にとってはまだ馴染みがないであろう本人確認(eKYC)に関しても、誰もが違和感なく使えるようにブラッシュアップしていきながら、以下のように、アップデートしました。本人確認のメリットを訴求してアクションを起こしてもらうのではなく、ショップオーナーが何のためにアクションするのかに着目して見せ方を変えました。
具体的にはボタン文言を「本人確認をする」ではなく「ご利用可能枠を増額する」に変更し、それに伴うメリットなどはモーダルウィンドウ内に記載することで管理画面としてはスッキリしました。
「本人確認」は「ご利用可能枠の増額」へ変更し、よりユーザーのしたい行動に。
本人確認をすることで得られるメリットはモーダルへ
本人確認のUIと同様に、その他の画面に関しても一貫して「多様なユーザーが、迷わず使えるか」の観点でレビューをもらっていました。
こちらは、「BASEカード」のリリースに合わせたキャッシュバックキャンペーンへ遷移してもらうためのUIです。
もともとはご利用可能額の部分にキャッシュバックへの導線を設置していた
当初はキャンペーン特設サイトへの遷移を目的にしていました。
しかし、「そもそも一度BASEカードを使ったショップオーナーがキャンペーンの特設サイトに何度もアクセスするのは微妙なのではないか？」とのレビューをもらい、方向修正。
多様なユーザーを考慮しないといけない状況で、「体験としてどうか」に対してレビューをいろんな方からいただけたのは、非常にありがたかったです。
キャッシュバック導線に関しても、レビューを受けて以下のように改善しました。
「BASEカード」の画面は本来、ショップオーナーが「BASEカード」を使ってお買い物をする時にカード番号などを確認するための画面なので、そのメインの役割ではない情報を大きく出すことに抵抗があったのですが、とはいえキャッシュバックというショップオーナーにとってメリットのある情報が分かりづらいのも避けたかったので、「目立たせたい、でも邪魔にならない。」という見せ方のバランスが難しかったです。
結果として、特設サイトに飛ばずともキャッシュバック金額を確認できるようにしたり、キャッシュバックと利用可能額は厳密には違うため、混乱を招かないためにセクションを分けたりと改善がされました。「BASE」の管理画面は「シンプルで高機能」が求められるので、結果だけ見ると何て事なさそうに見えますが、こういった苦悩を経て今の「BASE」が出来上がっています。
こうして、「BASEカード」は今の形にできていきました。
BASEデザインチームのメンバーやPMからの、多角的なレビューにたくさん助けられた新機能開発でした。全員がプロダクト目線で「体験はどうか」「ユーザーは迷わないか」の視点を持ちながら、細部の情報設計や導線にレビューをくれたことは、非常に感謝しています。
また、多様なユーザーがいる「BASE」のようなサービスでは特に、情報設計の重要さや面白みを感じました。
・情報の属性
・情報の量
・情報の優先度
などをうまくコントロールすることが、「BASEカード体験」ひいては「BASEでのユーザー体験全般」に影響してくることを実感を持って経験させてもらいました。
デザイナーという職種であることはもちろんですが、職種を超えてプロダクトづくりへの愛やBASEというサービスへの思い入れを再確認できたタイミングでもありました。
今後もプロダクトのデザインについて、機会があれば発信していこうと思うのでお楽しみに。
