ペルソナ、デザインストーリー、ユーザータスクフロー、ワイヤーフレーム、プロトタイプ、そしてユーザビリティテストの実例：Instagram大好きなUXデザイナーが提案するコラージュ機能の場合

KORY 2014/09/03

今日の記事はUX Magazineに載っていた、「I Love You, Instagram … but Why Won’t You Let Me Make Collages?」という記事。著者のLin WangさんはUI/UXデザイナーで、この記事もそうですが他の作品もすごくレベルの高いUXデザインを制作されてます。今回はInstagramに機能追加をするというお題でデザインチャレンジ（実際のクライアントとかじゃないけど、デザインするならこうだ！という企画）をしています。(「勝手に広告」みたいですね。）ペルソナ、デザインストーリー、ユーザータスクフロー、ワイヤーフレーム、プロトタイプ、そしてユーザビリティテストまでガッツリとされて非常にクオリティーの高いものが集まっています。プロダクト企画の方には絶対に読んで頂きたい記事です。

この記事についてTwitterで「日本語に翻訳してブログに書いて日本の人に届けたいんだけどいいですか？」と聞いたら以下のように快諾頂いたので、翻訳して載せます。

@yuichikory you're welcome 🙂 Looking forward to it!

— Lin Wang (@linafab) 2014, 9月 2

（Linさん、ありがとう！Thanks so much for your kindness, Lin!!）

======以下、翻訳======

Instagram（インスタグラム）って凄いプロダクトだし、私はいつもInstagramを使ってます。Instagramがあると私の友達や他の興味を持ってくれている人に私の人生のストーリーをシェアすることが出来ます。でも時々、１つの写真だけで魅力的な物語を伝えることがとても難しいことがあります。「インスタグラムでコラージュを作るには？（how to make a collage on Instagram）」で検索すると９億件の検索結果が出てくるのは全く不思議ではありません。

そして私は多くのInstagramのユーザーが複数の写真を使ったコラージュ写真を投稿していることに気がつきました。そしてそれは芸術的な方法でアレンジされていて、しばしばちょっとした物語を語っているのです。でも、こういったコラージュ写真をInstagramこういった写真をアップしようとすると、素晴らしいユーザー体験を持つInstagramではなく、他のアプリ（そしてそれらはだいたいバグが多い）を使う必要があります。

@Instagram users post collages, but have to use 3rd party apps that don’t offer the same great UX

この問題を解決してユーザーに複数のユーザーを一度に　—　簡単に、シンプルに、そして美しくシェアすることが出来るように　—　私は以下のビデオで見れるプロトタイプを制作しました。

以下、このプロトタイプを作った軌跡をご紹介します。参考にどうぞ。

プロトタイプ制作

私はInstagramのコラージュ機能をデザインチャレンジとしてリサーチし、想像し、ワイヤーフレームにし、プロトタイプにしました。そしてそれはユーザーリサーチャーでありプロダクトデザイナーの役割としてペルソナ、デザインストーリー、ユーザータスクフロー、ワイヤーフレーム、プロトタイプ、そしてユーザビリティテストを作成しました。

デザインストーリー

デザインストーリーを書くことは、プロダクトの機能面を考えるためにとても手助けになるアジャイルテクニックです。デザインストーリーは、ユーザーが何を出来るのかを詳細に記述したものになります。ここに今回の機能のためのデザインストーリーを書きました。

ユーザーは以下の事が出来る：

複数の写真を撮影/選択し、コラージュ写真を作る事が出来る
フォトコラージュ内の写真を編集することが出来る
コラージュのためのテンプレートを選ぶことが出来る
コラージュの中での写真のポジションの変更や、写真自体の変更が可能
コラージュが見れる
コラージュ作成をキャンセル出来る
コラージュにキャプションを入れる事が出来る
場所を追加出来る
コラージュに人の名前タグをつけられる
コラージュをシェア出来る

ペルソナ

私がデザインしているものを使う人々を理解するために、そして機能開発のガイドとしてまた私が解決しようとしているキーとなる問題にフォーカスすることの助けとして使うために私はペルソナを作りました。これによりデザインにおける判断がより抽象的でなくなり、より人間的になります。以下は私がコラージュ機能のために作ったペルソナのルーシーです：

ユーザータスクフロー

ある人はInstagramをカメラだと言い、ある人は写真編集アプリだと言います。Instagramは最近編集機能をたくさん機能追加しましたが、カメラ体験の部分はとてもクリーンな状態に保っています。私はこのユーザーフローを保ちながら、私の新しいコラージュ機能をInstagramの編集機能のエリアに追加することにしました。下記にあるのが私の作ったユーザーフローチャートです。ハイライトされている部分は私の新機能のエリアです。The

ワイヤーフレーム

次のステップは新しいユーザータスクフローをビジュアルにおこすことでした。紙にスケッチを描いて始めました。いくつかの別バージョンを作成しましたが、下記のバージョンが一番間違いないと思ったのでこれに決めました。いくつかのユーザビリティテストの後に、ユーザーがコラージュするのにこのバージョンが最も速く、簡単に出来ることを発見しました。

上記の手書きのスケッチに基づいて詳細なワイヤーフレームにしたものが以下です。私は最大で３枚の写真をコラージュに入れるのがこの機能の最初のリリースとしては理想だと考えました。なぜなら３枚をコラージュに入れることが出来ればユーザーにとってコラージュ写真を作ってシェアするプロセスを楽しむために十分なフレキシビリティとコントロールを与えていると思ったからです。これについてはまだ仮説でありもっとテストが必要です。ユーザーインタビュー、モバイルデバイスのサイズ制限、そして何か質の高い物を作るための使いやすさに基づいていて推定しています。

プロトタイプ

私は再現度の低いワイヤーフレームでいくつかのコラージュをテストし、それから現物に近いプロトタイプを作ってテストを重ねました。このプロトタイプはユーザータスクフローをテストして早い段階でエラーを発見するのに役に立ちました。将来このデザインをもっとユーザービリティテストにかけて、検証していきたいと思います。

まとめ

クリアにしておくと、私はInstagramで働いていもいないし、代理もしていないです。この機能を考えたのは、あくまでデザインチャレンジとして、です。貪欲でハッピーなInstagramのユーザーとして、私はこのプロジェクトでとても素晴らしい時間を過ごす事が出来たし、コラージュ機能を実物のアプリで見たいと本気で思っています。コラージュを作りたいと望む一定数の人々がInstagramに投稿出来て、それに加えてそれを観たいオーディエンスもいる、そんなのを見たいと思っています。

======以上、翻訳======

どうだったでしょうか？プロダクト企画や新規機能の追加に非常に参考になる話でしたよね。また、デザイナーの方にとっても、コンテンツマーケティングとしてこういった手法もすごく有効なんではないでしょうか。

英語が読める方はぜひ原文（UX Magazine OR thelinwang.com）もご覧下さい。

また、UXを相談したい会社さんは是非LinさんにUXデザインの依頼をされては如何でしょうか？

My instagram feature design is published @uxmag today here http://t.co/a2Tq6xaoIv 🙂 Special thanks to @dburka @katerutter @lauraklein 🙂

— Lin Wang (@linafab) 2014, 8月 29