ABテストツールを使い上司を簡単に納得させる作業プロセスとは。│株式会社イー・エージェンシー

こんにちは！attripです。

イー・エージェンシーの成功事例のページをABテストの結果によって変更いたしました。今回の記事では、僕達（マーケティングチーム）がABテストチームとどのように連携し、サイトの変更をしたのかをお伝えいたします。

ABテストツールを使い上司を簡単に納得させる作業プロセス

目的は、ABテストツールを使いスムーズなデザイン変更

デザイン変更をするのには、意思決定プロセスが複雑になりがちです。ABテストツールのデータを使いちゃんと説明出来るようなプロセスを踏むことでスムーズにサイトを改善していきます。データがあるとサイトの改善理由を説明しやすいです。

ABテストをする上で必要なデータ

まずABテストをする上で必要なデータを集ます。弊社の成功事例に来たユーザの閲覧数や問い合わせ数等のデータが必要です。問題がひとつあります。今回変更を考えている場所が成功事例ということで常に最新のデータがアップデートされるので古いデータでは、データに誤差が生じる可能性があります。そこで、ABテストツールを使いユーザ毎に表示させるデザインパターンを変えました。これによりデータの誤差を少なくしています。

今回成功事例のページで向上させたかった項目

1.問い合わせ数のアップ
成功事例を見てもらった人には、問い合わせをしてもらいたいです。これが僕ら（マーケティングチーム）の一番の望みになります。

2.閲覧数のアップ
閲覧数は、元になっているサイトのデータを１００％としてどれくらいカイゼンしたのかを数値化してあります。

ABテストツールを使い3名の方にサイトのカイゼンをお願いいたしました。

まずは、2つのパターンを作成し、元のサイトと比較を行いました。

ABテスト最初のテスト

元になるデザインパターンをBASEとしてCVには、離脱せずに他のページに移動した人をCVにしました。その結果Aパターンでは、142％も向上しました。このデザインの特徴は、成功事例のパターンをヘッダー近くの部分で明確にし、カテゴリー毎に移動しやすくするパターンでした。

カテゴリーを上部にまとめ

更に、このデータを元にデザイナー兼コーダーのCさんが色を綺麗にしたり、javascriptなどで動きのあるものにしてみたものをCパターンとして比較することにしました。

ABテスト2番目のテスト

社内ではこのデザインパターンが、綺麗で評判が良かったです。残念ながらスコアは、良くなかったのですがデザインの一部を組み込むことにしました。

一番最初のパターンは、このようなデザインでした。

このデザインに問題点として、カテゴリーが左サイドにあってもあまり見ている人がいないということがわかりました。そこでワンカラムレイアウトにすることにより動線をわかりやすく変更することにしました。

過去の成功事例の表示

カテゴリーを上部にまとめることで閲覧しやすいインターフェイスに変更。

成功事例は、自分が作ってもらいたいサイトのパターンを見つけやすくするために、上部でカテゴリーを見せたほうが閲覧数が高まりました。また、ABテスト期間中に実際問い合わせもありました。ワンカラムレイアウトにすることを決定する要因にもなりました。

カテゴリーを上部にまとめ

事例は、文字のみにして縦並びにしたものが一番回遊率が高いということがわかった。

一つ一つの事例よりも多数の事例が一気に閲覧できるインターフェイスの方が好まれる結果になった。

事例は、文字のみで縦並びにしたパターン

ABテストから実装までを体験してみた感想。

イー・エージェンシーには、沢山のデザイナーやコーダーの方がいるので様々デザインパターンでテストが出来ました。また、ABテストのツールを使ってデザインを変更していくことで、上司を説得する際にもデータの結果や考察を伝えやすくなり。変更を加えてちゃんとそのデータについてどのように考えているのかを説明することで、周りの理解もとりやすくなりました。今後もサイト改善にABテストツールを使い、記事を書いていきたいです。