Plantwise
![Screen Mockup of the Plantwise App](img/plantwise/large/plantwise_mockup-main@x2.png)
節約と環境保護を促進するための魅力的でモチベーションを高めるアプローチ
プロジェクト概要
役割
UIデザイン / UXデザイン
ツール
Figma / Adobe Illustrator / Adobe Photoshop
背景
多くの人にとって、お金の管理や環境問題への対処は難しいと感じられることがあり、 日常生活での実行が困難または面倒になることがあります。 しかし、どちらも重要なテーマであり、見過ごされると長期的にマイナスの結果を招く可能性があります。 これらの一見難しい問題にすべての人を巻き込むために、 Plantwiseはゲーミフィケーションのアプローチを採用し、 専門知識に関係なく、個人の財務管理と環境への貢献をモチベーションが高く魅力的なものにします。
課題
- 個人の財務管理のような難しいトピックを、 楽しいゲーム要素と組み合わせて、 財務処理が好きでないユーザーをモチベートする。
- お金の管理は圧倒的になりがちなので、多くの人がそれを避けることになる。 お金の管理をより手軽にし、理解しやすいインターフェースと機能を提供することで、 ユーザーが財務にかける時間を減らしながらも、 肯定的な結果を達成できるようにする必要があります。
デザインプロセス
![Illustration of the Design Process](img/plantwise/large/plantwise_process_jp@x2.png)
ユーザーのニーズの理解
財務管理を敬遠する理由と、モチベーションを高めるためには何が必要ですか?
上記の課題に取り組むために、私はなぜ個人の財務管理がしばしば「悪役」として捉えられるのか、 そしてどのようにして人々がこの敵と戦う手助けができるのかという疑問からスタートしました。 それで、対象となるユーザーの苦労をより深く理解するために、 ユーザーインタビューを開始しました。これらのインタビューは、 参加者の節約慣習などに関する痛点とニーズを明らかにしました。
痛点
- 衝動買い
- 予定外の支出
- 財務管理のアプリがしばしば複雑すぎる
ニーズ
- 手の届かない場所に貯金を保存する方法
- • 柔軟な貯金オプション
- どこからでも簡単にアクセスでき、使いやすいアプリ
インタビューの知見からユーザーペルソナへ:ユーザーの痛点と目標の解析
インタビューから得た洞察をもとに、私は二つのペルソナ、AllyとMatthewを作成しました。 これらは、対象者の痛点と目標を代表するものです。 ペルソナは、対象となるユーザーにより具体的なアイデンティティを与え、 ユーザーに合わせた機能の開発を導くのに役立ちました。
![Picture of Ally](img/plantwise/large/user-persona_ally_jp@x2.png)
![Picture of Ally](img/plantwise/large/user-persona_mathew_jp@x2.png)
ユーザーのジャーニーを理解する
ペルソナであるAllyとMatthewを基に、 アプリ内でユーザーが目標に到達するために必要なステップを考慮し始めました。 ユーザーは貯金管理の情報や機密情報を入力することにどのような感情を持つでしょうか? 私はユーザーの感情的な旅路を理解しようとし、 彼らが経験する可能性のある痛点を解き明かそうとしました。 そこから、全体的な体験を向上させ、より楽しいものにし、 ユーザーが直面する可能性のある障害を減らすための改善を再考しました。
![Picture of Journey Map](img/plantwise/large/plantwise_journey-map_jp@x2.png)
ユーザーストーリー:ユーザーのニーズに基づいて機能を決定する
ユーザーの感情的な旅路を理解することは、対象者の問題に対処する製品を開発する上で重要です。 しかし、必要となる機能と、ただ便利な機能を区別することも同様に重要です。 それで、ユーザーにとって最大の価値を提供するコスト効率と時間効率の良いアプリの初版を制作することができます。
前のステップでは、ユーザーの問題を解決するための改善の機会を発見しました。 次のステップでは、ユーザーに最も利益をもたらす機能を特定し、その結果、 製品の初版に必要なユーザーストーリーを策定しました。
![Picture of Journey Map](img/plantwise/large/plantwise_user-story1_jp@x2.png)
機能:
- 固定金額だけではなく、パーセンテージを設定できるオプションを追加する。
![Picture of Journey Map](img/plantwise/large/plantwise_user-story2_jp@x2.png)
機能:
- 支出と収入を入力できる機能
- 銀行口座をリンクできるオプション
![Picture of Journey Map](img/plantwise/large/plantwise_user-story3_jp@x2.png)
機能:
- 収入と支出のカテゴリーを追加する
![Picture of Journey Map](img/plantwise/large/plantwise_user-story4_jp@x2.png)
機能:
- ゲーミフィケーション要素を追加する
![Picture of Journey Map](img/plantwise/large/plantwise_user-story5_jp@x2.png)
機能:
- 貯金目標を設定する
研究から発想へ:アプリの構築
アプリの構造を開発する
実装する機能のアイデアを持って、私はユーザーフローの創造に取り組み始めました。 それは、様々な思い付いた機能を統合しながら、簡単で直感的な構造を維持する方法を探るというものです。 例えば、オンボーディングプロセスの場合はアプリが機密データを扱うことを考慮するため、 直感的かつ信頼できるものにする必要があります。 取引追跡のフローは迅速でわかりやすいものである必要があり、ユーザーが毎日この機能を使用する可能性が高いため、 不必要な複雑さは避けるべきです。 最後に、貯金目標のフローは魅力的でモチベーションを高めるものであり、 ユーザーがお金を貯金する旅を続け、最終的に目標を達成することを奨励するものであるべきです。
![User Flow](img/plantwise/large/plantwise_flow_jp@x2.png)
画面開発のためのアイデア創出
この時点で、アプリの要件と良いユーザー体験のための必要な画面について適切に理解を持っていました。 しかし、画面上で機能をどのようなレイアウトで導入し、 どのように視覚的で魅力的なアプリを作成するかは別の課題でした。 この障害を克服するには、多くの紙と外への散歩が必要ですが、最終的には解決策を思いつき、 アプリの最初の粗い構造を定義しました。
![Low-Fidelity Wireframes](img/plantwise/large/plantwise_low-fi@x2.png)
紙のワイヤーフレームをベースに、Figmaを使用してデザインをデジタルワイヤーフレームに変換しました。 さらなる開発と磨きをかけた後、スクリーンはグレースケールのワイヤーフレームに進化しました。
![Mid-Fidelity Wireframes](img/plantwise/large/plantwise_mid-fi@x2.png)
![Mockup of Plantwise App and Tree Illustrations](img/plantwise/large/plantwise_mockup3@x2.png)
デザインのユーザビリティテストとプロトタイピング
私たちが直感的だと思うアイデアが他人には混乱を招くことがあると思います。 そのため、デザインを実際のユーザーとテストすることが不可欠であるものです。 テストを行うために、プロトタイプを作成し、ユーザーがシームレスに目標を達成できるかを評価して 不快なユーザー体験につながる可能性のあるデザインの潜在的な痛点を特定しました。
4人の参加者を募り、それぞれに3つの異なるタスクを完了してもらいました。 テスターがアプリを操作し、問題なくタスクを達成することができましたが、 テストの結果、アプリのナビゲーションと全体的なユーザー体験を改善するために対処する必要のある 2つのポイントが明らかになりました。
問題1:
ボタンが小さすぎて届きにくいです。
![Screens of Usability Problem 1](img/plantwise/large/plantwise_problem1_jp@x2.png)
解決策
![Screens of Solution to Usability Problem 1](img/plantwise/large/plantwise_solution1_jp@x2.png)
問題2:
ホーム画面には、直接取引や貯金目標を追加する機能がありません。
![Screens of Usability Problem 2 and Solution](img/plantwise/large/plantwise_problem2_jp@x2.png)
ビジュアルデザイン:スタイルガイドから画面実装へ
デザインに個性を与える
グレースケールのワイヤーフレームに改善を加えた後、アプリのアイデンティティをさらに発展させました。 これには、カラーパレット、タイポグラフィ、さまざまな要素のスタイルを決定する作業が含まれています。 Plantwiseは、環境に焦点を当てたお金の貯金と管理にゲーミフィケーションのアプローチを取り入れています。 ブランドの主要な原則をアプリにシームレスに統合するために、楽しい雰囲気を作り出し、自然と環境の本質をユーザーに伝える色とフォントを選択することを目指しました。
これを実現するために、主要色と副色に緑色の色合い、 アクセントカラーには土っぽいオレンジ色を選びました。 さらに、アプリの遊び心のある性質を強調するために、 丸みを帯びたフレンドリーなタイポグラフィを選択しました。
![Main Colors and Typography of Plantwise](img/plantwise/large/plantwise_style-icon@x2.png)
![Style Guide](img/plantwise/large/plantwise_style_jp@x2.png)
![Phone Screen of the Dashboard of the Plantwise App](img/plantwise/large/plantwise_mockup4@x2.jpg)
![Phone Screen of the Insight Screen of the Plantwise App](img/plantwise/large/plantwise_mockup5@x2.jpg)
機密性の高いデータを扱う場面:オンボーディングプロセス中の信頼構築
ユーザーデータの保護を確保するため、オンボーディングプロセス内で認証プロセスとパスコードの設定を実装しました。 機密性の高いユーザーデータを扱うアプリとして、最初から信頼を築くことが重要です。 これにより、ユーザーは安心してアプリを利用することができます。。
![Phone Screens Sign Up Process](img/plantwise/large/plantwise_signup_jp@x2.png)
![Phone Screens Verification Process](img/plantwise/large/plantwise_phone_jp@x2.png)
![Phone Screens Account Creation Process](img/plantwise/large/plantwise_account_jp@x2.png)
日常の支出を追跡するための簡単なプロセス
ユーザーがアプリを毎日利用することを考慮すると、トラッキングプロセスは 日常の支出を簡単に監視できるように簡素化することが重要です。 このため、さまざまなアプリ画面から簡単にアクセスできるシンプルな取引追跡プロセスを実装しました。
![Phone Screens Dashboard](img/plantwise/large/plantwise_home_jp@x2.png)
![Phone Screens Transaction Process](img/plantwise/large/plantwise_transactions_jp@x2.png)
貯金を楽しく魅力的にする:目標ごとに木を植えて森を育てる
貯金は退屈で不快なトピックになりがちですが、貯金プロセスを魅力的でやる気が出るものにすることは、 Plantwiseの重要な側面です。ユーザーは木のイラストを集め、ある金額を貯金するごとに実際の木を植えることができます。
![Phone Screens Saving Process](img/plantwise/large/plantwise_saving_jp@x2.png)
![Phone Screens Create new saving goal](img/plantwise/large/plantwise_saving-goal_jp@x2.png)
![Phone Screens new saving goal](img/plantwise/large/plantwise_new-goal_jp@x2.png)
学んだこと
ユーザーのためにできるだけシンプルで、異なるオプションを提供すること
初期の画面コンセプトでは、ユーザーがホーム画面から直接取引や目標を追加する機能は含まれていませんでした。 しかし、新しい取引や目標を取引画面と貯金画面からのみ追加できるようにすると、 ユーザーには常に余分な手順が生じます。特に日常的な使用において、この小さな余分なステップは迅速に積み重なり、 ユーザーの不満を引き起こす可能性があります。 したがって、ユーザーにとって最も速くて簡単な方法を提供することは、 満足するユーザー体験を確保するために重要です。