デフォルト

ブランドの定義

ディレクション

制作物の品質向上

制作/依頼フローの整備

サービスサイトやLP制作

ロゴ制作

ノベルティ・グッズづくり

広告・グラフィック

イベント企画

動画・映像制作

資料やスライドの作成

コムデチームづくり

その他

コミュニケーションデザイン

サービスとユーザーのさまざまな接点をデザインする

体験の可視化・言語化

ユーザーの声をプロダクトに変換

機能・仕様の決定

デザインとエンジニアリングをつなぐ

改善の仕組み

UIデザインやそのプロセス

プロダクトデザイン

ユーザーがプロダクトをうまく使って、目的を達成するためのデザイン

職種をまたいだ仕組み

チームの立ち上げ・拡大

チームの体制整備

カルチャーの浸透・定着

組織デザイン

社内のメンバーが、よりよく動けるための仕組みづくり

はじめる

継続的な運用

デザインシステム

リサーチ－ユーザーの求めるものを可視化し、サービスに落とし込む

ユーザー像の明確化

プロダクト改善のリサーチ

ユーザーリサーチ

組織やプロダクトでのデザインの基準を統一する

社内の巻き込み

プロダクトへの反映

アクセシビリティ

すべての人がサービスやプロダクトを利用できるように

世の中に価値を届けたい人々の想いを、デザインの力で後押しする。
BASEでショップを開設・運営している「オーナーズ」のチャレンジを支えるための、デザインチームの取り組みをお届けします。

BASEについて

技術、デザイン、プロダクトマネジメントに関するブログ

BASE PRODUCT TEAM BLOG

私達と一緒にBASEをデザインしていきませんか？

採用情報

BASEデザインチーム

BASEでUIデザイナーをしているイシグロです。

今年の9月に、BASEから「BASEカード」という新機能をリリースしました。

BASE株式会社のプレスリリース（2021年9月21日 15時00分）ネットショップの売上金を使って直接お支払いが可能に！BASEがVISA加盟店で売上金を使える[BASEカード]の発行受付を9月21日より開始

ネットショップの売上金を使って直接お支払いが可能に！BASEがVISA加盟店で売上金を使える「BASEカード」の発行受付を9月21日より開始

これまではネットショップでの売上は、ショップオーナーご自身の銀行口座へ振込申請を行っていただき、振り込みされるのを待って利用してもらう流れだったのですが、「BASEカード」を使うことによって振込をせずともすぐに使えるようになりました。

「BASE」のお金の流れの体験を大きく変えるこの機能開発の裏側では、「情報設計」が大きな鍵となっていました。

今回は、担当デザイナーの私目線で、この機能開発のプロセスやポイントを振り返ってみようと思います。UIデザイナーのみなさんやフロントエンドエンジニアのみなさんなど、「情報設計」に関わる方々にお役に立てるものになると嬉しいです。

「BASEカード」は、2020年8月ごろから動き出したプロジェクトです。

もともと、「ショップオーナーの潜在的な資金繰りの課題発生を防ぎ、スムーズな経済活動をサポートする」ことを目的に、2020年当初から構想されていました。

ネットショップの売上がすぐに使える。BASEカードは、全国のVisa加盟店でBASEの売上が無料ですぐに使えるカードです。

BASEカード｜ネットショップの売上がすぐに使える

機能面では、バーチャルカードの発行から、ご利用可能額の確認、その他本人確認(eKYC)フローなど、一連の「BASEカードを使ったお金の管理」ができるようになっています。

ここからは、主にUIデザイン面について、どのような流れで今の形に至ったのかについて振り返っていきます。

ワイヤーに落としながら、要件と体験を明確に

「BASEカード」の開発は以下のような体制で進めていきました。長期に渡るプロジェクトのため人数は流動的でした。デザイナーは私がUIを担当し、もうひとりは「BASEカード」の券面やLPのデザインを担当しています。

これまでの機能改善や、ショップ運営をさらに便利にするための「<a href="https://apps.thebase.in/">BASE Apps</a>」 の新機能開発とは違い、今回は「BASEカードという新しい体験を既存サービスに加える」ものであったため、定型的な進め方はありませんでした。

ひとまず、実現したい機能要件は固まっていたので、ざっくりとした機能の流れを、ワイヤーレベルで可視化してみます。

また、同時進行で、「BASEカードでは、どんな体験が大事なのか？」をFigma上にブレスト的に書き出していきました。

「不正利用防止のために、パスワードを設定してもらう」など、体験レベルではもちろん、UI上も考慮するべきポイントが多くあったので、懸念点はすべてFigma上に書き出しました。

機能のための情報 vs 案内のための情報

ワイヤーレベルで、大枠の流れができたら、画面の詳細をどんどん詰めていきます。

入り口の体験となる「お金管理画面のUIデザイン」から着手していきました。

ビジュアルを詰めていく上で、多く話題に上がったのが「おくべき情報の整理」についてでした。

例えば、この本人確認(eKYC)を促す導線について。

「BASE」の管理画面内では、主にショップのステータスに合わせてショップ運営に必要な情報とアクションを表示していますが、今回の本人確認に関する情報はユーザーに対してメリットがあることを訴求するような「BASEからの案内」に近いものになってしまっていました。

そこで、マネージャーの<a href="https://basebook.binc.jp/entry/2021/03/03/180000">小山さん</a>から「情報のタイプが違うものが同じUIで並列に並ぶのは、管理画面としては違和感がある」とレビューいただきました。

「BASE」には160万ものショップがあります。また、ショップオーナーにも初心者の方からリテラシーの高い方、個人や法人、売上規模の大小など多様な方々がいます。

そのため、これだけ重要な機能では特に「誰でもかんたんに使えるかどうか」を非常に重視しています。

多くの人にとってはまだ馴染みがないであろう本人確認(eKYC)に関しても、誰もが違和感なく使えるようにブラッシュアップしていきながら、以下のように、アップデートしました。本人確認のメリットを訴求してアクションを起こしてもらうのではなく、ショップオーナーが何のためにアクションするのかに着目して見せ方を変えました。

具体的にはボタン文言を「本人確認をする」ではなく「ご利用可能枠を増額する」に変更し、それに伴うメリットなどはモーダルウィンドウ内に記載することで管理画面としてはスッキリしました。

レビューも常に「誰でも使えるか」目線で、体験からUIまで一貫しておこなう

本人確認のUIと同様に、その他の画面に関しても一貫して「多様なユーザーが、迷わず使えるか」の観点でレビューをもらっていました。

こちらは、「BASEカード」のリリースに合わせたキャッシュバックキャンペーンへ遷移してもらうためのUIです。

当初はキャンペーン特設サイトへの遷移を目的にしていました。

しかし、「そもそも一度BASEカードを使ったショップオーナーがキャンペーンの特設サイトに何度もアクセスするのは微妙なのではないか？」とのレビューをもらい、方向修正。

多様なユーザーを考慮しないといけない状況で、「体験としてどうか」に対してレビューをいろんな方からいただけたのは、非常にありがたかったです。

キャッシュバック導線に関しても、レビューを受けて以下のように改善しました。

「BASEカード」の画面は本来、ショップオーナーが「BASEカード」を使ってお買い物をする時にカード番号などを確認するための画面なので、そのメインの役割ではない情報を大きく出すことに抵抗があったのですが、とはいえキャッシュバックというショップオーナーにとってメリットのある情報が分かりづらいのも避けたかったので、「目立たせたい、でも邪魔にならない。」という見せ方のバランスが難しかったです。

結果として、特設サイトに飛ばずともキャッシュバック金額を確認できるようにしたり、キャッシュバックと利用可能額は厳密には違うため、混乱を招かないためにセクションを分けたりと改善がされました。「BASE」の管理画面は「シンプルで高機能」が求められるので、結果だけ見ると何て事なさそうに見えますが、こういった苦悩を経て今の「BASE」が出来上がっています。

情報設計は「シンプルにすればいい」わけではない

こうして、「BASEカード」は今の形にできていきました。

BASEデザインチームのメンバーやPMからの、多角的なレビューにたくさん助けられた新機能開発でした。全員がプロダクト目線で「体験はどうか」「ユーザーは迷わないか」の視点を持ちながら、細部の情報設計や導線にレビューをくれたことは、非常に感謝しています。

また、多様なユーザーがいる「BASE」のようなサービスでは特に、情報設計の重要さや面白みを感じました。

などをうまくコントロールすることが、「BASEカード体験」ひいては「BASEでのユーザー体験全般」に影響してくることを実感を持って経験させてもらいました。

デザイナーという職種であることはもちろんですが、職種を超えてプロダクトづくりへの愛やBASEというサービスへの思い入れを再確認できたタイミングでもありました。

今後もプロダクトのデザインについて、機会があれば発信していこうと思うのでお楽しみに。

多様なユーザーがいるBASEのようなサービスでは特に、「情報の属性」「情報の量」「情報の優先度」などをコントロールすることが、「BASEでのユーザー体験全般」に影響してきます。多くの人にとってはまだ馴染みがないであろう本人確認機能でも、誰でもかんたんに使えるかどうかを重視して見せ方を変えました。

デザインケース

デザインチーム

フォーラム

デザインケース

BASEカードで目指した、幅広いユーザーに応えるための情報設計

このチームのデザインをもっと覗く

BASEデザインチーム

BASEについて

BASE PRODUCT TEAM BLOG

採用情報