人間中心設計のプロセスを採用したリニューアル

こんにちは、Amebaでデザイナーをしております植田（@uuepoo）です。

2011年8月9日にリニューアルしたAmebaプレゼントについて、
どうプロジェクトを進めて具体的に何を変えたのかをお話したいと思います。

Amebaプレゼントとは

デジタルアイテムを贈り合えるサービスです。
プレゼントのほかに、プレゼントの周りを装飾できるフレームや、プレゼントを包むラッピングも一緒に選べます。
プレゼントは有料のもの、無料のものと両方あり、
種類も好きな文字を入れることが出来るものや、自分のピグが入るもの、動くプレゼントがあったりと様々です。


プロジェクトの流れ

１ユーザーアンケートの実施
２RN前のサイトを使ったユーザビリティテスト
３問題→原因→ユーザーの欲求を評価グリッド法で分析
４ペーパープロトの作成
５モック作成
６モックを使ったユーザビリティテスト
７デザインブラッシュアップ、fix
８実装
９本番と同様の環境でのユーザビリティテスト


それでは、1つずつ説明していきます。

１ユーザーアンケートの実施

ここではAmebaユーザーに対し、利用状況の調査を行いました。
（プレゼントを贈る頻度・課金状況・贈る相手について・きっかけなど）

集め方は
Amebaのマイページ、お知らせテキストで誘導(1日)
得た有効回答は、PC 4,422 MB 12,046でした。


結果のサマリー
∟有料プレゼントを初めて贈るきっかけは「誕生日」
→ブログ面に誕生日前日と当日にバナーを表示させる施策
　※先行してリリース
∟「気持ちを表現する」プレゼントを贈りたい

∟プレゼントをもらったときは「プレゼントをお返し」することが多い
→もらったプレゼント詳細ページに「お返しモジュール」を表示
　※先行してリリース
∟無料プレゼントを充実させてほしい


２RN前のサイトを使ったユーザビリティテスト（社内：6人×30分）


このユーザビリティテストでは利用状況について事前にアンケートに答えてもらいました。
（プレゼントをもらったことがあるか・シチュエーションは？・贈った後は？など）

そして実際に最も多い利用シーンをタスクにしてプレゼントを贈る一連の流れをやってもらい
つまづく点や分かりにくい点などを吸い上げました。

<このユーザビリティテストで得た改善策>
  • ラベリングの見直し
    「プレミアプレゼント」→「動くプレゼント」
    「プチ」→「無料プレゼント」
    「フレーム」→「飾りつけ」

  • フローの見直し
    プレゼントの種類によって選択できるラッピングやフレームが違う仕様になっていたが
    ユーザーはそれを理解しておらず混乱
    →プレゼントの種類に関係なく選べるラッピングやフレームを同じにしフローを統一

  • 必要な情報の表示
    所持アメゴールドとクーポン数の表示がないため、自分が買えるプレゼントが何なのかがわからない
    →全ページに所持アメゴールドとクーポン数を表示


３問題→原因→ユーザーの欲求を評価グリッド法で分析



・ユーザーの欲求はこの4つだということが判明
  • ∟気軽に贈りたい
  • ∟わかりやすいフローがいい
  • ∟相手を喜ばせたい
  • ∟思いを伝えたい

ここで理想のユーザーフローを可視化して
どんなサービスを目指すのかメンバー間での意思統一を図りました。

（これはプロデューサーがまとめてくれたものです。
ほかの施策を考える際もよくこのシートに立ち返り非常に有効でした）



４ペーパープロトの作成

１～３の結果をもとにカンタンなペーパープロトを作成しました。
どんなページにするかここでイメージのすり合わせを短時間でスムーズに行えました。


５モック作成

実際にPC,MBで各ページとページ遷移についての確認をしました。
ペーパープロトだけでは分からなかった実際の手触りがわかるのでここでデザインも含めけっこう揉んでいました。（MBは特に）

理想とする形の認識は一致しているので、パターンをいくつか作成しては比べてみて修正していくというサイクルを何回か繰り返し、一番良いと思うものを作り上げていきました。

ここでモックを元に要件定義もほぼfixしました。

プレゼント詳細のモック（MB)

６モックを使ったユーザビリティテスト（社内：4人×30分）

細かい挙動はまだ実装されていないため、ページ毎の印象や大幅な変更をしているフローがスムーズかの確認を重点的に行いました。

・このユーザビリティテストで得た改善すべき箇所

  • ∟レイアウトの改善（選ぶもの/入力するものにしっかりと目がいくように）
  • ∟プレビュー部分をどう見せるかの検討（大幅な変更をしているので戸惑う人がいた）
  • ∟完了画面のテンションを高めに（贈ってうれしい気持ちの最大化を図る）

７デザインブラッシュアップ、fix

アテで入れていたデザインをブラッシュアップしfixしました。
（PCはこの段階でほぼfix状態に、MBは最後の最後まで修正していました。）

８実装

リリースに向け、裏側も含め実装していきます。

９リリース前、本番と同様の環境でのユーザビリティテスト（社内：6人×30分）

想定外な結果はほぼなく、最終確認という感じで有効でした。
色の変更、ラベルの統一等の微修正を反映させてリリースです！


present*今回のRNで大幅に変更をしたページの例
∟フレーム選択ページ

RN前

∟実際にプレゼントの周りを囲んだときのイメージが分からない


RN後

∟ページ右側にあるサムネをクリックすると、すぐに左側でプレビューできるので選びやすくなりました。

このページの反響が一番多く、フレーム単体の売り上げが4～5倍と伸びました！


結果


CVR5.1%アップ

■8/2-8週　14.9％
■8/9-15　20.00％
（※リリースは8/9）

目標としていた20%を達成することが出来ました！


おまけ


・ユーザビリティテストについて



・会議室を利用

・被験者1名に対して、ファシリテーター1名と観察者1～2名

・オブザベーションシートを利用
※こちらのワークショップで習ったもの

・社内でサービスを利用している人に協力をお願い

・一人あたり30分
その後、30分でテスト結果のすり合わせ

・PCの画面を録画するにはこちらを利用
TechSmith
http://www.techsmith.com/camtasia/

最後に

しっかりとユーザーの欲求を分析しそれをもとにページをつくっていくというのは感覚に頼らずすごく建設的な進め方でした。
モック段階でかなり試行錯誤できたので最後リリース前のバタバタがないのがこれまでとは違う印象になったプロジェクトでした。

目標としていたCVRの数字もしっかりついてきてくれたので良かったです。