こんにちは!ビザスクlite事業部、デザイナーのながおかです。
急に寒くなってきた今日このごろ、みなさまいかがお過ごしでしょうか?
実は、6〜7月にビザスクの「事前相談画面」のリニューアルがひっそりと実施されました。実際の案件が発生するまで見ることのできない画面ですので、まだ見られていない方も多いのではないでしょうか。
今回はその「事前相談画面」リニューアルの狙いと、リリースまでの歩みをお伝えできればと思います。
少々長くなりますが、ごゆっくりお付き合いください!
負債と化していた事前相談画面
まずは簡単に「事前相談画面」について説明します。
こちらの画像が以前の事前相談画面です。
事前相談画面は、ビザスクのアドバイザーと依頼者がスポットコンサルを実施する前にやりとりするページです。
この画面では、やりとりの他に「プロフィール開示」「質問への回答」「トレーニングの受講」「決済」などを行っています。
これらのアクションがスムーズに進み、トラブルなく完了できることがこの画面に求められています。
しかし、便利な機能や説明書きを増やす内に「次にすること」は埋もれて伝わりづらくなっていきます。
複雑な条件で分岐しているコードはメンテナンス性も悪く、小さな改善であっても手を出しづらい状態でした。
ユーザーがマッチングする際必ず使われる重要な画面でありながら、
負債と言っても過言ではない状態だったのです。
問題点の洗い出し
ユーザーやCSチームにヒアリングを行ったところ、以下のような問題があることがわかりました。
- 案件の内容がよくわからない
- 自分が次に何をすればいいのかわからない
- いつ決済するのか、決済されるのかがわからない
- なぜか先に進めないが、なぜ進めないかがわからない
- やりとりが長くなり、下までスクロールするのが大変
- 決済前に連絡先を交換した結果、トラブルになってしまった
これではマッチングするものもマッチングしません。
こういった状態に陥った場合、CSチームが人力でユーザーをサポートすることになりますが、その分業務が増えてしまいます。
これらの問題をデザインの力で解決することと、
コードのメンテナンスコストを下げることを目的としました。
リサーチとデザインの作成
目的が定まったところで、まずは「メッセージ機能」のリサーチを行いました。
TwitterやFacebookなどのメッセージ機能を持つSNS、
LINE等の純粋なメッセージアプリ、
購入者とのやりとりを行うフリマアプリ、
発注者と受注者がいるクラウドソーシングのUIデザインなど、
思いつくままに広く調べ、それぞれの特色をまとめていきます。
その後、リサーチを基にデザイン案を複数作成しました。
左端のデザインは、メッセージ部分がスクロール可能な小窓になっています。
開いたときに自動で最新メッセージまでスクロールされるイメージです。
左から2番目は、最新メッセージが上に来るよう順番を入れ替えています。
こうすることで、自然に最新メッセージが目に入るようになりました。
「次にやること」もその上に表示しています。
3番目はメッセージアプリとして振り切ってみました。
画面が広くなり、メッセージが読みやすくなっています。
しかし「決済」等の機能の置き場が無く、案件内容の書かれた左半分はとても狭くなってしまいました。
4番目は、置き場に悩んだ「案件内容」を画面上に収納しています。
これまでのビザスクliteには無いレイアウトでしたが、意外にも馴染んでおり、これが最も良いように思えました。
デザインを整える
方向性が定まったところでデザインを整えていきます。
情報の多い画面なので、以下のようなルールを定め、表示する情報を極力絞ったデザインを作成しました。
- 「次にやること」と最新メッセージが一番に目に入るようにする
- 「次にやること」は同時に1つまでしか表示しない
- 読まれない注意書きは置かない。自然に目に入るように置く
- その時見なくても良い情報は隠す。必要なときに目に入るようにする
事前相談画面は、セルフマッチング形式「ビザスクlite」だけではなく、フルサポート形式「ビザスク」のアドバイザーも利用する画面です。
会社全体の売上に関わると言っても過言ではないので、なるべく多くの事業部から意見を募り作業を進めました。
出来上がったのがこちらのデザインです。
以前に比べてずいぶん見やすくなりましたが、情報量が減りすぎて「必要なことが十分に伝わらないのでは」という懸念が出てきました。
メッセージが新しい順になっていることに対しても「以前のUIに慣れ親しんだユーザーには使いにくいのでは」という声が上がります。
ということで、ここで一旦開発を止め、
ユーザーインタビューを実施することにしました。
ユーザーインタビュー
社内編
ユーザーインタビューのために、プロトタイプを作成します。
まずは最も多く利用されている「フルサポート形式・アドバイザー用」のUIを作成してもらいました。
パターンを1つに絞ることで、完成品に近い画面を高速で開発してもらうことができました!
(ちなみに開発担当は 小柳先生 @mascii_k です)
ユーザーインタビューの前半戦は、社内のメンバーで行いました。
余計なバイアスが掛からないように、ユーザーと直接関わることの少ないメンバーから、ヘビーユーザーと初回ユーザーを合わせて4名選定しています。
ユーザーインタビューはオンラインで実施しました。
Zoomで画面共有をしながら「実際に依頼が来たアドバイザー」のつもりで新しいUIを触ってもらいます。
思ったことや感想などを逐一声に出してもらいながら、
依頼内容の確認から面談の調整、完了報告までを行いました。
どの回でも特別詰まることは無く、方向性が合っていたことに一安心。
メッセージが逆順になっていることに対しても、ほとんどのメンバーからは「特に違和感はない」というフィードバックを受け、ヘビーユーザーである宮崎さんからも「違和感はあるが、困りはしない。慣れの問題」というお声をいただきました。
一方で、案件の内容がどこにあるのかわからない、実際の案件で利用される定型文と新UIに齟齬がある、注意書きを誰一人読んでくれないなど、細かな課題も得ることができました。
社外編
大枠は問題がなさそうなことがわかったので、課題に対する修正を入れながら、さらなる開発を進めます。
(再利用性の高いコードを目指していたこともあり、開発は爆速でした。このあたりのお話はまた別の記事で…)
全パターンのプロトタイプが完成したところで、いよいよ社外の方とユーザーインタビューを実施します。
- リピーターの依頼者
- リピーターのアドバイザー
- 初利用の依頼者
- 初利用のアドバイザー
上記の4属性で対象者を募り、こちらもオンラインで実施しました。
最後の回は「初利用の依頼者とアドバイザーに全てを委ねる」という形で実施しました。
「ビザスクのUIを初めて見た人がどこで詰まるか」だけでなく、
「返事を待っているユーザーがビザスクで何をするか」のフィードバックも得ることができたため、大変有意義な時間になりました。
(代わりに予定時間を大幅にオーバーしてしまいましたが…)
ユーザーインタビューの結果
ユーザーインタビューでは多くの改善点を見つけることができましたが、特に印象的だったのが、金額変更ボタンのUIについてでした。
リニューアル以前「金額を変更できることに気付かなかった」というご意見をいただき、今回はボタンの配置と色を目立つよう変更していました。
ところが、インタビューではそのボタンに戸惑うケースが多発しました。
金額を変更しない場合は何もしなくてもよいのですが、ボタンを目立たせた結果「必ず実行しなければならない」と思わせてしまい、逆に混乱を招いてしまったのです。
結果として、配置だけをそのままに、色の目立たないボタンを採用することになりました。
ユーザーからのお問い合わせや社内の声を聞いていると、上手に使えないユーザーに意識が向きがちです。
しかし、それを改善するために大多数の問題なく使えているユーザーの体験を損ねてしまうのは本末転倒。
ユーザーインタビューで社外の声を聞くことは、そういった意味でも有効だと考えています。
実装
無事ユーザーインタビューを終え、実装されたデザインがこちらです。
アクション時のフィードバック、注意書きの色、省略される案件内容の表示量など、細かな部分で改善を重ねています。
(この微妙な差が使い勝手に大きな影響を与えるのです…)
ここまでくると、デザイナーのすることは多くありません。
細かなcssの修正に対応しつつ、エンジニアさんの実装やQAチームのテスト、コードレビューなどを待ちます。
ついにリリース!
課題の洗い出しやデザインで1ヶ月、プロトタイプ作成からリリースまでは約2ヶ月でリニューアルを終えることができました!
大掛かりなUIのリニューアルではネガティブな意見が発生しがちですが、ユーザーインタビューを重ねた甲斐もあり、そういったフィードバックはほとんどいただいていません。後に数値検証も行いましたが、重要なKPIに対する悪影響は見られませんでした。
一方で「CSが案件のフォローに入る頻度」は減らすことができました。
数値の面でも、リニューアルがCSの業務改善に貢献しているという結果が表れています。
この後スマホ版も同様のUIに変更し、コードが一新されたことでさらなる改善がしやすくなっています。
このUIを基にして、引き続き改善を進めていきたいところです。
Special Thanks
課題の洗い出し〜デザイン案作成までの作業は、デザイン・インキュベーション・スタジオ「Basecamp」さんに参加いただき実施しました。
どうもありがとうございました!
Basecampさんとの取り組みについては、こちらの記事をご参照ください。