ビザスクのプロダクトデザイナーの市村です。「ビザスクlite」以外のフルサポートサービスを活用するクライアントが利用するプロダクト「クライアントポータル」を2023年10月にリニューアルしました。
ビザスクには、有識者に直接インタビューを行えるビザスクinterview、24時間以内に有識者から回答が返ってくるビザスクnow、オンラインアンケートのビザスクexpert surveyなど、いくつもサービスがあります。
クライアントポータルは、これらの複数のサービスをお客さまが迷いなく選び活用できるようにするためのポータルサイトです。しかし、これまでサイト内の情報はうまく設計されておらず、お客さまに学習コストが大きくかかってしまっていました。
その解決のために取り組んだ「コンポーネントの統一」「全体の導線設計の見直し」についてまとめてみます。
ビザスクの「クライアントポータル」は、ビザスクの複数サービスの利用をサポートする法人向けのポータルサイトです。
元々クライアントポータルは、ビザスクの1時間のインタビューサービス(現: ビザスク interview)を法人側で管理するためのプロダクトでした。
そこから、「ビザスク now」「ビザスク expert survey」など関連サービスが増加していく度に、つぎはぎに導線の追加を繰り返していったことで、クライアントポータルはどんどん複雑なプロダクトになってしまっていました。
ビザスクでは非常に多くのサービスを提供しています。それらをまとめたクライアントポータルでは、お客さまが必要とするサービスに迷いなく辿り着けるようにすることが必要です。
しかし、リニューアル前はうまく情報が整理されておらず、お客さまを迷わせてしまっていました。
そこで、リニューアルでは、情報設計を分かりやすくし、お客さまの学習コストを下げることで、サポートがなくともお客さまの行動が起こるようにすることを意識しました。
具体的には、以下の2つに取り組んでいます。
全体の導線設計の見直し
コンポーネントの統一
これまでクライアントポータルでは、全体の導線設計が分かりづらく、特定サービスの特定ページにのみアクセスが偏っていました。
今回のリニューアルでは、「マルチプロダクトへの導線を強める」というクライアントポータルの目的を踏まえて、目的に合わせた遷移が起こりやすいように意識しています。
例えば、以前のトップページでは、複数のサービスが並べられていましたが、一覧性は低く、自分に合うサービスが何か分かりづらいため、お客さまは慣れているサービス以外を使うハードルが高い状態でした。
全てのサービスは掲載されておらず、自分に合うサービスがわかりづらかったり比較して利用を検討しづらい
リニューアルしたクライアントポータルでは、2つの改善をしています。
1つ目は依頼フォームの導線についての改善です。「依頼する」のボタンをクリックするとサービス一覧ページに遷移して、サービスごとの比較を行えるようにしました。
また、「依頼の相談」という、カスタマーサポートへの相談が起こる導線を新たに追加し、お客さまの入力負荷を下げながらベストな選択肢に辿り着きやすくなるように改善しています。
サービス全体の一覧性を高め、どのサービスが適切か分からない人でもベストな選択肢に辿り着けるよう「依頼の相談」という導線も追加
2つ目は、複数サービスの体験統一を目的とした導線設計です。
複数のサービスを包括しているサイトとして、各サービスごとの体験を揃えて、別サービスを利用した時の操作に迷わないようにするために、ホームページでの一部案件表示、案件一覧ページ、それら2つから遷移できる案件詳細ページという形で導線とサイトマップを揃えました。
案件詳細から先はそれぞれのサービスごとの独自の体験になりますが、まずはどのサービスも入り口で迷うことはない設計を目指しました。
カラーの設計ルールを明確かつ厳密にすることで、どのコンポーネントが表示されていたら、どういった情報なのか、どういったことをしなくてはいけないのかをユーザーに効果的に伝えられるようにしました。
すでに、別のデザイナーがビザスクのブランドカラーを反映したデザイントークンを別プロダクトのために用意していたため、これを元にセマンティックカラーを選別し、クライアントポータルに適応させていきました。
これらを、プロダクトの中で秩序を持って扱えるようにするために、カラーの使い方も決めた上で、コンポーネントを含めたデザインに反映していきました。
リニューアル中についてはカラーを含めた全てのガイドラインは私個人の中にしか存在しておらず、非常に属人的な状態でしたが、リニューアルを終えてから少しずつその言語化を進めています。
コンポーネントに関してはAtomic Designの分類 (atoms, molecules, organisms) にならって作成しましたが、各コンポーネントごとに選定基準が生じうるため、それぞれのコンポーネントに合わせて色の扱いも定義していきました。
色別に分けたコンポーネントごとに、重要度の高低と、利用場面を明示している
「重要な情報...青」「少しだけ役立つ情報...グレー」と、利用用途別にカラーを設定
「ポジティブ...緑」「注意喚起...黄」「注意指摘...赤」と設定し、アラートを確実に見てもらえるようにその他ではこれらの色を利用しないようにしている
実際のプロダクトの画面のイメージは以下のようになっています。
全てのコンポーネントを同時に設計し直したことで、「青は進む・重要」「赤は止まる・危険」といった設計をプロダクト全体で一貫させることができています。
重要なものは青色を、危険なものは赤色を利用する
カラーの設計ルールを明確かつ厳密にしたことで、お客さまにとって学習コストが下がるだけでなく、開発時にも迷いなくUIを設計できるようになりました。
お客さまが機能を認識しやすくなるよう、フォントの利用用途もルール化しました。
以前のクライアントポータルは、多機能と情報量の多さゆえにユーザーが全ての情報を俯瞰できるということを目的としてフォントサイズが小さく設定されていました。
しかし、テキストが読みづらいため、画面の拡大縮小を繰り返しているお客さまがいたりと、改善の余地があることを捉えていました。
フォントサイズが小さく、重要な機能がお客さまに認識されていないことがたびたび起こっていた
クライアントポータルのユーザーの年齢層は20代から60代と幅広いため、皆さんにとって見やすいよう、フォントサイズはもっと大きく設定した方が良いだろうと調整し直しました。
メインターゲットの年齢層が比較的高かったため、フォントサイズも以前より大きく設定
改善の結果、拡大縮小を行うお客さまは激減しました。フォントサイズを大きくしたことで、一時的に読みづらい画面が発生しておりましたが、それも日に日に改善を進めており、PCにおいてはかなり読みやすさは向上したのではないかと思います。
このような改善を進めていき、2023年10月にリニューアルしたクライアントポータルを無事公開することができました。
今回の改善によって学習コストが減り、カスタマーサポートを通さずとも、プロダクトから行動を促すためのベースができてきました。
例えば、トップページに訪れる方が増え、複数サービスの併用やこれまで自発的には生じ得なかったサービス依頼もいただけるようになったり、細かい面でもフォントサイズの調整によって、これまでのようにサイトの拡大縮小を行うお客様は激減しています。
ビザスクでは、同じ市場/ターゲットに向けて多様なスポットコンサルサービスを展開しているため、シンプルで、分かりやすいプロダクトづくりを常に意識する必要があります。
プロダクトデザイナーとしては、自分たち自身もお客様の理解をできる限り深め、お客様にとって使いやすいサービスにしていくことを追求していくことが重要だと思っています。
ユーザー目線でのプロダクト開発に、今後も取り組んでいきます。