【UX改善】TOPページリニューアルの思考整理

自分が担当するサービスのトップページのUX改善を進めたので、振り返りとして、思考の整理を行います。

01：KPIツリーを作成する

KPIツリーがないと、ただ施策を実施するだけになり、目的なき改善になってしまいます。そのため、最初に取り組んだことはKPIツリーを作成し、事業全体の構造化を図りました。KPIツリーを作成することで、全体像が可視化され、KGIを構成する要素が分解されました。

要素分解を行うと、KGIを達成するためにはどの部分がボトルネックになっているのかを把握することができます。

ここらへんの記事は参考になりました。https://www.netyear.net/idea/dt20181108.html
https://webtan.impress.co.jp/e/2017/09/20/26620

02：KGI達成のための仮説を立てる

KPIツリーの中で、KGI達成のためにはCVR改善が必要であるという仮説をたて、サイト状況を深ぼっていくとにしました。
勿論、KGI達成のためにはマーケティングの施策など複数の要因はありますが、今回はUX改善の位置づけでCVR改善に着目。

03：CVR改善の目標値を決める

KGIを達成するためには、CVRを〇〇％にしないといけないのか。事業目標と照らし合わせ目標を決めていくことに。ざっくりとは以下のようなイメージで作成。仮ですが、KGIを売上げと定め、KPIを購入数としています。

【現状】
CVR1％→購入数10,000→売上100,000
【改善後】
CVR1.2％→購入数12,000→売上120,000

重要なのは仮でもよいので、目標をたてること。そして、目標達成を阻害しているボトルックを探すことだと考えました。改善後のCVRは何パターンかを作成し、目標に松竹梅をつけることに。

04：ファネル分析を行いボトルネック箇所を探していく

目標値を定めたら、達成するためのボトルネックを探していきました。
方法はGAを使ったファネル分析を採用。

サービス構成する全体の画面を洗い出し、ゴールまでのプロセスを記載。遷移率や離脱率などを調べ、どの画面がボトルネックにあたるのかを調査。
また、ユーザーセグメント別や経路別など複数の観点から調査を実施。経路や、ユーザー別で数値は異なるので、複数の視点を持つことが重要。

05：ボトルネック箇所に優先順位をつける

ファネル分析などで、大体どの画面がボトルネックになっているのかを把握することができます。次に行ったのは、優先順位をつけること。
優先順位決めを行うポイントは以下。

改善のインパクト×対応工数

インパクトが小さい部分をいくら最適化しても、改善率は低くなってしまうので、なるべくインパクトが大きく、また工数が低い箇所から取り組んでいくことに。
今回はトップページの振り返りなので、割愛しますが実際は工数が低い他のページから着手を実施。

06：トップページでの課題点の整理

全体の画面ごとのボトルネックや分析は過去の工程で実施していますが、ここではトップページの課題整理と解決策を定義。具体的には以下のような感じ。ちょっとざっくりしていますが、一旦この課題を以降でペルソナ作りを実施。

【課題】
トップページでサービスの価値提供が行えていない
要因として、コンテンツがただあるだけの状態になっているので、ユーザーはサービスの価値に気が付かずに離脱していく

【解決策】
初回訪問時にトップページで、サービスの価値を正しく伝える
どんなユーザーが、どんな動機・目的で来るのかを検討し、トップページで伝えたいメッセージを明確にしていく

07：ペルソナの作成

ここでは、ターゲットとなるペルソナ作りを実施。
ターゲットが決まらないと、ユーザーに対して何を伝えていくかが明確にならないので、ここはチームメンバーとも議論をして作成。
ペルソナ作りのポイントは、実際にサイトを使ってもらうであろう代表的なユーザー像として作っていくこと。そのため、分かる範囲で実データを元に仮説を立てていくことに。

今回は以下と定義。

初回訪問ユーザーでサービス自体は殆ど認知していないユーザー。
ただしサービスで提供している商品のことはある程度認知しており、購入しないといけないという、なんとなくの認識はある状態。

ちなみに、ペルソナ作成で参考になったのはARRRAモデル。
詳細は割愛しますが、まず最初にユーザー活性化を行うべく、サービスの価値をユーザーに届けるというもの。初回訪問時に価値が伝わらないと、再訪問もしてくれない。という考えでペルソナを初回訪問ユーザーと位置づけしました。

08：ペルソナの動きを可視化

カスタマージャーニーのようなユーザーの行動フローを作成。ペルソナがどういった気持ちでサービスに訪れているのか、何を期待しているのかを定義。ユーザーの動きや気持ちを理解することでサービスで訴求すべき内容が明確になります。

09：改善の方向性を作成

ある程度、ユーザーの動きや気持ちが整理できたら次に行うのは、トップページの構成やストーリー設計。ユーザーが実際にCVしてくれるための方向性を定義。

ここでは、この記事を参考にユーザーが行動を起こすには 「 動機 × 実行能力 × きっかけ」が必要という考えで以下のように作成。

・サービスの価値を認識してもらう
・どんな商品があるのかを知ってもらう
・きっかけ作りのための仕掛けを配置

今回のサービスは、比較的既に動機形成が行われてるサービスであり、実行も非常に簡単に行えるものでした。ただ、それが伝えきれていないのが現状だったので、「いかに価値を届け認知してもらえるか、一度サイトを離脱した後でも継続的にコミュニケーションを取れるのか。」かが重要ということに。

10：トップページの要素を洗い出す

ある程度方向性が定まっても、いきなりワイヤー作成に手を付けず、どんな要素が必要なのかを整理。

要素1つ1つに対して、なぜ必要なのか、どんな目的があるのかを定めていきます。そうすることで、サイト改善の方向性とは合わない要素は割愛することができます。

11：ベンチマークの調査

要素の洗い出しが終了したら、ベンチマークの調査を行いました。実現したいことに対して優れたUIを提供しているサービスを調査。
ここでは、同じ業種だけではなく、異なる業種・海外サービスなんかも参考に調査を実施。

12：ペーパープロトを作成

要素の洗い出しや目的の整理ができたら、まずはペーパープロトを作成して、複数案を作成します。XDやfigmaなどのツールで作り始めるのもいいのですが、ペーパプロトを作成してチームで議論を重ねた方が手戻りが少なく良いです。

13：ツールでワイヤーを作成し、チームで議論

ここまで来たらワイヤーを作成します。
XDやfigmaなどを使い、チームに共有すればより円滑に議論を進めることができます。

今回は一旦ここまでで終了なのですが、重要なポイントは以下かと思います。

・目標値を決める
・課題を正しく定める
・仮説をたてて、仮説思考で検討していく

前段部分の方向性の認識がずれていると、どんなにいい解決策を用意しても意味がないので、この点を最初に認識を揃えることが重要なのではと思います。後は、現状やデータをたくさん見ることも重要ですが、ある程度仮説を立てて、仮説を軸に検討していくとスピード感が出て早く回せそうだと感じました。