Tradecraftに入って最初に出た各自がそれぞれやるべき課題のひとつに実際のプロダクトの改善にチャレンジするものがありました。全体の流れは以下のようなもの。
- 自分が改善したいと思う、そして誰もが知っているアプリを選ぶ
- 問題点を見つけ、その仮説を立てる
- ユーザビリティテスト（ゲリラ！）を行い、仮説を検証する
- 改善のプロトタイプを作る
- プロトタイプを検証するユーザビリティテストを行う
- この一連のプロセスをケーススタディとしてまとめる
インストラクターのZacがひとりひとりに対して、丁寧にレビューをしてくれていたのですが、他のプロジェクトが始まり忙しくなったせいもあり、公開するための編集を放置してしまっていました。それをようやくまとめなおし、遂にMediumへ投稿することが出来たのが以下の記事でした。
この記事は、自分のスキル故に英語ではうまく書ききれなかった補足事項、Tradecraftのインストラクターや仲間からのフィードバックなどを書き足した日本語版です。
また、英語どころか日本語のレベルが落ちており、お世辞にも読みやすいとは言えなかった私の下書きを校正してくれた夫 @hmsk に感謝します。
問題点の仮説
昨年、ポートランドへ旅行に行くにあたってFoursquareを使っていた時に、ふと自分が何気なくデスクトップブラウザで利用していることに気付きました。普段はモバイルアプリも使っているにもかかわらず。そこで旅行の計画を立てるのにモバイル版を使ってみたところ、思っていたよりも使いづらいことに気付きました。近くの場所にあるスポットを探すのには便利なものの、現在地とは異なる街の情報を収集するのに不向きでした。
この問題を解消、使い勝手を改善するにあたって、目指すべき方向がビジネスと逸れていてはいけないので、まずFoursquareのコンテンツや使っている言葉などを調べました。すると、App Storeの説明で「旅行の計画」、そして「気に入った場所をリストに追加する」ことを勧めていました。公式ブログの記事を一通り読んでみると旅行ガイドの紹介も積極的に行っていて、私がつまづいた「現在地とは異なる街の情報を収集する」ことは重要なユースケースのようです。
どうやらこの方向で間違っていないことを確信出来たので、次のステップに進みました。
仮ペルソナ
オンラインでFoursquareのユーザーを調査したり、身の回りのユーザーのことを思い浮かべながら仮ペルソナを作りました。「好奇心が強く、さまざまな新しい場所を探すことが好きな人」と定めました。普段の仕事なら、ペルソナは何人もインタビューを繰り返して作り上げるものですが、このプロジェクト中のプロセスにおいては短期間で仮説検証を繰り返す部分が重要なため、ここにはあまり多くの時間をかけていません。うまい当たりをつけることが大事です。
ジョブストーリーとシナリオ
ペルソナを元に、「彼らは、何をゴールにしてこのアプリを使うのか？」というストーリーを書きました。ジョブストーリーというフレームワークを用いました。ジョブストーリーについては、日本語だとこの記事が分かりやすいです。
ゲリラユーザビリティテスト
サンフランシスコの町中にある公園に居た人に実際に声をかけて、仮説の検証を行いました。テストを行う前には、「イメージしてください。あなたは旅行を計画していて、どこに行こうかと検討しています。（街でも国でも大丈夫です）」と彼らに伝えていました。
課題では、「2人の知人でテストし、5人の見知らぬ人に声をかけること」と言われていました。効率的にユーザビリティテストを行うには多すぎても無駄が多く、5人が良いそうなのです。おそらく最初の2人の知人は、テスト自体のリハーサルにあたるのでしょう。
テスト用に準備した質問
これに沿ってFoursquareのiPhoneアプリを操作してもらいました。
- 旅行先をこのアプリで探すとします。どうしますか？
- 気になる場所を見つけたとします。その場所の詳細ページであなたは何を見ますか？
- その場所を気に入り、そこへ旅行に行く計画を立てるとしたらあなたは次に何をしますか？
この際、いま何を考えているのか、何故そこをタップしたのか、など思ったことを口に出して言ってもらうようにします。同意を貰って録画や録音をすると後からテストの結果だけでなく、インタビュー自体の振り返りにも役立ちます。インタビュアーとは別の人が撮影を担当するようにして2人組で行うとスムーズです。
つまづきポイントの整理と重み付け
録画を見返しながら、ユーザーがつまづいた点をポストイットに書き出し、どこでつまづいたのかをカテゴリーごとに分けて集計しました。そして四象限マトリクスで、ユーザーにとって大事なこと、ビジネスにとって大事なことの二軸で重み付けを行いました。
私が行ったテストでは、現在地より遠いところにある目的地についての検索結果までたどりテストした全員が着くことが出来ませんでした。検索は最も大事な機能のひとつですが、もしも新規のユーザーが欲しい情報にたどり着けなかったら、早々にアプリから離脱してしまうでしょう。ユーザーのつまづきポイントである検索機能の改善にフォーカスをあてることにしました。
また、写真を見る機能でもいくつかつまづきポイントが見られました。彼らは旅行に行く前に現地の高画質な写真を見ることを望んでいて、写真の見せ方についても改善の余地があるように思われました。
タスクフロー
旅行先をFoursquareで探して決めるまでのプロセスをタスクフローにしました。お店などのレビューのページはFoursquareの肝となるところですが、残念ながらユーザビリティテストではほとんどのユーザーがそのページにたどり着くことが出来ませんでした。
デザイン
スケッチ
見つけた問題に対して解決案のUIを作り込む前に、どういった案が最善かを探るために手書きのスケッチを行いました。
プロトタイピングと検証
SketchとプロトタイピングツールのMarvelを使ってプロトタイプを制作し、新たに5人に対してユーザビリティテストを行いました。以下は、プロトタイプとそれぞれのテストの結果です。
1 ホームページ
Foursquareは近くの場所を探すのには大変役立ちますが、旅行前に目的地を見つけることは簡単ではありません。参加者はFoursquareによる目的地をおすすめして欲しいと思っていました。
- メインビジュアルをユーザーの現在地に基づいて変更しました
- ユーザーは魅力的な目的地を知りたいと思っているので、おすすめの目的地をすすめる特集コーナーを追加しました
- FoursquareはListsメニューの中で特集コーナーがあるのですが、新しいユーザーはListsメニューにそれがあると気付きません
そこで、それらスポットリストの特集をホームページに移動しました - ラベルを「Search」から「Explore」に変えました
文字通りExploreは新しい場所を探すための言葉で、Searchよりもエモーショナルで新しいホームページにふさわしいと考えました
📝 ユーザビリティテストでは5人中4人がFeatured destinationをタップしました
2 検索フロー
旅行前に目的地を見つけることは、参加者の主なつまづきポイントでした。大きな問題は、街の名前を検索バーに入れた時に、その街の名前の入ったお店が検索結果として返ってきてしまうことです。そこで、ユーザーが都市の名前を入れていた場合には、都市のおすすめスポットを提示してあげることにしました。
「Near me」と書かれている場所は、地域の名前を入れる場所ですが、最初のテストではほとんどの人が気付きませんでした。そこでタップ出来るエリアであることを分かりやすくするため、色とアイコンを変更しました。
📝 ユーザビリティテストでは5人全員が位置の入力エリアに気付きました
検索ボックスに文字を入れる前の画面で、人気の都市を提案してみます。
📝 人気の都市を5人中2人がタップしました
街の名前を検索バーに入れた時に、その街の名前の入ったお店が検索結果として返ってきてしまう問題には、もしも街の名前だった場合にはその都市への検索結果を提案することにしました。
📝 5人中3人が街の名前をメインの検索ボックスに入れた後に表示された「Tokyo」をタップしました
「Tokyo」の検索結果はすべてのカテゴリーのお店が出てきてしまい、探すのが大変なため、都市名で検索した場合にはカテゴリーリストを表示しました。 また、写真の魅力がより伝わるように、サムネイルのサイズを少し大きくしました。
📝 5人中3人がカテゴリーボタンに興味を持ちました
3 詳細ページ
普段iPhoneを使う人は、シェアボタンとブックマークボタンを見つけることが出来ませんでした。iPhoneユーザーはAndroidのフローティングアクションボタンに親しんでおらず、押した先に「Add to List」ボタンがあることを予期できませんでした。そこで、それらのメインアクションとなるボタンを見える位置へと移動しました。
📝 5人全員が「Add to List」ボタンを簡単に見つけ、タップしました
新たな場所へユーザを導く
全体的に、改善後のプロトタイプでは参加者たちは旅行の目的地を楽しく探索できたんじゃないかと思います。
現在のFoursquareも便利ですが、ユーザーがアプリに期待するいくつかの機能が欠けているようにも思えます。Facebook Local、Yelpなどのローカル検索の競合が現れる中で、人が世界中のどこに居ても新たな場所を出会えることが出来る、旅へ出ることをサポートする、そんなアプリへと少し進化出来ると良いのではないかと考え、今回のケーススタディを楽しむことが出来ました。
Foursquareのファンとして、いつでもどこでも使いたいです。そしてFoursquareがこれからも新たな場所へと導いてくれると信じています。
感想
この記事を出すまでに何回か改良を加えています。最初にクラスメイトの子によるフィードバック（英語の初歩的なミスや、画像の書き出しサイズなど）、次にインストラクターによる細かなフィードバック、そしてその後ネイティブによる英文チェックの過程で、初めて見た人にも伝わる内容ヘと修正を加えました。そしてこの日本語版では、冒頭にも書いたように夫の校正で日本語の読み物としても分かりやすいものへと改良が加わりました。
この課題の後に、ベイエリアにあるスタートアップのプロダクト改善をいくつか行ったのですが、ベーシックなこのUXのプロセスが実地の課題に取り組む際にも役立ちました。
プロセスを体験するだけでなく、それを実践に応用する、そして記事としてアウトプットすることで、ようやく学びになるということを学びました。
