bendega.com 複雑な情報を、分かりやすく伝える

2023年5月 – 10月

役割
プロダクトデザイナー
プラットフォーム
ウェブサイト、モバイルサイト
担当領域
UXリサーチ、プロダクトデザイン、
ユーザビリティテスト
ブラウザで表示した、リデザイン前のBendegaのホームページ「Mangrove Reborn」

背景を理解する

Bendegaは、マングローブの保全と、漁業者や地域コミュニティの経済的な自立支援を両立させるソーシャルインパクト団体です。そのウェブサイトは、保全活動、コミュニティプログラム、パートナーシップ、インパクト、そしてマングローブ由来の製品を伝えるためにつくられました。

ウェブサイトには、すでに価値ある情報が豊富にありました。インパクトの数値、保全プログラム、活動履歴、製品、パートナー、お客様の声、チームメンバー、よくある質問など、訪問者は多くの情報にアクセスできました。

しかし、情報がすべて揃っていることと、ユーザーがそれを理解できることは別の問題です。課題はコンテンツの不足ではなく、Bendegaの環境保全のミッション、経済活動、そして参加の機会を結びつける、明確なストーリーがないことでした。

情報は豊富でも、ストーリーがないウェブサイト

既存のホームページでは、多くの重要なセクションがほぼ同じ強さで並んでいました。

ユーザーは、団体紹介からインパクトの数値、保全プログラム、サステナビリティへの取り組み、過去の活動、パートナーシップ、製品、チーム紹介、FAQ、お客様の声へと移動していきます。一つひとつのセクションには意味がありましたが、全体としては断片的な体験になっていました。

リサーチの結果、ユーザーは情報を見つけることはできても、次の点に苦労していることが分かりました。

  • Bendegaの主な目的を理解すること。
  • プログラムと製品の間を行き来すること。
  • 保全活動が地域コミュニティをどのように支えているかを把握すること。
  • 次に何を見るべきか、何をすべきかを判断すること。

体験の評価には、以下の指標を用いました。

  • タスク完了率。
  • Single Ease Question(SEQ)。
  • System Usability Scale(SUS)。
  • ユーザーの観察と行動パターン。
  • テスト後のフィードバック。
  • 補足的な指標としてのNet Promoter Score(NPS)。

リサーチでは、次の4つの問いに焦点を当てました。

  1. ユーザーはBendegaが何をしている団体か説明できるか?
  2. 保全活動と製品の関係を理解できるか?
  3. 案内がなくても重要な情報を見つけられるか?
  4. 自分に関係する次のアクションが分かるか?

ウェブサイトは多くの個別のメッセージを発信していましたが、ユーザーを一つのつながったストーリーへと導けていませんでした。既存サイトのSystem Usability Scaleのスコアは51.75で、全体的なユーザビリティは許容できる水準を下回っていました。

Bendegaウェブサイトにおける8つのユーザビリティテストタスクのSEQスコアを示すレーダーチャート

調査結果をデザインの仮説へ

リサーチをもとに、次の仮説を立てました。

「Bendegaの情報を一つのつながったストーリーとして再構成し、より明確な情報の階層とナビゲーションで支えれば、ユーザーはそのエコシステムをより早く理解し、重要なタスクをより自信を持って完了できるはずだ。」

そこで、リデザインでは次の3つを優先しました。

  • 目的を明確にする。最初の段階で、Bendegaが何をしているのかをユーザーが理解できるようにする。
  • エコシステムをつなげる。保全活動、コミュニティ、製品、パートナーシップを、一つの仕組みの一部として見せる。
  • 目的の異なるユーザーを導く。サイト全体を探し回らなくても、学ぶ、製品を購入する、参加する、協業するといった行動に進めるようにする。
既存のBendegaウェブサイトのSUSスコア51.75が「許容できない」範囲にあることを示すスケール

体験をリデザインする

ウェブサイトを、より分かりやすい流れに再構成しました。

Bendegaの目的 → 保全活動 → コミュニティへのインパクト → マングローブ製品 → 参加と協業

リデザインでは、情報設計、コンテンツの階層、ナビゲーション、レスポンシブ対応、ビジュアルの一貫性を改善しました。

すべてのセクションを同じ強さで扱うのではなく、初めて訪れたユーザーが必要とする情報を優先しました。詳細な活動履歴、チーム紹介、組織の資料などの補足的なコンテンツは、下層ページに置くことができます。

ビジュアルシステムもシンプルにしました。イラストはBendegaらしさとして残しつつ、より明快なコピー、実際の写真、製品画像、インパクトのデータ、そして焦点を絞った行動喚起(CTA)とのバランスを取りました。

リデザイン後のBendegaホームページ:「Reviving Nature, Restoring Life」とインパクトの数値、Aboutセクション

リデザインを検証する

似た機能をグループ化し、互いに近い位置に配置しました。テストの結果、機能名の見直しとグループ構成の再編成によって、ユーザーはアカウントメニューをより簡単に操作できるようになりました。

リデザインの完了後、同等のタスクを用いて再度ユーザビリティ評価を行いました。結果は大きく改善しました。

  • SUSは51.75から85.75に向上。
  • モバイルでのタスク完了率は50%から90%に向上。
  • デスクトップでのタスク完了率は74%から98%に向上。

ユーザーはBendegaの目的をより明確に理解し、プログラムや製品をより簡単に見つけ、迷うことなく体験を進められるようになりました。

この結果は、デザインの仮説を裏付けるものでした。最も大きな改善は、情報を再構成し、Bendegaの活動同士の関係を明確にしたことによるものです。

リデザイン後の「Why Choose Us」と「Product and Service」セクション

より現実的なリフレーミングを探る

リデザインは良い結果を出しましたが、実装するには既存のビジュアルシステム、コンポーネント、レスポンシブ対応、サイト構造を大きく変更する必要がありました。そこで、検証済みの原則を、既存サイトをより多く活かしながら適用する方法を検討しました。

リフレーミング版では、既存の色、イラスト、写真、ビジュアルアイデンティティを残しつつ、コンテンツの伝え方を変えました。

  • ホームページを、より明確なストーリーに沿って再構成。
  • コピーを書き直し、シンプルに。
  • 重複している、または競合するセクションを統合。
  • イラストをより選択的に使用。
  • 保全活動とLindurの製品を結びつける。
  • 顧客、ボランティア、パートナー候補それぞれに、より明確な導線を用意。

このリフレーミングは、新たに検証されたリデザインではありません。ユーザビリティテストですでに良い結果を出した原則に基づく、実装に向けた検討です。

既存のティールのアイデンティティと写真を活かした、リフレーミング版のBendegaホームページ

目的の異なる2つの方向性

フルリデザインは、長期的な理想の体験を示すものです。より強固な情報設計、ビジュアルシステム、レスポンシブの基盤によって、Bendegaのウェブサイトがどのように機能し得るかを示しました。

リフレーミングは、より現実的な移行案です。現在のウェブサイトの多くを残しながら、分かりやすさとコミュニケーションを改善し、実装の負担を抑えられる可能性を示しました。

リデザインが答えた問い:
理想の体験は、どうあるべきか?

リフレーミングが答えた問い:
今あるものを活かしながら、どうすればその体験に近づけるか?

振り返り

このプロジェクトを通して、ユーザビリティの問題は、必ずしも機能の不足や古いビジュアルが原因ではないことを学びました。Bendegaにはすでに価値あるコンテンツと独自のアイデンティティがありました。本当の課題は、保全プログラム、製品、コミュニティ、パートナーシップがどのように連携しているのかを、ユーザーが簡単に理解できなかったことにありました。

リデザインによって、より強い体験を検証することができました。そしてリフレーミングでは、その検証済みのインサイトを、より現実的な実装戦略へと落とし込むことに挑戦しました。