Amebaプレゼントリニューアル

テーマ:
こんにちは、Amebaでデザイナーをしております植田です。

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

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


present*プロジェクトの流れ

1ユーザーアンケートの実施
2RN前のサイトを使ったユーザビリティテスト
3問題→原因→ユーザーの欲求を評価グリッド法で分析
4ペーパープロトの作成
5モック作成
6モックを使ったユーザビリティテスト
7デザインブラッシュアップ、fix
8実装
9本番と同様の環境でのユーザビリティテスト


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

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

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

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

CAUXのブログ

・結果のサマリー

∟有料プレゼントを初めて贈るきっかけは「誕生日」
→ブログ面に誕生日前日と当日にバナーを表示させる施策
 ※先行してリリース

∟「気持ちを表現する」プレゼントを贈りたい

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

∟無料プレゼントを充実させてほしい


2RN前のサイトを使ったユーザビリティテスト(社内:6人×30分)

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

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

<このユーザビリティテストで得た改善策>

・ラベリングの見直し
「プレミアプレゼント」→「動くプレゼント」
「プチ」→「無料プレゼント」
「フレーム」→「飾りつけ」

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

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

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

CAUXのブログ

・ユーザーの欲求はこの4つだということが判明

∟気軽に贈りたい
∟わかりやすいフローがいい
∟相手を喜ばせたい
∟思いを伝えたい

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

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

CAUXのブログ

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

CAUXのブログ

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

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

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

プレゼント詳細のモック(MB)
CAUXのブログ

6モックを使ったユーザビリティテスト(社内:4人×30分)
細かい挙動はまだ実装されていないため
ページ毎の印象や大幅な変更をしているフローがスムーズかの確認を重点的に行いました。

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

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

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

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

9リリース前、本番と同様の環境でのユーザビリティテスト(社内:6人×30分)
想定外な結果はほぼなく、最終確認という感じで有効でした。
色の変更、ラベルの統一等の微修正を反映させてリリースです!

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

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

RN後
CAUXのブログ


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

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


present*結果

CVR5.1%アップ

■8/2-8週 14.9%
■8/9-15 20.00%
(※リリースは8/9)

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

present*おまけ

・ユーザビリティテストについて
CAUXのブログ



・会議室を利用

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

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

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

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

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


present*最後に

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

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



AD

社内HCD勉強会の振り返り

テーマ:
こんにちは、Amebaのディレクターをしております鈴木です。

6/4に開催されたWebUX研究会で
弊社のHCD勉強会についてお話させていただきました。
今日はそのご報告をしたいと思います。

WebUX研究会は、
横浜デジタルアーツの浅野先生が主催されている勉強会です。
今回の内容はこちら。

-----------
第4回WebUX研究会

第一部「コミュニティーの学び」
14:00~15:10
・基調講演:千葉工業大学 安藤先生
「社会人の“学び”を促す“学び”のプロデュース術: AIITデザインプログラムの経験から」
・社内HCD勉強会の振り返り:サイバーエージェント鈴木
・他社との交流ShibuyaUX:GMOメディア伊藤
・HCDを学ぶコミュニティ"hcdvalue"の価値:ECナビ榎本

第二部「WebとUXデザイン」
15:30~17:00
・UXデザインプロジェクトガイド :ネットイヤーグループ坂本さん
・マルチデバイス時代のUX:楽天脇阪さん
パネルディスカッション
パネラー:安藤先生・楽天脇阪さん・ネットイヤーグループ坂本さん・アクアリング平野さん
-----------

私は第一部でお話しさせていただきました。
参加者の半分くらいは知っている方だったのですが、
それでもそうとう緊張しました

千葉工業大学の安藤先生が
学んだことを振り返る“省察”が大事だとおっしゃっていましたが、
今回の発表はまさにそれ。

部員とともに、勉強会の成果と反省点、
そして次にどうつなげるかを考える良い機会となりました。

HCDを活かした開発事例については、
このブログでご紹介していく予定です。
おたのしみにニコニコ


研究会の全貌はこちらをどうぞ。
第4回WebUX研究会 報告 前編|情報デザイン研究室
第4回WebUX研究会 #webux 第二部「WebとUXデザイン」|WarlockReport
Togetter - 「第4回WebUX研究会 #webux」



AD

第2回 Shibuya UX Meeting

テーマ:
久しぶりの更新になってしまいました。
こんにちは技術推進本部の渡辺です。

今回は先週開催されたShibuya UX Meetingの様子についてレポートします。

第2回目の今回は「User Centered Agile」と題して2つの企業の事例発表とその後パネルディスカッションが開催されました。

個人的には「User Centered Agile」という言葉に違和感を感じるので「Agile UCD」と呼ばせていただきます。

CAUXのブログ


まずはじめは楽天の坂田さん。
・要件が既に決まっていて検証の余地がない
・妥当性のある仮説を導き出せずPDCAを廻せない
という社内における開発のデメリットを改善するために、Agile UCDを実務に取り入れた一例を紹介。

基本はUCDの作業なんですが、どの部分がAgileなのかというと、シナリオ毎にイテレーションを分けて開発を同時進行で廻すというのが今回のポイント。

全員参加で共通言語化され期間が短縮されるというメリットを得られたそうです。

一方、一部デメリットも存在するようで、同時進行部分での人のアサインが能力などで左右されるために、難しい様子でした。

とまぁ、楽天内での事例を紹介していただいたんですが、どうやって導入していくフローに変わっていったのかが聞きたいところ。普段から情報をキャッチアップしていてもなかなか実務に結びつけられてない人も多いはずですよねぇ。
その辺りの話を後ほどの懇親会で聞いてみたんですが、やはり導入には熱意とそれなりのエネルギーが必要なようでした。
開発コストを自分の部署が持つというようなリスクも背負ってるそうですが、さらっと説明したほど簡単なことではないようです。
ただポイントとしてはスモールスタートしたのがきっかけだったみたいです。
何事も一気には変えられないですよね!?
ローマは1日にして何とやら…

CAUXのブログ


さて続いては、ジェネシックスの上杉さん。
新組織での担当だったので、Agileの導入は比較的容易だったようです。

もともとエンジニアであり、スクラムマスターでもある上杉さん。
自然とUCDにもAgileを取り入れられたようで、むしろ自分が発明したのでは?と思ったくらい自然発生した様子を面白おかしく説明してくださいましたw
この方とにかく話がうまい!

メリット部分は楽天の坂田さんと似たようなポイントでしたが、総じて開発工数へのメリットは大きいようです。


そしてその後は軽食をとりながら、パネルディスカッションと懇親会が開催。
ここではAgile UCDを取り入れることで、ユーザー満足度がどのようにあがったかを計る方法などの質問も活発に出ていましたが、今回のAgileでのメリットとは直接関係ないので、割愛させていただきます。

それぞれの企業での取り組みをいろいろ聞けましたが、まだまだ実践に移せているのは一部の組織なんだなぁっと実感。
Agileにすることのメリットは大きそうなので、やらないという理由はない気がするのですが、あとは実践に移す熱意かもしれませんね。

とりあえずスモールスタートで行きたいと思います。
AD