サイトリニューアルにおけるUXの考え方と4つのプロセス
タスク・プロジェクト管理 ツール 「Jooto」の責任者の下田祐介です。2018年7月18日にサービスを刷新しました。ひとつの SaaS がどのようにしてリニューアルしたのか、そのプロセスと手法の全貌をお伝えします。
これからWebサービスをリニューアルしようとしている方にとって少しでも参考になればと思い、今回ferretに寄稿することにしました。
簡単に紹介をすると、Jootoはかんばん方式のタスク管理 ツール です。 ユーザー 数は10万人を突破していましたが、よりスタートアップらしい成長を遂げるために、2017年9月20日にPR TIMESに事業譲渡し、すぐにリニューアルプロジェクトが始まりました。以下時系列にそのプロセスを紹介します。
- リニューアルを決めた理由
- 調査フェーズ
- 分析フェーズ
- 情報設計フェーズ
- デザインフェーズ
この記事で紹介する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 にリニューアルがどれくらい貢献しているかは、日々分析をしないとわかりません。検証と改善を繰り返さないといけないため、ある意味リニューアルプロジェクトはずっと終わらないのだと思います。
