Flock

アプリデザイン
エンドツーエンドのUX/UIデザイン
UX リサーチ
イノベーションハブは、トロント大学のキャンパス内にあるコンサルタント機関で、研究者やデザイナーがデザイン思考を活用して学生生活の向上を目指す課題に取り組んでいます。
イノベーションハブとの提携で開発されたプロジェクト「Flock」は、学生がキャンパスクラブに参加する手助けをするモバイルWebアプリケーションです。その主要機能は、学生がメンバーを積極的に募っているクラブとマッチングし、新たな興味を見つけ、クラブのリーダーシップとつながることを支援します。

タイムライン

12週間(2022年)

使用ツール

Figma, Figjam

役割

• 研究分析主導
• インタビュー
• テスト実施
• プロトタイピング
• デザイン

チーム

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

00 - プロジェクトの背景

課題

大学は若い大人が自分の情熱や人生の方向性を探求する素晴らしい場所です。トロント大学(UofT)の新入生も例外ではありません。彼らは新しい興味を持って学校生活を充実させ、所属できるコミュニティを見つけたいと考えています。しかし、その強い願いにもかかわらず、現在の状況ではクラブ活動に参加することが難しいのが現実です。

解決策

Flockは、トロント大学(UofT)の学生コミュニティがクラブ活動に参加するためのモバイルウェブアプリケーションです。学生にとって、UofTで行われているすべてのクラブや活動を迅速に確認し、検索できる統一されたプラットフォームを提供します。主な3つの機能は、学生と興味を持っているクラブとのマッチング、新しい情熱の探索、そしてクラブリーダーとのコミュニケーションです。

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

今後のイベントと次のイベント

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

異なるクラブの探索

エクスプロアタブ内には3つのオプションがあります。クラブでは、異なるカテゴリーに基づいてクラブを検索できます。特定のクラブを見つけた後、ユーザーはそのクラブをフォローし、基本情報や募集内容を確認できます。また、メッセージ機能を通じてクラブのリーダーと直接連絡を取ることもできます。

近隣のイベント探索

エクスプロアタブ内のもう一つのオプションは「近隣」です。ユーザーは特定の日付と時間枠で近くで開催されるイベントを検索できます。また、見つけたイベントのチケットを予約することもでき、予約したチケットは「今後のイベント」ページに表示されます。

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

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

設計アプローチと流れ

01 - リサーチ

背景調査

UofTの学生がクラブやその活動に対してどのような態度を持っているかを一般的に理解するために、Redditのオンラインディスカッションフォーラム(r/UofT)を徹底的に調査しました。そのオンラインコミュニティからは、クラブに関する多くの質問が見つかりました。多くの学生は、クラブ活動に対して混乱しており、つながりを感じていない様子でした。
主な2つの混乱は以下の通りです:

1. 自分が興味のあるクラブをどうやって見つけるか?
2. そのクラブにどうやって参加するか?

アンケー

UofTの学生がクラブ活動にどのように関わっているか、またその経験をさらに調査するために、50人の回答者を対象にオンラインアンケートを実施しました。アンケート結果でも、同じような混乱が見られました。
(完全なアンケートはこちら)

ユーザーインタビュー

その質問をもとに、UofTの学生7名を対象に半構造化インタビューを実施しました。彼らの回答は要約され、似たテーマでアフィニティダイアグラムにグループ化されました。そこで、3つの主要な課題が見つかりました:
1. 情報の散乱
既存の情報はソーシャルメディアや公式学校ウェブサイトに散在しており、学生が興味のあるクラブやその活動内容を見つけるのが難しい。
2. アクセスの欠如
秋学期の初めに開催されるクラブフェアが最も有用なリソースのようですが、一度見逃すと、他にどこで情報を探せば良いのか分からなくなります。
3. コミュニケーション不足
クラブの運営者やリーダーは、学生のことを知らずに対応するのが難しく、連絡を試みた学生は返事をもらえず、どう関わればよいか分からないことが多い。

02 - 共感

ユーザーペルソナ

質的および量的な調査データを分析した後、ユーザーペルソナ「Mia, The One Person Show」が作成され、ターゲットユーザーグループへの共感をさらに深めました。
ユーザーリサーチの結果、Miaが必要としているのは以下の方法です:

•自分が興味のあるクラブの有益な情報を見つけること。

•クラブのリーダーシップと連絡を取り、コミュニケーションを取ること。

•クラブ活動に参加すること。

現行のユーザージャーニー

社交的なMiaでさえ、UofTで自分の居場所となるコミュニティを見つけたり、クラブ活動に参加したりするのに苦労しています。彼女の課題をより深く理解するために、現在Miaが演劇クラブに参加しようとする際のユーザージャーニーマップを作成しました。
情報源が散在していて、連絡手段も限られているため、Miaはクラブフェアに参加できなかった後、クラブに関わることが非常に難しいと感じました。やがて彼女は取り残されたように感じ、つながりも持てず、混乱したまま演劇クラブへの参加をあきらめてしまいました。

03 - 定義

デザインのゴール

ミアがクラブに参加しようとする過程を分析した結果、3つの主なデザイン目標が明らかになりました:
1. 学業以外の充実した学生生活を送りたい学生が、これまで考えたことのなかった新しい趣味を発見できること。
2. クラブに興味のある学生が、クラブフェアに行かなくても、いつでもどこでも役立つ情報を見つけられること。
3. クラブに参加したい学生が、自分が興味を持つだけでなく、相手のクラブからも関心を持たれているクラブを見つけられること。

04 - アイデア出し

重要なアイデア

3つの主要な目標を念頭に置き、広範なブレインストーミングとアイデア出しのセッションが行われました。アイデアは、チームによって影響力と実現可能性に基づいて評価され、ドット投票で絞り込まれました。その結果、3つの注目すべきコンセプトが浮かび上がり、さらなる開発のために選ばれました。
デジタルクラブフェア
MMORPGのようにキャラクターを操作して、似たようなクラブがグループ化されます。
✅ 良い点:
コンセプトメタファー
• 探索の感覚
❌ 悪い点:
実現可能性が低い
クラブデーティング
クラブのプロフィールをスワイプして確認する、Hingeのようなもの。多くの選択肢を素早くナビゲート。
✅ 良い点:
エンゲージングで消化しやすいプロフィール
• 双方向的なプロセス
❌ 悪い点:
ブラックボックスのアルゴリズムに依存
What's up?
時間と場所を確認して、どの活動が行われているかを見る。スケジュールの隙間を埋める。
✅ 良い点:
クラブ活動への参加をイベントベースで整理
❌ 悪い点:
一貫性に欠ける

統合されたアイデア

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

トップのコンセプトからの要素を統合し、一つの統一されたアイデアが生まれました。それが「Flock」、クラブ活動への入り口です。主な機能は次の通りです:
• デジタルクラブフェアのように、デーティングスタイルのクラブプロフィールを探索
• あなたが興味を持ちそうなクラブやコミュニティとのマッチング
• 忙しいスケジュールにぴったりの興味深いクラブ活動をチェック
• クラブと繋がり、あなた自身を知ってもらう

理想のユーザージャーニー

3つの大きなアイデアは、ミアがドラマクラブに参加しようとするジャーニーに統合されました。ミアの新しいジャーニーでは、クラブと迅速かつスムーズにコミュニケーションを取ることができ、自分に合ったドラマクラブを見つけることができました。さらに、近くで開催されているイベントに参加することで新しい情熱を見つけました。今回は、ミアは充実感を感じ、繋がりを得ることができました。

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

低忠実度スケッチ

3つの大きなアイデアと3つのデザイン目標に基づき、以下の3つのタスクをカバーするロー・フィデリティプロトタイプを作成しました:

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

リーン評価

初期段階のユーザビリティの問題を特定するために、6人の代表的なユーザーを対象にリーン評価を実施しました。使用した方法は、5秒テスト、思考を声に出すテスト、およびポストテストの半構造化インタビューです。以下は、主要な発見のいくつかです:
1. 情報アーキテクチャの再構築
*変更前
クラブは元々「ホーム」タブにありましたが、クラブを検索するのは頻繁に行うタスクではありませんでした。最も一般的なタスクは次の通りです:1. 申し込んだイベントを表示すること 2. フォローしているクラブのイベントを表示することしかし、これらはそれぞれ「プロフィール」タブや「アクティビティ」タブで見つけるのが難しかったです。
*変更後
情報アーキテクチャはユーザビリティ向上のために再構築されました。2つの主要なタスクは、より簡単にアクセスできるようホーム画面に移動されました。その他の機能は「Explore(探索)」タブに集約され、新しいクラブの機会を見つけやすくなるよう設計されています。
2. 個人プロフィールページの再設計
*変更前
テスト中に予想外のインサイトが明らかになりました。参加者の多くが、レイアウトがデーティングアプリに似ていることに違和感を覚えたのです。公式な大学プラットフォームに複数の個人写真が表示されることに対し、恥ずかしさや不快感を感じるという声がありました。このケースでは、デーティングアプリのUIに対する“親しみやすさ”が、逆にユーザー体験に悪影響を及ぼす結果となりました。
*変更後
プロンプトのカスタマイズ性は維持しつつ、写真は1枚のみに変更されました。最終的なインターフェースは LinkedIn を参考に、よりフォーマルで公式感のあるデザインに調整されました。また、学部や学年といった追加のプロフィール情報も盛り込み、プラットフォーム全体の信頼性と目的意識を高める工夫がなされています。

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

評価結果に基づき、中忠実度プロトタイプが作成されました。初期のコンポーネントライブラリを整備し、すべての画面において視覚スタイルの一貫性が保たれるようにデザインを精緻化しました。また、ユーザーフローを効果的に伝えるためのストーリーボードも作成されました。以下にその概要を示します。

ユーザビリティテスト

中忠実度プロトタイプを用いて、6名の代表ユーザーによる第2回ユーザビリティテストを実施しました。以下は主な発見点です:
1. アクティビティタブの情報をより詳細に
*変更前
参加者は「近くのイベントを探す」機能を好んでいましたが、検索マーカーの意味が分かりづらく、地図上の情報が不十分だと感じていました。また、多くの参加者は下部メニューがスワイプ可能であることに気づきませんでした。
*変更後
検索マーカーを削除し、代わりにカテゴリ別のマーカーを表示することで、アクティビティの分類を分かりやすくしました。さらに、下部メニューにはスワイプ用のハンドルを追加し、ナビゲーションの改善を図りました。
2. ユーザーにとってより親切な案内
*変更前
参加者は、最初に表示されるホーム画面が空であることに戸惑い、「何をすればいいのか分からない」と感じていました。
*変更後
そのため、ユーザーがクラブやアクティビティを見つけやすくするために、「Explore」タブへの行動喚起(Call to Action)を追加しました。さらに、新規ユーザーに向けて、興味に基づいて最初のクラブを選べるようにする、より丁寧なオンボーディングプロセスを導入する予定です。

スタイルガイド

Flockは、特にトロント大学(UofT)向けにデザインされたアプリです。統一感を表現するために、UofTのブランドガイドラインに厳密に従ってスタイルガイドを作成しました。
1. 書体
Flockでは、Trade Gothicのレギュラーとボールドスタイルを使用しています。印刷物の本文の最小フォントサイズは9.25ポイント以上です
2. カラー
メインカラーはUofTのシグネチャーブルーです。UofTキャンパスの多様性とカラフルな生活を表現するために、ガイドラインから3つのセカンダリーカラーを選びました。また、Flockの背景色とテキストカラーには3つのニュートラルカラーを使用しています。
3. ロゴ
Flockのロゴは、Defy Gravityのワークマークとそのキャレット記号にインスパイアを受けています。上昇する力と挑戦を超えていく価値を引き継ぐために、3つの異なる色のキャレット記号がFlockのロゴに使用されています。この3つのカラフルなキャレット記号は、共に前進するための上昇する勢いを表現し、多様なグループやコミュニティを象徴しています。

07 - 結論

次のステップ

3つの目標をもとに、数多くのブレインストーミングとアイデア出しが行われました。アイデアはインパクトと実現可能性に基づいてチーム内でドット投票されました。その結果、次のステップへ進み、アプリとしてさらに開発することに決定した3つの人気アイデアが選ばれました。
1. クラブ応募者とのメッセージ機能の拡張
クラブのリーダーが返信しない、または遅い状況について、さらなる調査と分析が必要です。
2. 伴走インターフェース
クラブリーダーがメンバーとコミュニケーションを取り、イベントを投稿できるようにするため、伴走用のプロトタイプを作成する必要があります。これはクラブリーダーシップに関する調査に基づいています。
3. Flock と UofT サービスの統合
Flock が UofT の他のサービス(学生生活アプリや学生組織ポータルなど)とどのように統合できるかを探る機会があります。

学んだ教訓

1. 注意深く聞き、観察する
ユーザーインタビューやユーザビリティテスト中に、参加者が言ったことや行動したことが一見小さな問題のように思えることがありますが、それが重要な根本的な問題を明らかにすることがあります。例えば、ある参加者がプロフィールタブの個人情報の入力に混乱したと述べました。このフィードバックは、個人プロフィール情報の入力に関するより丁寧なオンボーディング体験が必要であることを示しました。ユーザーのニーズをより明確に、包括的に理解するために、すべての手がかりを分析し、それらを組み合わせることが重要です。
2. チーム内での協力を促進する
これは、デザインのバックグラウンドがないチームメンバーと初めて一緒に作業した経験でした。最初は、デザイン思考の概念を全員が完全に理解していなかったため、プロセスがフラストレーションを感じるものでした。しかし、コミュニケーションにおいて、より開かれた心を持ち、歓迎する姿勢を取ることで、チームメンバーが自由に自分の意見を共有しやすくなったことに気付きました。どの個人にもユニークで価値のある視点があり、全員の声を聞き、尊重することが重要です。