ブリティシュコロンビア州サステイナブルエネルギー協会（BCSEA）の”Cool It”プログラムで開発したアプリ
プロジェクトタイムライン：３週間
成果物：ハイファイ・プロトタイプ
ツール：Sketch、InVision
機会（挑戦）
バンクーバーは2020年までに世界で最も環境に優しい都市を目指しています。BCSEAは気候変動に関して若者の教育や国民の意識を高めるイニシアチブを取る非営利組織です。
BCSEAは”Cool It! Climate Leadership Training Challenge”を運営しています。小学校でワークショップを開催し、４週間で生徒に気候変動を改善する行動を考えさせるための小冊子を提供します。しかし、現状はBCSEAが紹介するためのワークショップを開催したり、冊子を回収するために学校へ行き、手動でエクセルに生徒の温室効果ガス（GHG）排出量をまとめて計算しているなどあまり効率的ではありません。そのような背景もあり自治体から資金提供されたワークショップでのみ開催していました。もしこれらの活動がアプリでできたらより広範囲に広められることでしょう。
最近、BCSEAは高校生用のプログラムに拡張するために新たな資金提供を受けました。この新たな機会を活用し、Red AcademyのUX&UIデザインに所属する学生とコミュニティパートナーシッププロジェクトとしてCool Itアプリ開発を目指しました。
このプロジェクトは５人のチームによって実行されました。
１週目の火曜日に私たちはクライアントとキックオフミーティングを開き、次のことを決めました。
ビジネス目標
BCSEAはCool Itプログラムを小学校以外に広げて、環境に優しい行動を人々に促します。
ユーザー目標
ユーザーの生活スタイルを変容し、リアルタイムにその影響を確認できるようにします（プログラム終了時、すなわち４週間後に分かるのでは遅い）。
プロジェクト目標
環境に優しい生活を習慣化するためにアクセスしやすい魅力的でユーザーフレンドリーなアプリを開発します。
デザインプロセス
これらのことを念頭に我々はデザインプロセスを次のように設定しました。
調査→計画→設計→プロトタイピング→試験
このプロジェクトにおいて私はUXデザイナーだったので、この記事はUXに焦点を合わせます。
調査
まずはじめに、私たちは仮説を立てこの分野における他のイニシアチブに目を向けました。
仮説
個人レベルでは環境に影響をもたらす事は認識しているが生活スタイルを変化させるほど十分には動機づけられていない。
ドメインリサーチ
Orozcoはユーザーが環境に優しい活動の影響を自分の地域の平均値と比較したり、友達と比較できるアプリです。ただしその影響は活動毎には計算されません。
Leafullyはエネルギー供給者からデータ取得し、公害をなくすために必要な木の数など分かりやすい形に置き換えることによってエネルギー使用量を理解するのに役立ちます。
Give O2はユーザーの日々の移動を追跡し、移動時間と距離に基づきCO2排出量を計算します。
Forestは私たちがインスピレーションを得た集中したい人やスマホ依存症の人向けのアプリです。ポモドーロタイマーが画面上の植えられた木と連携しています。もしユーザーがアプリを閉じてスマホを触ると木が死んでいきます。成長した木はユーザーのコレクションに加えられ、自分の森(マイフォレスト)に追加できます（写真２枚目）。またポイントが貯まると実世界に木を植えることもできます。
ユーザー調査
私たちはユーザーが生活習慣追跡アプリに興味があるか知りたかったので、これらのトピックに関する質問を含めました。
調査は私たちのクライアント、副次的要因で出会った人々、私たちの個人的なソーシャルメディアチャンネルから提供された連絡先リストから抽出して実施しました。５日間で５０の回答がありました。その回答者の４分の１は１３歳から２４歳の間で、これは私たちのターゲット層を含みます。
重要な知見
・回答者の98％が環境問題に関心を持っていました。
・回答者の90％が、自分の生活スタイルによる環境への影響について知ることに興味を持っていました。
・回答者の57％が電子機器でゲームをしていました。
・56％の回答者（以前に習慣追跡アプリを使用したことがある）が役に立つと回答しました。
インタビュー
調査期間（3.5日）の時間的制約のために、私達たちは基本的には電話でインタビューし、都合が合わなかった場合にアンケートを送りました。以下の方々から洞察を得ました。
バンクーバー市で働いていた人々やCool itプログラムのクラスの先生とは電話から、残りの回答は電子メールによる質問表から得ました。
いくつかの回答が特に参考になりました。
「友達の行動を変えるよりも、家族にライフスタイルを変えるように勧めたほうが簡単だと思います。」
– Vivian、高校2年生
「私が知っている若者の多くにとって、問題は彼らが関与していないということではなく、どのように貢献できるか知らないことです。」
– Karina、高校3年生
「環境に配慮した新しいアイデアを私たちの生活に取り入れているのは、子供たちです。若者はすでにこの問題に適切に取り組んでいると思います。これらの考えは彼らの小学校時代から繰り返し強調されてきました。一方でそれは彼らが高校生に入ってから低迷しているように感じます。したがって高校生への再教育が重要かもしれません。」
– 小学5年生と高校１年生の親
コンテキスチュアル・インクワイリー(文脈的質問法)
オスラー小学校4年生と5年生のクラスで開催されたワークショップへの参加機会を得ました。
問題に正解して嬉しそうにダンスをしたり、環境問題に関する専門知識について自信に満ち溢れて披露したり、チームリーダー風に振舞ったり、周りのクスクスとした笑い声などのクラスルームの生徒の熱気に私たちは興奮しました。
デザインプロセスの計画段階に進むにあたり、私たちはこのワークショップの素晴らしさを感じると同時に興味を抱くことが出来ました。
計画
アフィニティダイアグラム（親和図法）
調査データのパターンを分析するために、ポストイットで調査とインタビューで得られた一般的な回答をまとめ、それらをカテゴリーに整理しました。
我々は以下を発見しました。
・多くの人が自分の個人的な影響を理解し、どのように貢献できるかを学びたいと考えています。
・彼らは以下を希望しています。
→具体的で実用的なアイデアを持つこと
→そのような考えを持つ人から学び、その進捗状況を共有すること
→ 自分の悪い習慣を確認できるシステム
・彼らは直感的で使いやすいアプリを望んでいます。活動記録にかかる時間は、ボタンを押すのと同じくらい素早くかつ簡単にできなければなりません。
絵コンテとシナリオ
私たちはユーザーの一人であるアンバーの絵コンテを作成しました。
アンバーは、環境の持続可能性に情熱を傾けている16歳の高校生です。彼女は野外活動を愛し、自然を愛しています。彼女はできるだけCO2排出量を減らそうとしています。
彼女は持続可能性とCO2の節約行動に対する情熱を友人たちと共有することを熱望しています。しかし、しばらくすると友人たちは古い習慣を再開します。アンバーは、友達が環境への影響を理解して行動を変えるように働きかけるのは難しいと認識しています。
ペルソナ
私達は彼女の動機、目標、不満を強調するためにアンバーというペルソナを作成しました。
機能リスト
キックオフミーティングの直前に、クライアントからアプリの12個の要件と13個のアイデアリストの提供がありました。すべて素晴らしいアイデアでしたが、デザインスプリントの時間的制約（3週間）を伝えました。
キックオフミーティングで私たちは実用最小限の製品（MVP）に3つの機能を優先させることに同意しました。
・環境に優しい活動の追跡 – 現状課題に含まれるすべてのコンテンツを含め、ある年齢層（高校生と一般大衆）をターゲットにし、温室効果ガス削減量をリアルタイムで表示します。
・プロフィールの設定 – Cool Itプログラムに参加しているユーザーが個人のプロフィールを設定することで、BCSEAは参加者がどの学校やクラスから来たのかを知ることができます。
・カーボンクイズ – これはワークショップ前に学生に与えられていたCO2排出に関連する25個の質問です。アプリに統合することで、ユーザーは自分のベンチマークを設定することができます。
さらにMVPを基準としてアプリをより楽しくする3つの追加機能を追求しました。
・Gamified Planet – ユーザーが環境に優しい活動を記録したときにポイントが貯まり、一定ポイントで賞が貰えます。賞はユーザーの「惑星ページ」に置くことができます。ユーザーがより多くの賞を集めるにつれて、彼らの惑星は大きくなります。
・Heroes – 彼らがCool Itプログラムの参加者であるなら、クラスのメンバーがどのような状況か確認することができます。
・Visualized impact – 平均的な温室効果ガスの節約、合計ポイント、およびカーボンクイズスコアを参照できます。進捗状況は折れ線グラフで視覚化し、カテゴリ別および時間別に表示するフィルタ機能があります。
ユーザーフロー
上記機能を念頭に置き、アプリのユーザーフローを作成しました。
これは私たちのユーザーフローの最終版です。これは後に示すハイファイプロトタイプと同じもので強調したい事が2つあります。
・the Onboarding process：このアプリはCool Itプログラムのユーザーおよび一般の人々のために作成されたものです。
→ユーザーが最初にアプリを開くと、アプリはプログラム参加者であるかどうかを確認します。
→参加者の場合、アプリはプログラムの参加者であることを確認するために彼らの学校、クラス、特別なコードの登録を促します。参加者でない場合はこのステップはスキップされます。
→どちらの場合も、ユーザーは自分のアカウント資格情報を作成し、カーボンクイズに移ります。この作業により、今後のベンチマークを決定します。
・the Day-to-Day process ：毎日、ユーザーはアクティビティ画面に移動して、実行したサステイナブルな活動を入力します。
→ユーザーは環境に優しい活動を選択してそれを追加します。
→システムは、瞬時にフィードバックをするために累積しているポイント数を表示します（すなわち各アクティビティが追加されると、ポイントは50または100ずつ上がります）。
→ユーザーはその日のすべての活動に対してこのプロセスを繰り返します。
→ユーザーが「calculate my impact」ボタンをクリックしてこれを送信します。
→アプリは温室効果ガス節約量を計算し、彼らの惑星のための賞を得るために十分なポイントを持っているかどうかをユーザーに伝えます。
設計・プロトタイピング・試験
設計、プロトタイピング、試験の各段階が明確に同時に行われていないため、これらの見出しの下にコンテンツをグループ化するのは困難でした。代わりに小見出しを使用します。このフォーマットに関するご意見をお待ちしています！
私たちはデザインスタジオでワイヤーフレームをホワイトボードに図示することから始めました。そこでは2分間でデザインを考え、1分間でデブリーフィングをするというサイクルを繰り返しました。
この方法でアイデアを絞り込んだ後、Sketchでそれらをデジタル化する前に、ローファイプロトタイプとして紙にスケッチしました。各サイクルで、特定の手順をテストし、少しずつ改善しました。
繰り返し作業
繰り返し作業の1例について紹介します。Activity Tracking機能とTravel Smartアクションを取り上げましょう。これは学校に自転車で通学したことを記録する機能です。
以下に示すように、私たちはクライアントから提供してもらった紙ベースの小冊子から始め、それをアプリの画面に反映しました。
これをデジタル化すると、コンテンツが収まりきらなかったため、2つの画面に分割しました。ただし、テストの結果、入力箇所が多いことがわかりました（保存をクリックする前に日付、場所、および交通手段など）。ユーザーは活動を登録するごとに繰り返す必要があります。
そこで私たちは方向性を修正し、カルーセルレイアウトを使用して、すべてのアクティビティを1つの画面にまとめました。これによりユーザーが毎日クリックするのは1ページのみになります。上部の日付により、ユーザーは忘れてしまった場合には遡って実施した活動を追加する事もできます。
私たちはクライアントから提供されたコンテンツをできるだけ多く保持したいと思ったので、2つ目のパネルを紹介しました。そこでさまざまな活動についてさらに学ぶことができます。
しかし、私たちが受けたフィードバックは、ユーザーが左右を切り替えることを知らないかもしれず、2つの画面は分離して見える（一方のアクティビティの位置が他方のものと対応していない）ということです。これだとユーザーが情報を探すにあたり問題がある可能性があります。
私たちはクライアントと最後のすり合わせを行いました。ユーザーが活動の種類をクリックすると、説明を示すポップアップが表示されます。その後、ユーザーは”+”をタップしてその活動を追加します。
このデザインでは、アクションごとに追加のタップが一回必要ですが、コンテンツを表示するために別のページに移動することはありません。
テスト
すべての繰り返し確認作業の完了後、アプリのテストを実施しました。
・アカウントを作成する
・カーボンクイズを実施する
・サステイナブルな活動を記録する
（1）Travel smartアクション
（2）5R（不要なものはもらわない、ゴミを減らす、再利用する、修理する、リサイクル）
（3）地域活動
・惑星を確認する
（1）賞の確認
（2）惑星に賞を加える
上記のフィードバックに加えて、別の提案が寄せられました。
それぞれ以下のように解決しました。
・前ページで説明するのではなく、カーボンクイズ時の画面の上に説明を追加
・テスト参加者が賞を彼らの惑星コレクションにナビゲートするのに苦労したので、明確にするための若干のコピーを追加
・いくつかのページで文字が多いと感じたので、クライアント提供のコンテンツをもう少し簡潔にしました
快適なデザイン
機能リストだけでなく、ユーザーフレンドリーなデザインを考えました：
・ユーザーがしばらくアプリにログオンしていない場合は、通知が表示され、新しい報酬を受け取るように促されます。
・通知をクリックすると、アプリは歓迎し、彼らの環境に配慮した活動を記録することを奨励します。
UIデザイン
私たちがUXの作業をしている間、UIチームはCool Itアプリのためのビジュアルを一生懸命に作成してくれました。以下は彼らの作品のスナップショットです。
ムードボード
スタイルタイル
ロゴ – 古いものと新しいもの
ハイファイプロトタイプ
私たちの最終的なプロトタイプはInVisionを使って作成されました：
プロジェクト「P3_hifi_v2」を見るにはここをクリック
今後の検討事項
現在のデザインを拡張し、クライアントの他のアイデアを取り入れるために、Cool Itアプリに関する将来の検討事項をいくつか挙げます。
・ユーザーが具体的で実用的なコンテンツを持てるようにコンテンツをさまざまな年齢層に対応させる（つまり、小学生が成人の手助けなしに独自にできること）
・若い子供のための保護者による確認手順を導入する。紙ベースの小冊子では、生徒が持続可能な活動をするにあたり両親の許可を必要とします。
・ユーザーが同じ活動を繰り返すことができないように回数を制限して、簡単なタスクを繰り返すことをやめさせ、より効果的な活動を見つけるように促します。
・アプリにもっと社会的側面を追加する – 例えばサークル活動への参加者募集、友達とコンテストの作成、サステイナブル活動の写真の共有、アイデアの共有などです。
・毎日の課題 – 例 ボーナスポイントを得るためのクイズ
次のステップ
スプリントの間、私達は進行中のプロトタイプを同じ学校内のアプリ開発クラスに提示しました。その目的はRed Academyでアプリを構築すべきかどうかを評価してもらい、アプリのコンテキストと複雑さを理解することでした。
– 結果的に私たちのアプリは選ばれました！
3週間の終わりに、クライアントに最終的なプロトタイプを提示しました。彼女は私たちの仕事に非常に満足していて、学内の開発アプリに選ばれたと聞いてワクワクしていました。
振り返り：クライアント、UI、開発者とのコラボレーション
このプロジェクトを振り返ると成功、そしてその過程での問題においてオープンなコミュニケーションがすべての関係者を結びつけるためのポイントであることに気づきました。
1日目から、私たちは3週間で何が達成できるかについて、クライアントに先んじて取り組みました。デザインの方向性を変えたときは、目線を合わせ、納得してもらえるようにZoomを使った電話会議を設定しました。
またデザインチーム内で毎日スクラムを開催し、進行中の作業を共有し、そして直面している課題について議論しました。私たちはドラフトのミッドファイスクリーンをUIチームに渡したので、彼らはさまざまなデザインを作成開始できました。新しいアイコンが必要な場合はできるだけ早く知らせ、新しいグラフィックの作成に値するかどうかについての意見を聞きました。
さらに開発者と温室効果ガス計算機の入力と出力を説明してもらうために2、3回（彼らの都合のよいときに）伺って、アプリがデータベースに接続されたときにそれが何を意味するのか教えてもらいました。これにより技術的な観点から不可能なデザインになる事を防ぎました。
プロトタイプにはまだ改良の余地があります。アプリを開発段階に移行することで、欠けている要素（エンプティーステートなど)を発見することになるかもしれませんが、開発者とコラボレーションし、ブリティッシュコロンビア州のCool Itアプリに貢献する事が出来てとても良い経験になりました。
おすすめ新着記事
おすすめタグ