数値改善サイクルを取り入れて、学びをサービスに活かす仕組みづくり

こんにちは!ユーザーファースト推進室のデザイナー木村と申します。

今回はクックパッドニュース編集部で取り組み始めた、数値改善のお話をご紹介したいと思います。

すでに数値改善をバリバリやってるサービス開発者の方には退屈な内容かもしれませんが、普段あまり数値に触れる機会のないデザイナーをはじめとするサービス開発に携わっている方を想定読者として、おおまかな流れについてお話したいと思います。

クックパッドニュースとは

クックパッドニュースは「読むとお腹がすくニュース」をコンセプトに、クックパッド内外で流行っている食にまつわるトレンドをはじめとした食の情報発信しており、「冷凍卵」「ジャーサラダ」「おにぎらず」など多くのトレンドを生み出しているメディアサイトです。

「体験」や「ストーリー」を数値に落としこむ

わたしがはじめて編集部とMTGした際に持ち上がったのは「クックパッドニュースのスマートフォンサイトの体験が悪く、UIの改善もずっと行っていなかったので、相談させて欲しい」というものでした。

「体験」といっても、そこに含まれている情報量は膨大です。チームメンバーが考える「よい体験」も、「手触りのよさ」「わかりやすさ」だったり「きれいな写真」「読みやすいテキスト」だったりと人によってまちまちでした。

そこで、まずはチーム全体で「よい体験」「わるい体験」の指標となる数値を設定するところからはじめました。

KPIの再設定

クックパッドニュースでは、ここ1年ほど、サービス改善よりも「よい記事を書いてたくさんのユーザーに届ける」という記事執筆に注力していたため、KPI(Key Performance Indicator:重要業績指標)を「PV」「記事本数」に設定していました。

PVは指標の一つとしてよく利用されますが、当然ながら、そこからわかることは、「どれだけアクセスがあったか」ということだけに過ぎません。

例えば、ある記事が100万PVだったとしてその記事を最後まで読んだユーザーは何人いたのか?その記事をきっかけに、ユーザーはどんな行動をとったのか?(他の記事も読んだのか?友達に記事をシェアしたのか??次の日もクックパッドニュースにアクセスしたのか???)を知ることは、残念ながらPV単体ではわかりません。

そこで、クックパッドニュースのユーザーストーリーに紐付いたKPIを再設定することにしました。

まず、クックパッドニュースのユーザーストーリを時系列順に大まかに以下のように分け、そこに紐づく主な数値をリストアップします。

f:id:mura24:20151120190708p:plain

クックパッドニュースはメディアサイトですから、コアの体験は「記事を読むこと」です。コアの体験となる「記事を読むこと」にまつわる数値として「読了率」「回遊率」をKPIに採用しました。

これで追うべき指標が決定し、改善の成果を数値で判断できるようになりました。

施策を決める

指標が決まったので、次はサービス改善のための具体的な施策を決め、タスクに落とし込んでゆきます。

タスク管理は、進捗状況の確認に物理カンバン、タスクの内容詳細検討にGithubのissue(掲示板のスレッドのようなもの)を利用しています。

f:id:mura24:20151120190714p:plain

issueを立てる際は、最低限、目的、仮説(見るべき数値)、変更点やその意図などを記載し、リリース後にチームメンバーがいつでも確認できるようにしました。

施策の振り返り

施策をリリースしたあとは、ユーザーにどのように影響を与えたのか効果測定を行います。

ニュースチームでは、施策のやりっぱなしを防ぎ、振り返りをきちんと行うことを意識づけるために、物理カンバンの「DO」と「DONE」の間に、施策の効果検証をするフェーズとして「CHECK」を置いています。

効果測定は、サービスの規模や行った施策にもよりますが、だいたいリリース後の前後1週間を比較して検討します。

今回は、記事下にある関連記事枠のデザイン改修施策を例に説明します。

「記事のサムネイルサイズが小さく、どんな料理か判別しにくいためユーザーの目に止まらずスルーされているのでは?」という仮説のもと、サムネイルサイズと表示するタイトルの文字数・サイズを変更しました。

f:id:mura24:20151120190720p:plain

施策実施前後の数値の経過をまとめたものが以下です。

f:id:mura24:20151120190725p:plain

これから以下のことが分かります。

  • 関連記事枠のユーザー一人あたりのイベント数上昇
  • 回遊率は微増
  • 関連記事下のランキング枠の数値も上昇(ネガティブな影響なし)

次に、この結果を持って、考えられる仮説や次のアクションを決めるフェーズに移ります。本施策はポジティブな結果が出ましたが、数値が下落してしまった場合は、なにが原因だったのか、初期の仮設に誤りがあったのかなども検証します。

今回は以下の様なことが考えられると思います。

  • UIの最適化を引き続き行う
    • サムネイルサイズ
    • 記事文字数
    • 掲載記事数を5件から増やすor減らす
  • 関連記事枠の体裁をランキング部分など他のコンテンツにも適応させる

仮説検証のサイクルを回す

施策を行った結果、思わしくない結果になってしまうこと自体は問題ではありません。重要なのは、そこからどんな学びを得られたのか、今後サービスにどう活かせるか、ということではないでしょうか。

施策を終えたら、「次はどうするか」「もっといいやりかたはないか」を再度検討し、また次のタスクに着手し、仮説検証のサイクルを回していきます。

以上が、クックパッドニュースで始めた数値改善の取り組みの大まかな流れになります。

チームメンバーが共通のものさし(KPI)で会話をし、効果を確認・検証するサイクルを回し始めたことで、ほんの少しずつですが、数値にもよい影響が出はじめてきました。

おわりに -デザイナーが数値を見る意義-

f:id:mura24:20151120190730j:plain

数値による定量データは、サービスの成長やユーザーの満足度を測る方法のひとつです。

デザイナーが数値に基づいた仮説の上でサービスやUIをデザインすることで、「なんとなくこのほうがよさそう」という感覚的な部分を自身できちんと検討できたり、デザインを改善してゆく際の学びを多く得られるでしょう。

たとえばバナーひとつを例にとっても、どういったストーリーでどれくらいのユーザーがそのバナーを目にするのか、バナーがクリックされたとして、きちんと目的は果たせたのか(コンバージョンに至ったのか)、など数値から分かることはたくさんあります。

クリック率は高く、コンバージョンが低ければ、「バナーと遷移先のイメージに齟齬があったのかもしれないので、遷移先の内容をより強く反映させたデザインや文言を再度検討しよう」というアイデアや、「バナーで訴求していたメッセージが対象ユーザーからかけ離れているのではないか」といった仮説を検証することが可能になるでしょう。

私自身もデザインを提案する際「なぜそのデザインを改善する必要があるのか」「それがどれくらいのユーザーの助けになるのか」「改善した結果どんなよいことがあったか(悪いことがあったか)」といった判断や検証を自分で行えることで、より責任をもってデザインに臨めるようになりました。

よりよいサービスをユーザーに届けるために、日々のデザインに数値を活かしてみてはいかがでしょうか。

デザイナー募集中です!

クックパッドでは、どうしたらユーザーの毎日の料理が楽しくなるかを日々考えながらサービス開発を進めております。ユーザーのくらしを豊かで楽しいものにするデザイナーを募集しています!あなたのご応募をおまちしております。

/* */ @import "/css/theme/report/report.css"; /* */ /* */ body{ background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527163350.png'); background-repeat: repeat-x; background-color:transparent; background-attachment: scroll; background-position: left top;} /* */ body{ border-top: 3px solid orange; color: #3c3c3c; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; line-height: 1.8; font-size: 16px; } a { text-decoration: underline; color: #693e1c; } a:hover { color: #80400e; text-decoration: underline; } .entry-title a{ color: rgb(176, 108, 28); cursor: auto; display: inline; font-family: 'Helvetica Neue', Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', Meiryo, Osaka, 'MS Pゴシック', sans-serif; font-size: 30px; font-weight: bold; height: auto; line-height: 40.5px; text-decoration: underline solid rgb(176, 108, 28); width: auto; line-height: 1.35; } .date a { color: #9b8b6c; font-size: 14px; text-decoration: none; font-weight: normal; } .urllist-title-link { font-size: 14px; } /* Recent Entries */ .recent-entries a{ color: #693e1c; } .recent-entries a:visited { color: #4d2200; text-decoration: none; } .hatena-module-recent-entries li { padding-bottom: 8px; border-bottom-width: 0px; } /*Widget*/ .hatena-module-body li { list-style-type: circle; } .hatena-module-body a{ text-decoration: none; } .hatena-module-body a:hover{ text-decoration: underline; } /* Widget name */ .hatena-module-title, .hatena-module-title a{ color: #b06c1c; margin-top: 20px; margin-bottom: 7px; } /* work frame*/ #container { width: 970px; text-align: center; margin: 0 auto; background: transparent; padding: 0 30px; } #wrapper { float: left; overflow: hidden; width: 660px; } #box2 { width: 240px; float: right; font-size: 14px; word-wrap: break-word; } /*#blog-title-inner{*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-position: left 0px;*/ /*}*/ /*.header-image-only #blog-title-inner {*/ /*background-repeat: no-repeat;*/ /*position: relative;*/ /*height: 200px;*/ /*display: none;*/ /*}*/ /*#blog-title {*/ /*margin-top: 3px;*/ /*height: 125px;*/ /*background-image: url('http://cdn-ak.f.st-hatena.com/images/fotolife/c/cookpadtech/20140527/20140527172848.png');*/ /*background-repeat: no-repeat;*/ /*background-position: left 0px;*/ /*}*/