管理画面大好き人間が初めて管理画面をリニューアルした話
スマートキャンプデザインブログです。
今回は、デザイン/開発をやっている葉栗が書きます。
スマートキャンプ運営の「法人向けSaaSの比較サイト - ボクシル」の管理画面の一部を大幅にリニューアルしたので、その時に考えた想いや学んだことについてまとめました。
BtoBサービスは管理画面が重要
BtoBのWebサービスは情報を管理することを目的としているサービスが多いため、管理画面の設計はユーザーの業務効率に直結します。
大切だとわかっていながらも、どこか意識として「裏側の設定だから後回しでいいか」と手を付けられない企業も多くあるようです。
ボクシルの管理画面の実態
ボクシルはユーザーとSaaSをマッチングをするサービスですが、そのSaaSを掲載している会社（以下ベンダー）の管理すべき情報が増えてきました。
例：見込み顧客情報、検討度合い、アンケート項目......
ユーザーにとってはたくさんのサービス情報が満載で、それらを比較しやすいようなページが重要です。
しかしベンダーにとっては、管理画面も重要なページです。
特にリード（見込み顧客）情報を管理するためのページ「リードリスト」は、ベンダーがボクシルで得たリードをうまく商談化するために、見やすく、管理しやくなっている必要があります。
リードリストとは
リードとは、見込み顧客のことです。その見込み顧客の情報を管理できるページをリードリストと呼んでいます。
そのため「リードリスト」を集中的にリニューアルすることにしました。
先ほども少し書きましたが、ボクシルはベンダーがサービスの情報を掲載し、それをユーザーが比較・検討した結果、気になるサービスの資料をダウンロードすることができるプラットフォームです。
ユーザーが資料をダウンロードした時点で、リードとしてベンダー側にユーザー情報が提供されます。
ベンダーはその情報をもとに、リードへアプローチをしていき、顧客へとしていくきっかけとなるのがボクシルです。
この、自社サービスにおけるリードの情報を一括で閲覧・管理できるのがリードリストになります。
このリードリストは、ボクシルにおいて事業を支える大切なページです。なのに、あまりメンテナンスがされておらず、今後も機能拡張や使いやすさを向上をしていくときに、このままでは耐えられないということで全面リニューアルをすることになりました。（他にも大きい理由は多々ありますが...）
リニューアル前の画面
最初に、何がどのように変わったのかをお伝えします。
リニューアル前の画面
※画面はサンプルデータの表示
リード情報として提供できる情報を並べ、リスト化しています。
もともとは情報が少なくすっきりとしていましたが、機能追加や改善を重ねるたびに提供する情報が増え、ひとつひとつのリード情報が肥大化していきました。
リード情報の肥大化はベンダーが確認しづらいだけでなく、社内のセールスチームもでした。今回のリニューアルは両者の業務改善の意味もあります。
リニューアル後の画面
リニューアル後の画面
※画面はサンプルデータの表示
ガラッと変わったのがお分かりでしょうか。
最も大きい変化としてわかるのは、カード型からリスト型への変更です。
リニューアルした理由や思惑
リニューアル前は提供できる情報のすべてをカードに載せていた状態で、一覧として見るという側面では便利ではありました。
一方で情報にあふれてしまい、今知りたい情報へのアクセスが困難な側面がありました。
そこで、「本当にこの画面で必要な情報は何か？」をヒアリングし続け、必要最低限と思われるギリギリのところまで情報を削ぎ落とした結果、リスト型への変更が良さそうだという判断になったからです。
もう少し詳しく、そのときの思惑を説明していきます。
思惑1：複数の情報群にはハーフモーダルがよいのでは？
関係者にヒアリングした結果、リードリストでははじめに「誰がどのサービスを資料請求して、どんな状態かが分かる」ことが重要だと分かりました。
この「どんな状態かが分かる」ようにするために、今まで掲載していた詳細な情報を、すべてハーフモーダル（右側からスライドして出現）で表示するように変更しました。
またベンダーやセールスのよくある振る舞いを調べた結果は「複数のリード情報を行ったり来たりする」ことでした。
改善前では大きくスクロールをする必要もあるし、1画面に1リード分の情報しか表示されないので、複数のリードを渡り歩くような動きに適していないことがわかります。
このような背景から「ハーフモーダルが良さそうだ」となりました。
思惑2:ステータス表示ってどうあるべき？
ステータス管理を追加することが要件としてありました。
ステータスとは、リードに対してどのようなアクションをとったか進捗を記録しておくものです。
改善前は、リードへのアプローチの際に、ベンダーの誰がどのようなアクションをしたかわからない状態でした。
まずはさまざまな案を考えるところからはじめました。
最初の案
今までのデザインに機能をそのまま追加してみたパターン。やっぱりこのままではダメだなと感じました。
そこで、「一覧として見せる情報」と、「詳細として見せる情報」をページごと分けようとしました。
一覧として見せる情報のページ
詳細として見せる情報のページ
以前のデザインを踏襲しつつ、少し整理してより見やすくする方向で考えた案になります。
関係する方々にこの段階で確認して、「見やすくなって良さそう！」とのことなので、この形をベースにブラッシュアップして行くことに決めました。
一覧として見せる情報のページ（改）
詳細として見せる情報のページ（改）
全体の構成やリストの並べ方を調整して、「これでどうでしょうか！」と説明をしました。
「おぉいいじゃん！これで行こう！」と、OKがでました。
これで実装も進めていくことになりました。
...
ただ、自分では良いと思っていたものの、どこか引っかかる部分があり、「本当にこれでいいのか？」と懐疑的になってしまいました。
もう一度、デザインやヒアリングしたことを見直してみることにしました。
過去のデザインを一度リセットして、ゼロベースで考えることからはじめました。使う人の意見を聞いたうえで、良いと思うデザインを実際に作ってみました。そしてたどり着いたのが……
「実は、カード型でなくてもいいのではないのか？」でした。
結果が冒頭や思惑1でも説明した、以下のようなデザインです。
再掲となりますが、カード型からリスト型に変更して、詳細情報はハーフモーダルにしたデザインです。
実際に提案したところ「一覧で見える情報が減ったけど本当に大丈夫か？」という不安の声がありました。
ヒアリング結果に立ち戻り、ここで見せるべきは「誰がどのサービスを資料請求して、どんな状態かが分かる」ことが大切です。
そのため、以下の情報だけを出すことにしました！
誰が：名前、会社名
サービス：サービス名
状態：導入時期、（リード）購入状況、（リード）対応状況、（リード）最終発生日
それ以外の情報は詳細のハーフモーダルで閲覧・操作ができるようにしています！と説明をしました。
たどり着いた答え:
一覧は最低限の情報で、詳細はページ遷移せず見せる
この答えにたどり着き、このハーフモーダルのデザインを提案したところ、「それなら確かに、こっちのほうが良さそう！！」と社内からフィードバックをもらいました。
急きょ、デザインを変更することになりました。
「何が価値で、その価値を提供できるのか」という考え方
今までは「ユーザーはどうすれば使いやすいか」「ユーザーにとっての価値は何か」を追求していきました。
このリニューアルを通して、さらに一歩先である「考えた価値をユーザーに正しく伝えられるか」追求する視点が重要だと分かりました。
「この機能を作れば便利（価値になる）」というところを突き詰めるのは、エンジニアとしてやっている以上は重要だと思いますが、さらにデザイナー目線で「この機能の便利さ（価値）は100%伝わるのか」というのも重要だと感じました。
（そのような試行錯誤の結果、2018年8月28日に無事リリースすることができました！）
管理画面が大好きだから伝えたいこと
リニューアルは半年前の出来事ですが、このデザインブログを作ったときに、このリードリストリニューアルのことはずっと書きたいと思っていました。
要件が複雑で大変だったのですが、管理画面大好き人間としては冥利に尽きる思いでした。そんな私が思う「よい管理画面とは」について最後にまとめたいと思います。
私の考える「よい管理画面」とは
1. 目的に沿った情報がまずはひと目で分かること（一覧化・概要化がされている）
2. さらに詳しく知りたい人は、詳しく知ることができる（一覧との切り分けなどが上手にされている）
スケジュールの関係もあって、まだまだ足りない部分があります。
今回のリニューアルの経験をもとに、よりよい価値を提供できるようになっていきます！
さいごに
今回のプロジェクトの責任者でもある方にリリース後に、
今でも忘れない現デザインの提案…！「こっちの方がいいと思います」といって見せられた画面が今までの画面と全然違うのにめちゃめちゃ良いというのに驚きました。
と言ってもらえてとても嬉しかったです！急な提案を良いねと言っていただきありがとうございます！
また、一緒に開発をやった笹原さん、急な変更だったけど、「絶対こっちのほうが良いよ」と後押しをしてくれてありがとうございます！！
今回紹介したプロダクトのボクシル
弊社では、BtoBデザイナーのインターンを募集しています！
スマートキャンプのデザインブログとは
WRITER : 葉栗 雄貴 ( SMARTCAMP / Designer & Engineer )
EDITOR : Yuta Morishige ( SMARTCAMP / Designer / @MorishigeYuta )
あなたのサポートがデザインブログ更新の意欲になります！いただけたらブログの中で恩返しできればと思います！