サイトリニューアルにおけるUXの考え方と4つのプロセス

タスク・プロジェクト管理ツール「Jooto」の責任者の下田祐介です。2018年7月18日にサービスを刷新しました。ひとつのSaaSがどのようにしてリニューアルしたのか、そのプロセスと手法の全貌をお伝えします。

これからWebサービスをリニューアルしようとしている方にとって少しでも参考になればと思い、今回ferretに寄稿することにしました。

簡単に紹介をすると、Jootoはかんばん方式のタスク管理ツールです。ユーザー数は10万人を突破していましたが、よりスタートアップらしい成長を遂げるために、2017年9月20日にPR TIMESに事業譲渡し、すぐにリニューアルプロジェクトが始まりました。以下時系列にそのプロセスを紹介します。

1. リニューアルを決めた理由
2. 調査フェーズ
3. 分析フェーズ
4. 情報設計フェーズ
5. デザインフェーズ

この記事で紹介するJootoのリニューアル事例をもとに、自社サービスのリニューアルの参考にしてみましょう。

1. リニューアルを決めた理由

ボトルネックの確認

創業当初は「楽しくなるタスク管理」というコンセプトの元、タスクの「起票」と「確認」という２つの行動を、最小限のステップでストレスなくユーザーに体験してもらうことを目指していました。

しかし、ユーザー数は伸びても、売上と有料会員数が思った以上に伸びないという状態が続きました。そこで分かったのは、有料ユーザーのチャーンレート(解約率)が非常に高かったのです。

チャーンレート（解約率） = 今月解約したユーザー数 / 前月のユーザー数 x 100

SaaSにとって最も重要な指標のひとつとされていますが、これがJootoの成長を阻害していたのです。ここを抜本的に改善出来れば、複利の理論で成長曲線が大きく変わります。

つまり「サービス登録時のユーザーの期待値を維持できず、解約されてしまう」状態にあったと考えられます。

言い換えると、ユーザーの課題に対して提供しているソリューションが合ってない、つまりそもそもプロダクトとしてマーケットに対してギャップがあるということが分かりました。プロダクトのリニューアルを決断したのはこれが理由です。

ゴールの設定

ただ、闇雲にリニューアルをする訳にはいきませんでした。事業のゴールは「売上」です。

それを達成するために重要な指標としてチャーンレート（下記の図でいう有料解約数）の他、2つのKPI（新規登録数と新規課金数）を追加しました。

そして、それぞれのKPIに影響するであろう機能や、ユーザーの行動に着目して、そのKPIの改善を目的としてリニューアルを行うことにしました。たとえば有料ユーザーであれば有料の機能であるガントチャートをどれくらいの頻度で利用しているか？などです。

・そもそもなぜリニューアルをするのかゴールを明確にする。
・事業の成長を阻害しているボトルネックを見つける。
・ゴール設定とその配下に重要なKPIを3つ設定。それに紐づくサービス内でのユーザーの行動を定義する

2. 調査フェーズ

ユーザーインタビューを実施

まずユーザーの課題を再定義する必要があると考えた私たちは、ユーザーと対話することにしました。ミートアップを開催し、定量的な目的で多くのユーザーの声を聞く機会を設けました。

いっぽうで、より質の高いデータを収集するため、1対１の個別インタビューを何度も行いました。「AImインタビュー」という手法を使いました。

■AImインタビューとは？

2008年に富士通研究所が開発した手法で、現場ユーザーが織り成す多様な関係性や感じているニーズを、 本人も気づいていないレベルまで把握し、ソリューションの方向性を、その関係性を踏まえたストーリーとして表現することを目的する手法です。

機能要望やアンケートによって得られる量的データはなく、 ユーザーの深層意識と、現場の多様な文脈をとらえる体系的な方法によって質的データを得ることができます。

＜インタビューの構成＞
・普段の業務状況（40分）
・理想の業務状況（40分）
・質疑応答（10分）

ユーザー自身がふだんの業務の中で、どのような人と関わり、1日をどう過ごし、何にやりがいを感じ、理想の業務状況は何か？というところまで深堀りしていきました。Jootoそのものについて抱える課題と潜在的なニーズを知ることが目的でした。

ヒューリスティック評価

UIの専門家が経験則に基き、対象となるアプリケーションを評価する方法です。「ニールセンのユーザビリティ10原則」をベースにして、「操作性」「快適性」「誘導性」の3つのポイントで実施しました。

評価の例（ログイン画面）

評価の例（プロジェクトボード画面）

・課題を再定義するために定量的、定性的フィードバックをユーザーから集める。
・現状のユーザーインタフェースの評価を行い、問題点を洗い出す。

3. 分析フェーズ

KA法で「価値」を見つけ出す

ユーザーインタビューによって得られた意見から、心の声を介して、ユーザーがどんな価値を求めているのか/いま感じているのか、を探ることにしました。

上の図のようなKAカードを数多く作成します。この「価値」と、ヒューリスティック評価で得られたUIの問題点を照らし合わせ、そのギャップとなる部分にユーザーの課題と、それに対するソリューションのヒントが存在すると考えました。

※実際作成したKAカード

それぞれのカードの右下にある価値に注目し、近しいものをまとめてグルーピングし、より大きな価値観を9つ見出しました。

そして、プロジェクトを管理する「マネージャー」、タスクを実行する「プレイヤー」というセグメントが存在するということもわかりました。

• 忘れない価値
• 今がわかる価値
• 他者と共有できる価値
• 新着がわかる価値
• 利用するハードルが低い価値
• 誰でも使える価値
• シンプルに使える価値
• 全体がわかる価値
• チームで使える価値

グルーピングしたKAカード（マネージャー）の例

グルーピングしたKAカード（プレイヤー）の例

それぞれの関係性を見ることにより、体験改善における注力ポイントを見つけることにも役立ちました。これを価値マップと呼びます。

ユーザーの抱える課題とは？

価値マップを作成しているうちにユーザーの課題も明らかになりました。

マネージャーにおいては、「タスクの確認ミス/漏れがどうしても多くなる」「タスク更新がある度に通知が来るが、そのタスクをすぐに見つけられない」という課題がありました。

プレイヤーにおいては、「タスクを書き出して満足して放置してしまう」「ツールを学習するのが面倒臭い」などの課題があったのです。

これはつまり、マネージャーは「今すぐ進捗を把握したい」、プレイヤーは「（面倒なく）今すぐタスク管理を始めたい」に繋がります。

顧客を想像するためのペルソナ設計

ユーザーセグメントとして定義した「マネージャー」と「プレイヤー」それぞれに対してペルソナを作成することで、発見した価値と相互性の実現を目指します。

インタビューを通じてわかった顧客の要素を分解し、ターゲットとしたいメジャーな顧客像を意識して具体的に作り上げます。情報設計フェーズにおいて、カスタマージャーニーマップを作るときに活用します。

管理しているプロジェクト数が多く、進捗のキャッチアップが出来てない。「タスクの確認漏れを防ぎたい」というペルソナのイメージ

タスク管理をやりたい気持ちはあるが、習慣化しない。「面倒くさい」が先行してしまうペルソナのイメージ

サービスのコンセプトを決定

価値マップをベースにして、重要なキーワードを抽出します。「チーム」「今がわかる」「忘れない」「シンプル」「安心」「大丈夫」「楽しい」などです。ここから文章を構築し、下記のコンセプトが完成しました。

「”今”が見える安心感」

今 = 「プロジェクトの今、チームの今がわかる、今がわかれば、未来も読める、チームのために今を見る」
見える = 「頭の中、現在の進捗状況、タスクを持っているメンバー、すべてのことが見えることの重要性」
安心感 = 「忘れてもいい安心感、忘れないという安心感、誰にでも使いやすい安心感、プロジェクトの、チームの今が見えるから、Jootoがあれば安心」

・インタビューの内容をまとめ、KA法を使ってユーザーがサービスに求める本当の「価値」を発見する。
・具体的なターゲット像をイメージするためにペルソナを作成する。
・現在、サービスとして提供できてない価値からユーザーの課題を見つける。
・価値マップと、見えた課題からサービスとしてあるべきコンセプトを決定する。

参考：
タスク・プロジェクト管理ツールJooto(ジョートー)

4. 情報設計フェーズ

カスタマージャーニーマップの作成

実際のユーザー像と、ユーザーの求める価値がわかってきました。価値マップとインタビュー結果をベースに、ペルソナがどのような行動をとるかのマッピングを行いました。

通常カスタマージャーニーマップは、サービスの購買行動に至るまでをマッピングすることが多いのですが、今回はツール利用価値を上げるという目的のリニューアルなので、Jootoに登録後の行動を対象としました。

作成にあたっては、ユーザーの行動時の思考や感情も想像します。これによりユーザーの行動が見えるようになるため、最適な画面遷移や配置要素の指標となります。

マネージャーのカスタマージャーニーマップ

プレイヤーのカスタマージャーニーマップ

加えて、その思い・考えを良い方向に導くために、「検討ポイント」も追加しました。この「検討ポイント」と上記で設定したKPI Driverを照らし合わせ、リニューアルで注力すべきポイントにフォーカスしました。

例）
プレイヤーの思考 :「思いついたらすぐに書き出したい」
検討ポイント : タスク作成の仕方、入力項目の完結さ
影響するKPI : タスク数、ログイン頻度

ワイヤーフレームの制作

現バージョンの要素を分解し、ジャーニーマップをもとにおおまかな遷移設計を行い、その遷移をベースにワイヤーフレームの制作を行いました。

タスク作成時の画面のワイヤーフレーム

2カラムから1カラムの設計に。情報の流れを1本にすることで、目線が迷わず適切に操作できる設計にしました。プレイヤーの思考「思いついたらすぐに書き出したい」を実現させるための一例です。

ヘッダー情報の整理。各機能への導線

導線の整理をすることで、知りたい “今” を見つけやすくする思想をとりました。まず、自分のための情報か、プロジェクト全体の情報かを分けるための導線をヘッダーに設置し、いつでもどこからでも切り替えられるように。

ダッシュボード（自分のための情報エリア）では、マネージャー/プレイヤーそれぞれが見たい情報を設置し、プロジェクト（プロジェクト全体の確認エリア）では、タスク俯瞰用のボードとスケジュール確認用のガントチャートを設置しました。

・ユーザーの行動と思考を知るためにペルソナを使って、カスタマージャーニーマップを作成する。
・ジャーニーマップを参考に、最適な遷移と画面設計を行う。

5. デザインフェーズ

ワイヤーフレームが一通り出来たら、さいごに視覚的なデザイン作成に進みます。「今が見える安心感」というコンセプトと、作成した価値マップを再度見直し、サービスを表現するキーワードのアイデアを出し、重要なキーワードをグループ化してデザインコンセプトを策定していきました。

デザインコンセプトの元となるキーワードマッピング

カラー設計

ボタンやカードなどの要素には丸みを持たせることで、優しさや親しみが増し、簡単で近づきやすい印象を与えるようにしました。色の多用と丸みをおびた要素で子供っぽい印象になりすぎないように、色の配分や余白で調整をしました。

・コンセプトと価値マップからデザインコンセプトとなるキーワードマッピングを作成。
・キーカラー、サブカラー、アクセントカラーを決める。
・ワイヤーフレームにデザインコンセプトを反映する。

まとめ：JootoのリニューアルにおけるUXの考え方

人間には「ワーキングメモリ」というパソコンでいうCPUのような作業記憶という領域があると言われています。ここには瞬間的に最大で7つ程度の事柄しか留めておくことが出来ない、という研究結果があります。

タスクというものは、自分で作成したものであれ、他人から与えられたものであれ、一度はどのような形でもアタマの中で認識をしているはずです。しかし、ワーキングメモリの概念から考えると、その認識したタスクは、すぐにどこかに書き留めておかないと忘れてしまうのです。

参考：
リニューアル前のJooto

参考：
リニューアル後のJooto

このようなことから、タスク管理ツールであるべきUX（ユーザーエクスペリエンス）は、タスクを「作る」と「思い出す」この２つをいかにシンプルに実現するか、だと思います。

Googleカレンダーなどの、サードパーティーとの連携も強化し、「整理」「記録」「記憶」、をアタマの外で完結させ、適切なタイミングでお知らせをしてくれる、つまり「能動的なタスク管理」をしなくていい世界。

それこそJootoが目指すべきUXだと今回のリニューアルプロジェクトを通じて定義することが出来ました。

定義したKPIにリニューアルがどれくらい貢献しているかは、日々分析をしないとわかりません。検証と改善を繰り返さないといけないため、ある意味リニューアルプロジェクトはずっと終わらないのだと思います。