Flock

ウェブアプリ
エンドツーエンド UX/UI
UXリサーチ
Innovation Hubは、トロント大学のキャンパス内コンサルタンシーで、研究者とデザイナーがデザイン思考を用いて学生体験を形成する課題に取り組んでいます。
Innovation Hubとの連携により、プロジェクト「Flock」が開発されました。Flockは、学生がキャンパスのサークル活動に参加できるよう支援するモバイルウェブアプリケーションです。主要機能として、メンバーを積極的に募集しているサークルとのマッチング・新たな興味の発見・サークルリーダーシップとのつながりが挙げられます。

タイムライン

12週間(2022年)

ツール

Figma, Figjam

役割

• リサーチ分析のリード
• ユーザーインタビューとユーザビリティテスト
• プロトタイピングとビジュアルデザイン

チーム

Yanch Ong, Min Lin, Rita Yu, Emma Chi, Susan Zhang, Myself

00 - 背景

課題

大学は若い成人が自分の情熱と人生の方向性を探るのに最適な場所です。トロント大学(UofT)の新入生も同様で、新しい興味を持ってキャンパスライフを充実させ、自分が属するコミュニティを見つけたいと願っています。そのような強い思いがあっても、現在の環境ではサークル活動に参加することが難しい状況です。

解決策

Flockは、UofTの学生コミュニティがサークルに参加するためのモバイルウェブアプリケーションです。UofTで開催されているすべてのサークルと活動を素早く閲覧・検索できる統合プラットフォームを提供します。主要な3つの機能として、自分に興味を持つサークルとのマッチング・新たな情熱の探求・サークルリーダーシップとのコミュニケーションが含まれています。

Flockはどのように機能するのか?

今後のイベントとフォロー中のイベント

UofTの学生IDでFlockにログイン後、ホームタブには今後のイベントとフォロー中のイベントが表示され、一般ユーザーが必要なイベント情報をすぐに確認できます。

さまざまなサークルの探索

探索タブには3つのオプションがあり、「サークル」ではさまざまなカテゴリからサークルを検索できます。特定のサークルを見つけた後、フォローして基本情報や募集状況を確認できます。さらに、メッセージ機能を通じてサークルのリーダーシップに直接連絡することも可能です。

近くのイベントの探索

探索タブのもう一つのオプションは「近く」です。特定の日時に近くで開催されているイベントを検索できます。また、見つけた将来のイベントのチケットを予約することもでき、チケットは今後のイベントページに表示されます。

自分のプロフィールの編集

ユーザーはサークルのリーダーシップに自分の個性をアピールすることもできます。プロフィールタブをクリックして編集することで、基本情報・趣味・情熱・ビジョンなどを自分のプロフィールに追加できます。新しいコミュニティを見つけて参加することは双方向のプロセスであり、学生が自分自身を表現することも重要です。

アプローチとプロセス

01 -リサーチ

背景リサーチ

UofTの学生のサークルおよびその活動に対する意識を大まかに把握するため、Redditのオンラインディスカッションフォーラム(r/UofT)を深く調査しました。オンラインコミュニティでは、サークルに関する多くの質問が見つかりました。多くの学生が混乱し、つながりを感じられていないことが明らかになりました。
2つの主な混乱点:

1. 興味のあるサークルはどうやって見つければいいのか?
2.そのサークルにはどうやって参加すればいいのか?

アンケート

UofTの学生のサークル活動への参加経験をさらに調査するため、50名の回答者を対象にオンラインアンケートを実施しました。アンケート結果でも、同様の混乱が再び確認されました。
(完全なアンケートはこちらからご覧ください)

ユーザーインタビュー

この問いを念頭に置き、UofTの学生7名を対象に半構造化インタビューを実施しました。回答はまとめられ、共通テーマごとにアフィニティダイアグラムに整理されました。
3つの主な課題が発見されました:
1. 情報チャンネルの分散
既存の情報はソーシャルメディアと公式学校ウェブサイトに分散しています。学生が興味のあるサークルや、そのサークルの活動内容を見つけることが困難です。
2. アクセスの欠如
秋学期の始めに年1回開催されるクラブフェアが最も役立つリソースとして認識されています。一度それを逃すと、他にどこで情報を探せばよいかが分からなくなります。
3. コミュニケーションの橋渡しの欠如
サークルの主催者やリーダーシップは、何も知らない学生からの連絡への対応に忙しさや不安を感じることが多くありました。その結果、連絡を試みた学生のほとんどは返答をもらえず、どのように参加すればよいかが分かりません。

02 - 共感

ユーザーペルソナ

定性的・定量的なリサーチデータを分析した後、ユーザーグループへの共感をさらに深めるために、ユーザーペルソナ「一人で頑張るMia」を作成しました。
ユーザーリサーチにより、Miaには以下の方法が必要であることが明らかになりました:

• 興味のあるサークルの有益な情報を見つける。

• サークルのリーダーシップに連絡・コミュニケーションをとる。

• サークル活動に参加する。

As-Isユーザージャーニー

社交的なMiaでさえ、UofTでコミュニティを見つけてサークルに参加することに苦労しています。彼女の課題をより深く理解するために、Miaが現在どのように演劇サークルへの参加を試みているかのジャーニーマップを作成しました。
情報の分散とコミュニケーションチャンネルの欠如により、クラブフェアを逃した後にサークルに参加することが非常に困難であることが分かりました。Miaは孤立感と断絶感を覚え、最終的に混乱から演劇サークルへの参加を諦めてしまいました。

03 - 定義

デザインゴール

Miaのサークル参加ジャーニーを分析した後、3つの主要なデザインゴールが特定されました:
1. 学業以外の充実した生活を築きたい学生が、過去に考えたこともなかった新しい趣味を発見できる。
2. サークルに興味のある学生が、クラブフェアに行かなくても、いつでも、どこからでもサークルに関する有益な情報を見つけられる。
3. サークルに参加したい学生が、自分が興味を持ち、かつ自分にも興味を持ってくれるサークルを見つけられる。

04 - アイデア創出

ビッグアイデア

3つの主要なゴールを念頭に置き、広範なブレインストーミングとアイデア創出セッションを実施しました。アイデアはインパクトと実現可能性をもとにチームによって評価・ドット投票されました。その中から3つの際立ったコンセプトが浮かび上がり、アプリソリューションとしてさらに発展させるために選ばれました。
デジタルクラブフェア
MMORPGのようにキャラクターを動かして探索する。似たようなサークルがグループ化されています。
✅ 良い点:
コンセプトの比喩
• 探索感
❌ 悪い点:
実現が難しい
クラブマッチング
サークル版Hinge。サークルのプロフィールをスワイプして、多くの選択肢を素早く閲覧する。
✅ 良い点:
魅力的で分かりやすいプロフィール
• 双方向のプロセス
❌ 悪い点:
ブラックボックスアルゴリズムに依存
What's up?
時間と場所をチェックして、どんな活動が行われているかを確認する。スケジュールの空き時間を活用する。
✅ 良い点:
サークル参加へのイベントベースのアプローチ
❌ 悪い点:
一貫性がない

アイデア

すべてのアイデアの良い部分を組み合わせる

各トップコンセプトの要素を統合し、サークル参加への入り口となる統一されたアイデア「Flock」が生まれました。主要な機能は以下の通りです:
・デジタルクラブフェアのように、マッチングアプリ風のサークルプロフィールを探索する
・あなたが好きそうなサークルやコミュニティとのマッチングを提供する
・忙しいスケジュールに合った興味深いサークル活動を見つける
・サークルとつながり、自分という人間を伝える

To-Beユーザージャーニー

3つのビッグアイデアをMiaの演劇サークル参加ジャーニーに統合しました。新しいジャーニーでは、Miaはすぐにスムーズにコミュニケーションをとり、自分が属せる演劇サークルを見つけることができます。さらに、近くのイベントに参加したことで新たな情熱も発見しました。今回のMiaは充実感とつながりを感じています。

05 - プロトタイプ & 06 - 評価

低忠実度スケッチ

3つのビッグアイデアと3つのデザインゴールをもとに、
以下の3つのタスクをカバーする低忠実度プロトタイプを作成しました:

1. 興味のあるサークルを見つけてフォローする。
2. 近くで開催されているアクティビティの情報を見つける。
3. 自分の情熱を含むプロフィールを編集する。

リーン評価

初期段階のユーザビリティの問題を特定するため、6名の代表的なユーザーを対象にリーン評価を実施しました。手法には5秒テスト・シンクアラウドテスト・テスト後の半構造化インタビューが含まれました。以下は主な発見の一部です:
1. 情報アーキテクチャの再構築
*改善前
サークルはもともとホームタブでしたが、サークル検索は頻度の低いタスクでした。最も一般的なタスクは、1)参加登録した今後の活動の確認、2)フォロー中のサークルの活動の確認であると考えられます。しかし、これらはそれぞれプロフィールタブとアクティビティタブで見つけにくい状態でした。
*改善後
ユーザビリティを向上させるために情報アーキテクチャを再構築しました。2つの主要タスクはアクセスしやすいようにホームページに直接移動されました。残りの機能は新しいサークルの機会を発見するための探索タブにまとめられました。
2. パーソナルプロフィールページの再設計
*改善前
テスト中に予期せぬ洞察が生まれました。レイアウトがマッチングアプリに似ているため、参加者が不快感を覚えたという報告がありました。公式の大学プラットフォームに複数の個人写真が表示されることが、恥ずかしさと不快感を引き起こしていました。この場合、マッチングアプリのインターフェースへの親しみが意図しないネガティブな影響をユーザー体験にもたらしていました。
*改善後
プロンプトのカスタマイズ性は維持しつつ、写真を1枚のみ表示するようにデザインを調整しました。最終的なインターフェースはLinkedInからインスピレーションを得て、よりオフィシャルでフォーマルな美観を取り入れました。プラットフォームの信頼性と目的意識を高めるために、学部や学年などの専門的な情報も追加されました。

中忠実度ストーリーボード

評価の結果をもとに、中忠実度プロトタイプを開発しました。初期コンポーネントライブラリを構築し、ビジュアルスタイルの一貫性を確保するためにすべての画面を改善しました。以下に示すように、ユーザーフローを効果的に提示するためのストーリーボードを作成しました。

ユーザビリティテスト

中忠実度プロトタイプを用いて、6名の代表的なユーザーを対象に第2回ユーザビリティテストを実施しました。以下は主な発見です:
1. アクティビティタブの詳細情報
*改善前
参加者はnearby探索機能を気に入りました。しかし、検索位置マーカーが分かりにくく、マップにより多くの情報を求めていました。また、ほとんどの参加者は下部メニューを上にスワイプできることに気づきませんでした。
*改善後
検索マーカーを削除し、より分かりやすい整理のためにアクティビティにカテゴリーマーカーを追加しました。さらに、ナビゲーションを改善するために下部メニューにハンドルを組み込みました。
2. よりユーザーフレンドリーな案内
*改善前
参加者は空のホーム画面に戸惑い、何をすればよいか分かりませんでした。
*改善後
ユーザーをサークルやアクティビティの発見のために探索タブへ誘導するコールトゥアクションを追加しました。さらに、新規ユーザー向けにより包括的なオンボーディングプロセスを導入し、自分の興味に合ったサークルを初期選択できるよう案内します。

スタイルガイド

Flockはトロント大学専用に設計されたアプリです。一体感を示すために、スタイルガイドはUofTのブランドガイドラインに厳密に従って開発されました。
1. タイプフェイス
Trade GothicのレギュラーとボールドスタイルをFlockで使用しました。本文の最小フォントサイズは9.25ポイント以上です。
2. カラー
プライマリーカラーはUofTのシグネチャーブルーです。多様性とUofTキャンパスの豊かな生活を表現するために、ガイドラインから3つのセカンダリーカラーを選びました。背景とテキストカラーとして3つのニュートラルカラーを使用しました。
3. ロゴ
FlockのロゴはDefy Gravityのワードマークとそのキャレット記号からインスピレーションを得ています。上向きの勢いとどんな課題も乗り越えるという価値を継承するために、異なる色の3つのキャレット記号をFlockのロゴに使用しました。3つのカラフルなキャレット記号は、多様なグループやコミュニティとともに前進する上向きの勢いを表しています。

07 - 結論

次のステップ

3つのゴールをもとに、数多くのブレインストーミングとアイデア創出を行いました。アイデアはインパクトと実現可能性をもとにチーム内でドット投票されました。次のレベルに引き上げてアプリとしてコンセプトをさらに発展させることに決めた3つの人気アイデアがあります。
1. サークルと応募者間のメッセージ機能の拡充
サークルのリーダーシップが返信しなかったり、返信が遅い状況についてさらなるリサーチと分析が必要です。
2. コンパニオンインターフェース
サークルリーダーがメンバーとコミュニケーションをとりイベントを掲載するためのコンパニオンプロトタイプを作成する必要があります。これはサークルリーダーシップのリサーチをもとにします。
3. FlockとUofTサービスの連携
FlockをStudent Life AppやStudent Organisation Portalなど、他のUofTサービスとどのように統合するかを探る機会があります。

学んだこと

1. 注意深く聞き、観察する
ユーザーインタビューやユーザビリティテスト中に参加者が言ったり行ったりすることは、時に些細な問題に見えますが、重要な根本的課題を明らかにすることがあります。例えば、ある参加者がプロフィールタブの個人プロンプトについて混乱を感じると述べました。このフィードバックは、個人プロフィール情報の入力に関する紹介とウォークスルーを含む、より充実したオンボーディング体験の必要性を浮き彫りにしました。すべての手がかりを分析し、ユーザーニーズのより明確で包括的な理解を形成するために組み合わせることが不可欠です。
2. チーム内のコラボレーションを促進する
デザインのバックグラウンドを持たないチームメンバーと初めて一緒に作業しました。最初は、デザイン思考のコンセプトを全員が完全に理解していなかったため、プロセスに苦労しました。しかし、コミュニケーションにおいてよりオープンマインドで受け入れる姿勢をとることで、チームメンバーが自分の考えをより自由に共有できるようになることに気づきました。すべての個人はユニークで価値ある視点を持っています。各チームメンバーを大切にし、全員の声が聞かれるようにすることが重要です。