Pason
ブランディング、ビジュアルデザイン、UIデザイン、UXデザイン
2021/11/05
ブランディング、ビジュアルデザイン、UIデザイン、UXデザイン
2021/11/05
はじめに
このプロジェクトはエンジニアの知人と行っている個人プロジェクトです。デザインの依頼をしていただいた時点では、既にアプリのアイディアがある状態でした。主な担当範囲としては、ブランディング、ビジュアルデザイン、及びUIデザイン、UXデザインでした。UIデザイン、UXデザインに関しては、モバイルアプリケーション（iOS, Android）のみが対象でした。ケーススタディに記載している部分に費やした期間は２１週間でした。
Pasonは見知らぬ人と手紙回しができる場所です。
ユーザーは自分の思ったこと、感じたことを手紙として誰かに聞いてもらえます。
また自分も他の人の手紙を読み、リアクションをすることができます。
発想の転換
UXを考える上で理想的ではありませんが、今回の案件ではすでにアプリの機能が定義されている状態がスタート地点でした。ユーザーの声を反映していないアイディアが先にある場合、そのアイディアがユーザーに対して価値があるのかは、判断できません。そこで発想の転換を行い以下のように考えました。
このアプリのアイディアは、私にデザインの依頼をしてくれた方が抱いている現在のSNSに対する思いをもとにして生まれました。ですので、まずは同じように他の人が普段SNSを利用するにあたって考えていること、感じていることを聞くことにしました。
ユーザーインタビュー（５人）を行い内容をまとめたところ、様々な問題が浮かび上がってきました。その中でも、以下の２つに関しては、伝えられていたアプリのアイディアで解決できるのではないかと考え、提供する主な体験価値として定義しました。
アプリ
Pasonは、見知らぬ人と手紙回しをするアプリです。会ったこともない誰かが書いた手紙を読み、その手紙にリアクションをしたり、他のユーザーに渡すことができます。もちろん自分が手紙を書くこともできます。受け取った手紙が誰のものかは知ることは出来ませんし、誰かに読まれた手紙が自分のものだとバレることもありません。自分の思ったこと、感じたことを自由に手紙にすることができます。
デザインプロセス
既にあるアイディアとユーザーの抱える問題を結びつけることで体験価値を定義しました。そして次はそれをアプリとしてどのように体現するべきかを考えました。アプリのアイディア自体はいたってシンプルです。それ自体は良いことですが、一方でユーザーにとっては、それがどのような価値があるのか少し分かりづらい可能性があると感じました。ですので、今回のプロジェクトではブランドとしてのイメージがアプリの訴求力に影響する比重が非常に大きいと判断し、重要な位置づけとしました。
ユーザーインタビューで得た洞察のもと、ブランドとして表現するべきイメージはどのようなものなのかを明確化するために、いくつかのキーワードを書き出しました。更にそれらのキーワードを、後述するDesirability Testingで使用するために以下のようにカテゴライズしました。
ブランドとしてのイメージが明確になったところで、次はそれをビジュアルに落とし込むことにしました。上記のキーワードをもとにいくつかのデザイン案を作成していきました。手順としては、キーワードを更に細かく分類し、それに応じてイメージボードを作成しました。イメージボードの作成後、大まかな色彩の案、ワードマークに使用するフォントの洗い出し、そしてロゴのスケッチによるアイディア出し等を行いました。
ビジュアルのデザインに関してもユーザー中心で行い、ユーザーに対して意図したイメージを確実に伝える必要があると考えました。そこで作成したデザイン案の中から、どの案がブランドとしてのイメージを最も的確に伝えることができるかを定量的に測定するために、Desirability Testing（１００人）を行いました。
ユーザーにとってのアプリの価値、ブランドとしての方向性を定義できたので、次にアイディアの具現化を行いました。
手始めとして簡易的な構造化シナリオ法を用いて、必要な機能を洗い出し、アプリの骨格を明確にしました。またプロジェクト初期に作成したペルソナを使用することで、アプリの使用が想定される環境、またどういった機能が主に必要なのかを定義することができました。
次に上記で洗い出した機能にプラスして、ログイン、アカウント作成など他のアプリにもある機能の中で、必要なものを書き出しました。それらをもとにアプリの全体的な流れを把握するため、UI Flowsを作成しました。
UIデザイン
UI Flowsを作成したことにより、画面におおよそ必要な要素、アプリの全体的な画面構成が分かりました。そこから各画面の簡単なスケッチを作成し、おおまかにそれぞれの画面がどのような見た目になるか、それをどのようにプロトタイプにするかを考えました。
変更が容易な早期の段階でアプリが持つ潜在的な問題点を明らかにするために、ユーザビリティテストを行うことにしました。定性的な分析に加え、問題点の洗い出し、改善の結果を定量的に行うためにAfter-Scenario Questionnaire (ASQ)を用いました。
１回目のユーザビリティーテスト（６人）を実施した結果、クリティカルなユーザビリティー上の問題としては、以下のようなものが浮き彫りになりました。
１．ログイン、サインアップを明示的に分けていないことで、ユーザーが混乱した
２．保存した手紙を見つけるタスクの成功率が他と比べて５０％と著しく低かった
１つ目の問題に関しては、ユーザーフロー自体に問題があると判断し、画面を分割することでユーザーがログイン、サインアップのどちらかを明示的に選ぶ形にしました。
２つ目の問題は、情報アーキテクチャーにあると考えました。複数のユーザーが保存した手紙がどこにあるのかを見つけ出すことができなかったので、ナビゲーションを変更し、手紙を保存した時にその手紙がどこへ保存されたのかを、明示的にユーザーに伝えるようにしました。
上述の修正に加え、既にテスト済みのビジュアルデザインをもとにプロトタイプの全体の忠実度を上げました。そして改善点の確認、及び忠実度が上がったことによる新たな弊害がないことを確認するために、２回目のユーザビリティーテスト（６人）を実施しました。結果として、新しいクリティカルな弊害がないこと、１回目のユーザビリティーテストで見つかった問題点が以下のように改善したことを確認できました。
エンジニアの方へのハンドオフ、及び他のデザイナーが参画する、もしくは他の方がデザインを行うようになった場合を考慮し、デザインガイドラインを作成しました。以下に一部を紹介します。
上記のデザインガイドラインとは別に、機能毎にハンドオフ用のデザイン指示書も作成しました。プロジェクトの開始当初に、アプリの実装に関してはReact NativeとFirebaseを使用するとの説明を受けていました。実装を少しでも容易にするために、サイズ指定をReact Nativeがデフォルトとして使用するもので行ったり、必要であれば公式のAPIやドキュメントを読み、どのコンポーネントを使用するのか、またこの機能はどのように実装するかを予め指定するなどの工夫をしました。
プロダクトとしての成功とは？
ユーザーの行動やプロダクトに対する満足度を定数的に表したり、アプリの使用状況を計測することが、今後の運営を考えるために不可欠と考えました。そこでGoogle HEART Frameworkを用いてUXメトリクスを作成しました。またGoogleのQuantitative ResearcherであるAngela Hoelzenbeinさんの講演を参考にし、HEARTの中からEngagement、Adaption、Retentionの３つが、初期段階にあるこのプロジェクトにおいてユーザーの需要を測るために適切なものと判断しました。
振り返り
今回のプロジェクトは自分にとって初めて学校のプログラム以外で取り組んだものでした。今までの環境では、程度の差はあれ、”決められた枠組みや選択肢の中で何が最適か”を考えることが多かったです。しかし、今回のプロジェクトにおいては、そういった枠組みもなく、ある程度自由な状態で考える必要がありました。その時々で何が重要か、また何にどの程度時間を割いて、それはどのように行うのかなど考えることが非常に多かったです。そういったことを繰り返す中で、自分で考えることの楽しさと難しさを知ることができました。
キックオフの段階で伝えられていたことの１つに、まずはMVP（Minimum Viable Product）を作成し、ユーザーの反応をみたいというのがありました。現在プロジェクトが一段落ついた状態で振り返ると、自分がデザインプロセスの中で行ったことのいくつかのことは、簡略化するべきだった、もしくは全く必要がなかったと思います。
プロジェクトの最中にいて、多くのことを同時に考え、自分の作業に夢中になっていると、そもそもの目的を見失ってしまう危険性があると学びました。今後は常に”今自分の行っていることは、プロジェクトの最終目標にどのようにつながっているのか”を思い出すようにすることで、作業の無駄をなくす努力をしようと思います。