ブランディング、ビジュアルデザイン、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を使用するとの説明を受けていました。必要であれば公式のAPIやドキュメントを読み、どのコンポーネントを使用するのか、またこの機能はどのように実装するかを予め指定するなどの工夫をしました。
プロダクトとしての成功とは？
ユーザーの行動やプロダクトに対する満足度を定数的に表したり、アプリの使用状況を計測することが、今後の運営を考えるために不可欠と考えました。そこでGoogle HEART Frameworkを用いてUXメトリクスを作成しました。またGoogleのQuantitative ResearcherであるAngela Hoelzenbeinさんの講演を参考にし、HEARTの中からEngagement、Adaption、Retentionの３つが、初期段階にあるこのプロジェクトにおいてユーザーの需要を測るために適切なものと判断しました。
振り返り
今回のプロジェクトは自分にとって初めて学校のプログラム以外で取り組んだものでした。今までの環境では、程度の差はあれ、”決められた枠組みや選択肢の中で何が最適か”を考えることが多かったです。しかし、今回のプロジェクトにおいては、そういった枠組みもなく、ある程度自由な状態で考える必要がありました。その時々で何が重要か、また何にどの程度時間を割いて、それはどのように行うのかなど考えることが非常に多かったです。そういったことを繰り返す中で、自分で考えることの楽しさと難しさを知ることができました。
キックオフの段階で伝えられていたことの１つに、まずはMVP（Minimum Viable Product）を作成し、ユーザーの反応をみたいというのがありました。現在プロジェクトが一段落ついた状態で振り返ると、自分がデザインプロセスの中で行ったことのいくつかのことは、簡略化するべきだった、もしくは全く必要がなかったと思います。
プロジェクトの最中にいて、多くのことを同時に考え、自分の作業に夢中になっていると、そもそもの目的を見失ってしまう危険性があると学びました。今後は常に”今自分の行っていることは、プロジェクトの最終目標にどのようにつながっているのか”を思い出すようにすることで、作業の無駄をなくす努力をしようと思います。
Branding, Visual Design, UI Design, UX Design
11/05/2021
Introduction
This project was a collaborative effort between myself and a software engineer friend of mine. When he approached me with the idea for the app, my primary areas of focus were branding, visual design, UI design, and UX design. The project took a total of 21 weeks to complete the part that is described in this case study.
Pason is an app for letter-writing with strangers.
Users can read and pass on letters anonymously, or write their own letters to send out. The author's identity is unknown, and recipients remain anonymous. It's a platform for connecting through words without revealing personal information.
Thinking Outside the Box
This project started with a predefined idea for the application, rather than first gathering user feedback and defining the problem to be solved. This approach makes it difficult to determine if the idea is truly valuable to users. In order to ensure the experience value, I adjusted my thinking and developed the following solutions.
The inspiration for this application originated from the dissatisfaction and feedback concerning the existing social networking platforms shared by the person who requested me to design this app. Thus, I decided to conduct user research and gather insights from potential users regarding their experiences and sentiments of using social media services.
Upon conducting interviews with five users and analyzing their feedback, I identified several issues.
I found that two of the issues could be resolved using the proposed application idea, and I defined them as the primary value propositions for the user experience.
Introducing
Pason is an application that enables users to exchange letters with strangers.
Users can read letters written by individuals they have never met, respond to them, and pass them on to other users. Additionally, users can also write their own letters on any topic they choose.
The application provides a safe and anonymous platform for users to freely express their thoughts and emotions, without revealing their identity to others.
Design Process
Once I had defined the value propositions for the user experience, I needed to determine how they could be translated into an app. While the concept was simple, I recognized that users might find it challenging to understand its value proposition. Consequently, I decided to position the app's brand image as a critical element in the project, as it would have a direct impact on its appeal and user adoption.
Based on the insights gained from user interviews, I wrote down several keywords to clarify what kind of image should be expressed as a brand. I further categorized these keywords as follows to use in Desirability Testing, which is described below.
Clarifying the brand image, I moved on to translate it into visuals. Based on the above keywords, I created several design proposals. As a procedure, I further classified the keywords and created an image board according to them. After creating the image board, I came up with rough color schemes, identified fonts to be used for the wordmark, and brainstormed logo ideas through sketches.
After establishing a clear brand image, I proceeded to translate it into visuals. To ensure that the intended image was effectively conveyed to the user, I made sure that the visual design was also user-centered. I developed four different design proposals and conducted desirability testing with 100 users to quantitatively measure which proposal was most effective in communicating the brand image.
After I defined the value of the app to users and the direction of it as a brand, the next step was to materialize the idea.
To begin the design process, I used the Structured Scenario-Based Design Method to identify the required functions and establish the architecture of the app. By utilizing the personas created previously, I was able to determine the context in which the application is expected to be used and which functions are most essential.
Next, in addition to the functions identified earlier, I listed the basic features from other apps, such as login and account creation. Based on those features, I created UI flows to understand the overall flow of the app.
UI Design
By creating the UI Flows, I was able to gain a better understanding of the necessary elements for each screen and the overall structure of the app. With this information, I created rough sketches of each screen, outlining their general layout and how they would be prototyped.
I decided to conduct usability testing to identify potential problems with the application at an early stage when changes are easier to make. In addition to qualitative analysis, I used the After-Scenario Questionnaire (ASQ) to identify problems and quantify the results of improvements.
The results of the first usability test (6 people) highlighted the following critical usability issues:
1. Not explicitly separating login and sign up confused users
2. The success rate of finding saved letters was significantly lower at 50% compared to other tasks
To address the first issue, I identified a problem with the user flow and decided to split the screen. This allowed users to explicitly choose between logging in and signing up, resolving the issue.
Regarding the second issue, I suspected that the problem lay in the information architecture. Many users struggled to locate their saved letters, so I made changes to the navigation to clearly indicate to users when a letter had been saved and where it could be found.
In addition to the modifications described above, I increased the fidelity of the prototype based on the previously tested visual design. In order to confirm the improvements and ensure that the modifications did not introduce new usability issues, a second round of usability testing was conducted with six participants. The results indicated that there were no significant new issues and that the problems identified in the first round of testing had been successfully addressed, as follows.
I created design guidelines to ensure a smooth handoff to the engineer and accommodate other designers who may work on the project in the future. Here are some excerpts from it:
Additionally, I created design instructions for handoffs for each feature. At the beginning of the project, I was briefed that we would be using React Native and Firebase for the implementation of the app. To make the implementation as easy as possible, I read the official API and documentation to specify in advance which components would be used and how this functionality would be implemented.
What is Success as a Product?
I foresaw the importance of representing user behavior and satisfaction in measurable terms. As a result, I utilized the Google HEART Framework to create UX metrics. By referring to a presentation by Angela Hoelzenbein, a Quantitative Researcher at Google, I determined that the Engagement, Adoption, and Retention metrics were appropriate for measuring user demand for this project in its early stages.
Retrospective
This project was my first experience working on a project outside of my school program. In previous environments, I often had to consider the best approach within a predetermined framework and limited options to varying degrees. However, with this project, there was no such framework, and I had to think with a certain degree of freedom. I had to constantly prioritize what was important at any given time, allocate my time accordingly, and figure out how to achieve my goals. Through this process, I gained valuable insights into the joys and challenges of independent thinking.
During the kick-off phase, I was briefed that the idea was to create a Minimum Viable Product (MVP) and gather user feedback. Looking back at the end of the project, I realize that some of my design decisions were overly complex and not necessary for the MVP. This experience has taught me the importance of staying focused on the project's original goal and not getting lost in the details. Moving forward, I will strive to constantly ask myself how my current tasks align with the project's ultimate objective to avoid any unnecessary work.
