検索結果一覧のUI改善でKPIが17.5%向上した話
この記事は、2017-11-20に他ブログで書かれた記事の転載です
こんにちは。デザイナーの上田です。たまにはサービスグロース系の記事を書いてみようと思います。
突然ですが、「サービス改善の一環でUI改善の施策をリリースしたけど、明らかな数字の変化が見られず、いまいち上手くいったのか上手くいかなかったのか評価がしづらい。」といった経験をお持ちではありませんか？
わたし自身は何度かそういった経験があり、UI改善が定量的な成果に結びつきづらく感じて、「UI改善の価値を主張しづらいな。」と頭を悩ましていました。
そんな中、担当したUI改善で、主要なKPIを17.5%改善することができ、デザインプロセスに汎用性を持たせられそうな感覚があったので、そういった事例を増やしていくために、今回はどんな風に設計したかプロセスを振り返ってみようと思います。
もちろんUI改善の効果は定量的な数字の変化のみで推し量れないと思ってますが、一方でUI改善で数字を伸ばせない訳ではないとも思うので、そんな話の実例としてご参考いただければと思います。
どんなUI改善の施策か
今回の施策のお題はクラウドワークスアプリの仕事の検索結果で仕事ごとの違いを見分けやすくしたい、といったものでした。結論からお伝えすると、変更を加えた画面のビフォーアフターは以下のようになっています。
詳細は後述しますが、パっと見の印象は大きく変わらないものの、要素レベルで見比べると、地味に色々と変更しています。
どのくらい効果があったか
今回のUI改善では受注者の仕事の応募率を17.5%(*1)の向上に成功しました。
クラウドワークスは仕事のマッチングサービスを運営しており、受注者の仕事への応募は重要なファンネルになるので、それなりにインパクトのある結果となったのではないかと思います。
(*1) 17.5%の向上とは、改善前の数字の1.175倍の向上を達成したという意味です。
一方、PCとスマホWebの応募率はリリース前後でほとんど変化せず、アプリだけがリリースの前後で明確に伸びており、UI改善によって「仕事の見つけやすさ」「応募のしやすさ」が向上したことが伺えます。
※数値の向上の要因については、サービス全体の動向や他の施策の影響なども調査の上、今の所このような結論となっています。
どんな風に設計したか
デザインは以下のようなフローで進めました。1ヶ月くらいです。同時に複数の施策を担当していたので、リソースの3分の1くらいを使って、そのぐらいの期間でした。
それぞれのステップでポイントとなる実際にやったことをご紹介したいと思います。
プランニング
プロダクトオーナーと施策の方向性について議論する中で焦点となったのは、検索結果一覧のコンテンツUIはユーザーのどういったニーズを満たしているべきか？でした。
「比較のしやすさ」「仕事を探す楽しさ」など、仮説は色々と思い浮かびますが、実際のユーザーの仕事を探す上で重視している点は、ユーザーインタビューで調査することで仮説の精度を高められるのでは？といった話から、施策のプランニングの時点でニーズ調査の工程を組み込み、その分析結果を反映したデザインをリリースに持っていくフローで着地しました。
ちなみに、本来は「プロトタイプ作成」と「ニーズ調査・分析」は段階的に進めたかったのですが、「いつまでにはリリースしたい」といったビジネス的な要望もあったので、今回はそこは並行して進められるような計画になっています。
プロトタイプ作成
ニーズ調査・分析と並行して、仮説ベースで改善案の方向性を検討し、ラフなワイヤーフレームの粒度で複数のプロトタイプに落とし込みました。
例えば、
仮説A：一覧は仕事情報のサマリのみ 必要最低限の情報に絞る
仮説B：一覧で仕事情報についてある程度は吟味できる 一覧性を毀損し過ぎない範囲で情報量を増やす
仮説C：一覧上でクライアント実績を判断基準にできる ニッチだと思われる情報も表示する
といった形で仮説を立て、それぞれに対して個別のプロトタイプを作りました。アウトプットとしては以下のような感じ。既存の画面のスタイルを活かせるので、ラフなワイヤーフレームとはいえ、色が付いていたりします。
ニーズ調査・分析
プロトタイプ作成と並行して、デザインチームのUXデザイナーに調査の趣旨を伝え、インタビュー実施の協力をお願いしました。
クラウドワークスのデザインチームはデザイナーとUXデザイナーの二種類のデザイナーが在籍していまして、インタビューなどのリサーチはデザイナーとUXデザイナーの共同で進める形になります。
ニーズ調査・分析のプロセスについてはこのブログでは説明しきれないので、UXデザイナーが別の記事で紹介してくれると期待して割愛しますが、このステップのアウトプットとしては以下のようなレポートをUXデザイナーが作ってくれました。
※レポートの一部です。
※UXデザインの取り組みに関する記事はこちらにまとまっているのでよろしければご参考ください。
この調査で分かったことを整理すると、現状のユーザーの仕事を探す体験は、
・カテゴリ / スキル検索で、自分にとって応募する可能性がないものを削る
・検索結果一覧から、自分がやらない仕事を排除
・仕事詳細で、吟味する必要のある項目の精査
という流れになっているということ。 しかし実際は、仕事一覧上で見ただけでは良い仕事かどうかの判断が難しく、無駄に多くの仕事の詳細画面を開いて確認・自分に合わなければ戻って別の仕事を探すといった作業を繰り返してしまっている現状が多く見受けられました。
十分な示唆を得られたので、こういった前提を元に情報設計・UI設計を行い、策定していたプロトタイプと照らし合わせつつ、採用するデザイン方向性を決めていきます。
情報設計・UI設計
コンテンツUIと言えど、要素は色々と存在するので、以下のような簡易的な一覧表を作り、本当に必要な情報を整理しました。
現状のユーザーは検索結果一覧で「自分がやらない仕事を排除」していることから、検索結果一覧においては「自分にできるかどうか」の判断がしやすいことが重要といった観点と合致するものを採用し、それ以外は重要度の低い情報（一部のユーザーにとっては有り難いが、多くのユーザーにとってはノイズの可能性が高い情報）として一覧上から除外しました。
予算ですが、掲載日や予算など細かいバリエーションが存在する要素もあるので、それぞれの表記ルールについても細かく検討を重ねます。この辺りは意外と骨が折れます・・。楽しいんですけどね・・。施策によってはプロダクトオーナーと役割分担したり、全面的にお願いしたり、フレキシブルに状況を見ながらやってます。
必要な情報や情報ごとのプライオリティが見えてきたら、UIデザイン案に落とし込みます。どういった点に注意して画面を作っているか、いくつかポイントを付け加えておきました。
ビジュアルデザイン
開発チーム内などのフィードバックを踏まえつつ、最後の仕上げの段階です。今回はビジュアル的に大胆な変更はしなかったので、この段階で大きなジャンプはありませんでしたが、余白の感覚や情報に優先順位をつけるカラー指定など、細かいレベルで検証を繰り返し、アウトプットとしてまとめます。
また、今回はiOS/Androidでの同時リリースだったので、Androidアプリのデザインに合わせた最適化や、考慮していなかったサブ機能などメジャーなパターン以外への対応を行いました。今回はメジャーなパターン以外のバリエーションでいうと12パターンくらいありました。
以上で、ようやくデザインの工程としては概ね終了になります。その後はエンジニアチームとデザインの共有を行い、開発 → リリース → 効果計測といった流れで進んでいきます。
振り返ってみると、今回のUI改善で応募率のKPIを17.5%改善できたポイントとしては、ユーザーインタビューによるニーズ検証・分析によって、確からしいユーザーニーズを仮説として掴むことができたことが大きいかなと思います。
スピードを重視して素早くデザイン、リリースしてABテストをぐるぐる回すのも選択肢の一つですが、最初から丁寧にニーズ調査・分析を実施してリリースした方がコスパがいいのではないか、と思わされるUI改善の施策になりました。
さいごに
いかがでしたでしょうか？
プロジェクトはリソースやスケジュールの都合もあるので、どうしてもユーザーインタビューなど実施の判断が難しい場面もあると思いますが、プロジェクトのプランニングの段階でインタビューの目的を明確化してスケジュールに組み込み、ニーズをしっかり把握してデザインすることで、結果として効果を高めた事例を紹介いたしました。
普段のサービス改善で思うように期待する効果につなげられていない方がいらっしゃれば、ぜひ一度ユーザーの声に耳を傾け、裏側にあるニーズを探ってみてはいかがでしょうか。
さいごに、クラウドワークスには、人間中心のアプローチでものづくりをする環境やチームが揃っているので、ご興味ある方はぜひ以下のリンクよりお気軽にご連絡ください！
この記事が気に入ったらサポートをしてみませんか？