VisasQ Dev Blog

ビザスク開発ブログ

UI/UX改善!事前相談リニューアルの歩み 

こんにちは!ビザスクlite事業部、デザイナーのながおかです。
急に寒くなってきた今日このごろ、みなさまいかがお過ごしでしょうか?

実は、6〜7月にビザスクの「事前相談画面」のリニューアルがひっそりと実施されました。実際の案件が発生するまで見ることのできない画面ですので、まだ見られていない方も多いのではないでしょうか。

今回はその「事前相談画面」リニューアルの狙いと、リリースまでの歩みをお伝えできればと思います。
少々長くなりますが、ごゆっくりお付き合いください!

負債と化していた事前相談画面

まずは簡単に「事前相談画面」について説明します。
こちらの画像が以前の事前相談画面です。

事前相談画面は、ビザスクのアドバイザーと依頼者がスポットコンサルを実施する前にやりとりするページです。

この画面では、やりとりの他に「プロフィール開示」「質問への回答」「トレーニングの受講」「決済」などを行っています。
これらのアクションがスムーズに進み、トラブルなく完了できることがこの画面に求められています。

しかし、便利な機能や説明書きを増やす内に「次にすること」は埋もれて伝わりづらくなっていきます。
複雑な条件で分岐しているコードはメンテナンス性も悪く、小さな改善であっても手を出しづらい状態でした。

ユーザーがマッチングする際必ず使われる重要な画面でありながら、
負債と言っても過言ではない状態だったのです。

問題点の洗い出し

ユーザーやCSチームにヒアリングを行ったところ、以下のような問題があることがわかりました。

  • 案件の内容がよくわからない
  • 自分が次に何をすればいいのかわからない
  • いつ決済するのか、決済されるのかがわからない
  • なぜか先に進めないが、なぜ進めないかがわからない
  • やりとりが長くなり、下までスクロールするのが大変
  • 決済前に連絡先を交換した結果、トラブルになってしまった

これではマッチングするものもマッチングしません。
こういった状態に陥った場合、CSチームが人力でユーザーをサポートすることになりますが、その分業務が増えてしまいます。

これらの問題をデザインの力で解決することと、
コードのメンテナンスコストを下げることを目的としました。

リサーチとデザインの作成

目的が定まったところで、まずは「メッセージ機能」のリサーチを行いました。

TwitterFacebookなどのメッセージ機能を持つSNS
LINE等の純粋なメッセージアプリ、
購入者とのやりとりを行うフリマアプリ、
発注者と受注者がいるクラウドソーシングのUIデザインなど、
思いつくままに広く調べ、それぞれの特色をまとめていきます。

その後、リサーチを基にデザイン案を複数作成しました。

画像は4枚分ですが、実際には20〜30枚ほど作成しています

左端のデザインは、メッセージ部分がスクロール可能な小窓になっています。
開いたときに自動で最新メッセージまでスクロールされるイメージです。

左から2番目は、最新メッセージが上に来るよう順番を入れ替えています。
こうすることで、自然に最新メッセージが目に入るようになりました。
「次にやること」もその上に表示しています。

3番目はメッセージアプリとして振り切ってみました。
画面が広くなり、メッセージが読みやすくなっています。
しかし「決済」等の機能の置き場が無く、案件内容の書かれた左半分はとても狭くなってしまいました。

4番目は、置き場に悩んだ「案件内容」を画面上に収納しています。
これまでのビザスクliteには無いレイアウトでしたが、意外にも馴染んでおり、これが最も良いように思えました。

デザインを整える

方向性が定まったところでデザインを整えていきます。
情報の多い画面なので、以下のようなルールを定め、表示する情報を極力絞ったデザインを作成しました。

  • 「次にやること」と最新メッセージが一番に目に入るようにする
  • 「次にやること」は同時に1つまでしか表示しない
  • 読まれない注意書きは置かない。自然に目に入るように置く
  • その時見なくても良い情報は隠す。必要なときに目に入るようにする

事前相談画面は、セルフマッチング形式「ビザスクlite」だけではなく、フルサポート形式「ビザスク」のアドバイザーも利用する画面です。
会社全体の売上に関わると言っても過言ではないので、なるべく多くの事業部から意見を募り作業を進めました。

出来上がったのがこちらのデザインです。

以前に比べてずいぶん見やすくなりましたが、情報量が減りすぎて「必要なことが十分に伝わらないのでは」という懸念が出てきました。
メッセージが新しい順になっていることに対しても「以前のUIに慣れ親しんだユーザーには使いにくいのでは」という声が上がります。

ということで、ここで一旦開発を止め、
ユーザーインタビューを実施することにしました。

ユーザーインタビュー

社内編

ユーザーインタビューのために、プロトタイプを作成します。
まずは最も多く利用されている「フルサポート形式・アドバイザー用」のUIを作成してもらいました。
パターンを1つに絞ることで、完成品に近い画面を高速で開発してもらうことができました!
(ちなみに開発担当は 小柳先生 @mascii_k です)

ユーザーインタビューの前半戦は、社内のメンバーで行いました。
余計なバイアスが掛からないように、ユーザーと直接関わることの少ないメンバーから、ヘビーユーザーと初回ユーザーを合わせて4名選定しています。

見出し画像
ヘビーユーザー代表、我らがlite事業部リーダーの宮崎さん

ユーザーインタビューはオンラインで実施しました。
Zoomで画面共有をしながら「実際に依頼が来たアドバイザー」のつもりで新しいUIを触ってもらいます。

思ったことや感想などを逐一声に出してもらいながら、
依頼内容の確認から面談の調整、完了報告までを行いました。

どの回でも特別詰まることは無く、方向性が合っていたことに一安心。
メッセージが逆順になっていることに対しても、ほとんどのメンバーからは「特に違和感はない」というフィードバックを受け、ヘビーユーザーである宮崎さんからも「違和感はあるが、困りはしない。慣れの問題」というお声をいただきました。

一方で、案件の内容がどこにあるのかわからない、実際の案件で利用される定型文と新UIに齟齬がある注意書きを誰一人読んでくれないなど、細かな課題も得ることができました。

社外編

大枠は問題がなさそうなことがわかったので、課題に対する修正を入れながら、さらなる開発を進めます。
(再利用性の高いコードを目指していたこともあり、開発は爆速でした。このあたりのお話はまた別の記事で…)

全パターンのプロトタイプが完成したところで、いよいよ社外の方とユーザーインタビューを実施します。

  • リピーターの依頼者
  • リピーターのアドバイザー
  • 初利用の依頼者
  • 初利用のアドバイザー

上記の4属性で対象者を募り、こちらもオンラインで実施しました。

ユーザーインタビュー1回分の議事録(一部)

最後の回は「初利用の依頼者とアドバイザーに全てを委ねる」という形で実施しました。

「ビザスクのUIを初めて見た人がどこで詰まるか」だけでなく、
「返事を待っているユーザーがビザスクで何をするか」のフィードバックも得ることができたため、大変有意義な時間になりました。
(代わりに予定時間を大幅にオーバーしてしまいましたが…)

ユーザーインタビューの結果

ユーザーインタビューでは多くの改善点を見つけることができましたが、特に印象的だったのが、金額変更ボタンのUIについてでした。

リニューアル以前「金額を変更できることに気付かなかった」というご意見をいただき、今回はボタンの配置と色を目立つよう変更していました。
ところが、インタビューではそのボタンに戸惑うケースが多発しました。
金額を変更しない場合は何もしなくてもよいのですが、ボタンを目立たせた結果「必ず実行しなければならない」と思わせてしまい、逆に混乱を招いてしまったのです。

結果として、配置だけをそのままに、色の目立たないボタンを採用することになりました。

ユーザーからのお問い合わせや社内の声を聞いていると、上手に使えないユーザーに意識が向きがちです。
しかし、それを改善するために大多数の問題なく使えているユーザーの体験を損ねてしまうのは本末転倒。
ユーザーインタビューで社外の声を聞くことは、そういった意味でも有効だと考えています。

実装

無事ユーザーインタビューを終え、実装されたデザインがこちらです。

アクション時のフィードバック、注意書きの色、省略される案件内容の表示量など、細かな部分で改善を重ねています。
(この微妙な差が使い勝手に大きな影響を与えるのです…)

ここまでくると、デザイナーのすることは多くありません。
細かなcssの修正に対応しつつ、エンジニアさんの実装やQAチームのテスト、コードレビューなどを待ちます。

ついにリリース!

課題の洗い出しやデザインで1ヶ月、プロトタイプ作成からリリースまでは約2ヶ月でリニューアルを終えることができました!

大掛かりなUIのリニューアルではネガティブな意見が発生しがちですが、ユーザーインタビューを重ねた甲斐もあり、そういったフィードバックはほとんどいただいていません。後に数値検証も行いましたが、重要なKPIに対する悪影響は見られませんでした。

一方で「CSが案件のフォローに入る頻度」は減らすことができました。
数値の面でも、リニューアルがCSの業務改善に貢献しているという結果が表れています。

この後スマホ版も同様のUIに変更し、コードが一新されたことでさらなる改善がしやすくなっています。
このUIを基にして、引き続き改善を進めていきたいところです。

Special Thanks

課題の洗い出し〜デザイン案作成までの作業は、デザイン・インキュベーション・スタジオ「Basecamp」さんに参加いただき実施しました。
どうもありがとうございました!

Basecampさんとの取り組みについては、こちらの記事をご参照ください。

ビザスクliteデザインリニューアルの裏側
ビザスクlite×Basecamp!デザインリニューアルまでにやったこと