Yuri Minami
Greenstand Treetrackerのメイン画像

Greenstand Treetracker

限られたリソースで運営されるボランティア組織の拡張性を高めながら、分断されたプロダクト群を刷新・統合するリデザインプロジェクト

プロジェクト種別
ボランティア活動: Greenstand
領域
モバイルプロダクトデザイン
役割
UXデザイナー
チーム
自身、組織の経営陣、エンジニア

世界の森林再生を支えるアプリを開発する非営利団体

GreenstandのアプリTreetrackerは、特に開発途上地域を中心とする56か国で利用されています。地域の植林者が位置情報付きの写真を使って植えた木を記録・検証でき、植林団体や寄付者は環境への効果を把握できます。同時に、植林者へ収入の機会を提供しています。

Treetrackerを使って植林者が撮影した木の写真

植林者が木の写真を撮影します。

Greenstandで検証された木の位置を示す地図

アップロードされた木は地図上で追跡・検証されます。

プラットフォーム間の相違とレガシー化したデザイン

Over time, Treetracker faced growing challenges across its product experience.

Inconsistent design across Android and iOS

TreetrackerのAndroid版とiOS版は別々に発展し、機能、インタラクションパターン、ビジュアルスタイルに違いが生じていました。2つの異なる体験を維持することで、デザイン作業の重複が生じ、リソースの限られたボランティア主体の組織にとって特に大きな負担となっていました。

iOS

従来デザインのTreetracker iOS画面

Android

ダークモードと従来デザインのTreetracker Android画面

Legacy UX with accumulated usability issues

The product, originally designed for first-time smartphone users, had become outdated as smartphone familiarity grew and UX conventions evolved. Combined with accumulated usability issues, incremental fixes were no longer enough, calling for a more fundamental redesign.

プロダクトを統合・刷新するリデザインを推進

この2つの課題を同時に解決できる機会だと考えました。AndroidとiOSを一貫した1つの体験へ統合しながら、アプリをリデザインしてレガシーUXを刷新し、より広範なユーザビリティ上の課題に対応することです。

期待できる効果

ユーザー

  • より直感的で、使いやすい体験
  • より円滑なプラットフォーム間の行き来

Greenstandチーム

  • 保守工数の削減
  • 将来の機能拡張のしやすさ

理想的な将来のデザインを提示し組織内ステークホルダーの賛同を得る

プロダクト全体のリデザインには、デザインチームを越えた連携が必要でした。より広範なプロダクトと開発プロセスに影響を及ぼすためです。そこで、ビジョンを示し、その潜在的な価値を明らかにし、より広範なリデザイン施策へのステークホルダーの賛同を得るため、まずは制約にとらわれないリデザインから着手しました。

複雑で制約の多い環境における植林トラッキング

組織の経営陣とのミーティング、資料の確認、デスクリサーチを通じて、Greenstandの樹木トラッキングの流れ、ユーザー、ステークホルダーの関係を理解することから始めました。これらのリサーチから以下の制約と役割があることが分かりました。

ユーザーの制約

開発途上国の現場で使われる植林アプリのため、多くのユーザーがさまざまな制約のもとで利用しています。

オフライン利用

ユーザーは不安定、またはインターネット接続のない遠隔地で木を撮影することが多い。

共有端末

植林者がスマートフォンを所有しているとは限らず、共有端末を借りて利用する。

識字能力の制約

読み書きに制約があり、アプリ内の文章を読めないユーザーもいる。

役割

主要なユーザー役割は3つです。団体が主導する植林から個人による植林まで、複数の運用パターンがあることが分かりました。

植林者のペルソナ

植林者

木を植えて報酬を得る。スマートフォンを所有していない場合が多く、読み書きやデジタル利用の経験が少ない。

主要ユーザー
地域コーディネーターのペルソナ

地域コーディネーター

共有スマートフォンを所有し、植林者の活動を支援する。団体に直接所属している場合もある。

主要ユーザー
環境団体のペルソナ

環境団体

森林再生の効果を追跡し、団体内のユーザーを管理する。植林者がアップロードした木を検証する。

副次ユーザー

Behind the process

Two diagrams comparing Greenstand's organization-led and individual entrepreneur-led operating models

I mapped the Greenstand ecosystem by synthesizing fragmented information from multiple sources to validate my understanding with stakeholders.

リデザインを通じてどのような価値を生み出せるか

現在のプロダクトとユーザーへの理解から、リデザインによって大きな価値を生み出せる4つの機会が見えてきました。

  1. 1

    エンドツーエンドのユーザージャーニーを支える

    従来の体験は、オンボーディングや木の検証など、ワークフロー全体を十分にカバーしていませんでした。ユーザージャーニー全体を通じた、より完全な体験を支えることを目指しました。

  2. 2

    制約を前提に設計する

    Treetrackerは多くの制約のもとで使われますが、既存の体験はそれらに十分対応していませんでした。これらの課題に向き合うことで、アクセシビリティと使いやすさを改善できます。

  3. 3

    システムの明快さを高める

    明確なナビゲーション、ラベル、システム状態、タスク完了のための案内、操作へのフィードバックが不足していました。明快さを高めることで、混乱を減らし使いやすさを向上できます。

  4. 4

    洗練されたデザインシステムを導入する

    デザインシステムにより、一貫性とブランドらしさのある体験をつくり、保守しやすくできます。

    ※ 詳細はデザインシステムのケーススタディで紹介しています。

Behind the process:

UX改善機会を整理したデザイン方向性のプロセスマップ

Identifying UX improvement opportunities

原則をデザインへ落とし込む

デザイン原則を定めた後、リデザインの方向性を左右する重要な意思決定を検討しました。以下はその例です。

1

エンドツーエンドのユーザージャーニーを支える

木のトラッキング全体を通してユーザーを支えられるように、フローを再設計しました。

Greenstandのユーザーフロー

アップロード後の植林成果を見えるようにする

地域の植林者にとって重要な目標は、植林活動の対価を得ることです。アップロードされた木の写真はパートナー団体によって確認・検証されますが、送信後に何が起きているのか植林者には見えませんでした。そこで、自分の貢献と検証状況を追跡できるように体験を拡張しました。

2

固有の制約を前提に設計する

共有端末に適したアカウントモデルを選ぶ

既存アプリにはアカウント機能がありませんでした。長期的な追跡にはアカウントが必要ですが、多くのユーザーが共有端末を借りるため、一般的なモデルは現実的ではありません。共有型と個人型を比較し、個人の認証情報やアカウント管理に必要な読み書き能力を持たない利用者の障壁を下げる共有型を選びました。

共有アカウントモデルのコンセプト

共有アカウントモデル

1つのアカウントに複数のユーザープロフィール

借用ユーザーの登録負担が少ない

借用ユーザーに認証情報が不要

所有者に依存することによるプライバシー上の懸念

個人アカウントモデルのコンセプト

個人アカウントモデル

共有端末上で各ユーザーが自分のアカウントを持つ

各ユーザーが明確にアカウントを管理できる

借用ユーザーには登録・ログインが難しい

現在のフローから大きく変わる

端末は共有されていても、公平な報酬のためには各植林者の作業が正確に紐づけられる必要があります。アクティブな植林者を明示し、貢献を個別に記録することで、植林者が自分の作業を把握しやすくし、不公平な紐づけを防げるようにしました。

Treetracker screens showing active grower and individual contribution tracking

自動化とユーザーコントロールのバランス

ユーザーはインターネットのない屋外で木を撮影し、後からクラウドへアップロードすることがよくあります。既存アプリもこの流れに対応していましたが、体験は分かりにくいものでした。自動アップロードは通常もっともスムーズですが、通信が不安定または高価な地域ではユーザー自身の制御も重要です。利便性とコントロールを両立するハイブリッド型を選びました。

Automatic uploads

Automatically upload photos when a connection is available

Seamless

May use mobile data when users don’t want it to

Manual uploads

Users upload photos manually

Control over network and timing

Requires an extra step

Hybrid option

By default, manual. Users can also enable automatic uploads.

Balances control and convenience

In addition, upload reminders help ensure pending photos aren't forgotten.

Upload reminder screens for pending tree photos

機能をシンプルに保つ

不要な情報や機能を減らすためにインターフェースを反復し、主要なタスクを分かりやすく保ち、ユーザーを圧倒しないようにしました。

Simplified Treetracker interface exploration

チームレビュー後、可能な限りシンプルにするようフィードバックを受けました。段階的な開示を取り入れ、重要度の低い情報を削減しました。

視覚的な案内で理解を支える

読み書きに制約のあるユーザーも多いため、主要な操作にはアイコンを組み合わせ、イラストなどの視覚的な案内で慣れていないタスクを説明し、テキストへの依存を減らしました。

Visual guidance screens for Treetracker tasks

アイコンや視覚的な手がかりによって、テキストだけに頼らず主要な操作を伝えます。

3

システムの明快さを高める

プロダクト全体のナビゲーション、システム状態、フィードバック、ガイダンスを明確にし、より分かりやすく予測しやすい体験にしました。

Treetracker screens showing clearer navigation, system states, feedback, and guidance

準備中

準備中

制約を前提に設計する

準備中

システムの明快さを高める

準備中

リデザインを作成し、ステークホルダーレビューに向けて準備

このプロジェクトでは、ステークホルダーがTreetrackerの理想的な将来体験を具体的に想像できるよう、制約にとらわれないリデザインのビジョンを作成しました。現在は、今後のリデザイン機会とプロダクトの方向性について議論するため、レビューに向けた準備を進めています。

スムーズな実装と移行に備える

リデザインについてステークホルダーの合意が得られたら、次は理想案を実装ロードマップへ落とし込みます。

エンジニアと協働して現実的なクロスプラットフォーム戦略を定義します。AndroidとiOS間の一貫性を最大化しつつ、ユーザーの期待と技術的実現性に寄与するプラットフォーム固有の挙動は維持します。

大規模なリデザインは既存ユーザーに一時的な混乱を与える可能性があります。段階的な更新、オンボーディング、事前の案内、移行支援を通じて、スムーズな移行方法を検討します。

フィードバックを収集して新しいデザインを検証します。地域ユーザーへ直接アクセスする難しさを踏まえ、ユーザーと接点を持つパートナー団体、コントリビューター、ステークホルダーと協働します。

デザインパートナーとしてのAI

ユーザーへ直接アクセスしにくいこと、専門性の高い領域であること、独自の利用制約があることに対応するため、積極的にAIを取り入れました。時間と調査アクセスが限られる状況で特に有効でしたが、人による判断と改善は引き続き不可欠でした。

調査メモを統合したAIリサーチ環境

ベストプラクティスの要約をGitHubで共有しました。

リサーチ

  • 点在するプロダクト資料を統合
  • ユーザー環境に合うデザインのベストプラクティスを調査
  • チーム向けの要約資料を作成
NotebookLM logoChatGPT logoGemini logo
インターフェースを検討するAIデザイン環境

Claudeを使って機能デザインとレイアウトを検討しました。

デザイン

  • レイアウトの選択肢を探索
  • AIにデザインの批評を依頼
  • 既存のUXパターン例を収集
Claude logoChatGPT logo