Loading...
Loading project...

UXデザイナー
メンターからのフィードバック付きソロプロジェクト
1 ヶ月
2週間のスプリントサイクル(16日間)
2週間のスプリントサイクル
OpenClassroomsのUXデザイン課程で取り組んだ、実在の非営利組織Kopernikのウェブサイトランディングページ改善プロジェクト。2週間のスプリントサイクルで、ロードマップとタスクを整理し、カードソーティングとユーザビリティテストでメンタルモデルとユーザビリティ課題を調査したうえで、複数のデザイン案を提案した。
Kopernikのウェブサイトには、不明確な情報アーキテクチャ、重複コンテンツ、混乱を招くナビゲーションなどのユーザビリティの問題がありました。ユーザーはタスクを完了できたにもかかわらず、サイトに満足していませんでした。ランディングページは組織の実績を容易に伝えず、ユーザーは異なるページを深く探索する必要がありました。
ユーザーのメンタルモデルとユーザビリティの問題を特定するために、ハイブリッドカードソーティングとユーザビリティテストを実施しました。調査結果に基づいて、ランディングページの整理、寄付CTAの追加、組織のパフォーマンス指標の表示、メンタルモデルに基づくコンテンツの再編成など、特定された問題に対処する2つのデザイン案を提案しました。
Kopernikのウェブサイトには、不明確な情報アーキテクチャ、重複コンテンツ、混乱を招くナビゲーションなどのユーザビリティの問題がありました。ユーザーはタスクを完了できたにもかかわらず、サイトに満足していませんでした。ランディングページは組織の実績を容易に伝えず、ユーザーは異なるページを深く探索する必要がありました。
ユーザーのメンタルモデルとユーザビリティの問題を特定するために、ハイブリッドカードソーティングとユーザビリティテストを実施しました。調査結果に基づいて、ランディングページの整理、寄付CTAの追加、組織のパフォーマンス指標の表示、メンタルモデルに基づくコンテンツの再編成など、特定された問題に対処する2つのデザイン案を提案しました。


変更前: 変更前: オリジナルのランディングページには以下のユーザビリティの問題がありました:重複するナビゲーション要素による不明確な情報アーキテクチャ、混乱を招くフッター構造、寄付CTAの欠如。ユーザーはプロジェクト情報や寄付オプションを見つけるのに苦労していました。
変更後: 変更後: リデザインされたランディングページはユーザビリティの問題に対処しています:統合されたメニュー項目による整理されたナビゲーション、目立つ場所に表示された明確な寄付CTA、カードソーティングから得られたユーザーのメンタルモデルに基づくコンテンツの再編成、改善された情報階層。


変更前: 変更前: オリジナルの寄付コンテンツページは不明確なレイアウトで、目立つコールトゥアクションボタンが欠如していました。ユーザーは寄付方法や寄付が何を支援するのかを理解するのに苦労していました。
変更後: 変更後: リデザインされた寄付コンテンツページは、目立つ寄付CTA、改善された視覚的階層、寄付がプロジェクトをどのように支援するかの説明を特徴としています。ユーザーエンゲージメントとコンバージョン率の向上を狙った設計です。
ハイブリッドカードソーティング(Optimal Workshop)と、組織に寄付したことがある、または寄付したいと考えている3名の参加者によるユーザビリティテスト。
すべてのテストユーザーがタスクを完了できましたが、ウェブサイトにはユーザビリティの問題がありました。主な発見事項には、他のNPOとの違いがわからない、プロジェクトが実際に行われていると信じられない、日本語版のナビゲーション名が混乱を招く、コンテンツの意図が不明確などが含まれます。
カードソーティングの結果、元の配置は比較的受け入れられることがわかりましたが、コンテンツはメンタルモデルに基づいて再編成する必要があります。ユーザーは組織の実績を理解するために、歴史、プロジェクト数、パートナー数、寄付額などの見やすいコンテンツを必要としています。

Kopernikウェブサイトリデザインプロジェクトの2週間のスプリントサイクル、主要なタスク、マイルストーンを示すプロジェクトロードマップ。

現在のサイトマップ分析により、重複するナビゲーション要素と混乱を招くフッター構造が明らかになりました。ナビゲーション項目は青、フィルターはオレンジ、コンテンツは白、フッターは緑で示されています。
5名の参加者、30枚のカードによるオープンカードソーティング
| クラスター | 類似度 | 頻度 |
|---|---|---|
| 製品情報 | 89% | 95% |
| カスタマーサポート | 82% | 80% |
| 企業情報 | 95% | 100% |
| 事例・実績 | 65% | 70% |
5名の参加者(User A, B, C, D, E)による30枚のカードを使用したオープン・カードソーティング。結果は、元の配置は比較的受け入れられることがわかりましたが、コンテンツはメンタルモデルに基づいて再編成する必要があります。主要なクラスター:「SIGN IN」ナビゲーションメニュー→フッター(66%)、「INSIGHTS & REPORTS」ナビゲーションメニュー→コンテンツ(66%)。特定された主要クラスター:製品情報(類似度89%、頻度95%)、カスタマーサポート(類似度82%、頻度80%)、企業情報(類似度95%、頻度100%)、事例・実績(類似度65%、頻度70%)。
5名の参加者、30枚のカードによるオープンカードソーティング
伝統的な3部構成(Products, Support, About Us)
ビジネス指向の「ソリューション」アプローチ
日本語に親しみやすいラベル
詳細なカテゴリー名
抽象的な「体験型」ラベル付け
5名の参加者がカードソーティング中にコンテンツをどのように整理したかの可視化。多様なメンタルモデルが明らかになりました。参加者のパターン:Participant-1は伝統的な3部構成(Products, Support, About Us)を使用、Participant-2はビジネス指向の「ソリューション」アプローチに焦点、Participant-3は日本語に親しみやすいラベルを好む、Participant-4は詳細なカテゴリー名を使用、Participant-5は抽象的な「体験型」ラベル付けを採用。赤い線で囲まれた3つのグループは、それぞれオリジナルのヘッダーとナビゲーション、コンテンツ、フッターを表しています。

Optimal Workshopを使用してハイブリッドカードソーティングを実施し、ユーザーのメンタルモデルと情報アーキテクチャの好みを特定しました。
3名のユーザーによるユーザビリティテストとユーザーインタビューの結果
| タスク | 完了 |
|---|---|
| 初めてサイトを訪問し、組織について学ぶ | 完了 |
| 組織の活動について学ぶ | 完了 |
| 寄付するか、ニュースレターに登録する | 完了 |
| 質問項目 | 結果 |
|---|---|
| 使用の容易さ | 普通 |
すべてのテストユーザーがタスクを完了できた
他のNPOとの違いがわからない
プロジェクトが実際に行われていると信じられない
日本語版のナビゲーション名が混乱を招く
コンテンツの意図が不明確
組織に寄付したことがある、または寄付したいと考えている3名の参加者とユーザビリティテストを実施しました。すべてのテストユーザーがタスクを完了できましたが、ウェブサイトにはユーザビリティの問題がありました。主要な改善:オンボーディングのボトルネックが解消、目的のコンテンツに到達するまでのステップ数が短縮。例:リデザイン後、注文時間が5分から2分に短縮。
カードソーティングとユーザビリティテストの調査結果に基づいて、2つのデザイン案を作成しました。クライアント(メンター)からのフィードバックを受けた後、コンテンツグリッドの一致、寄付ステータスバーのグレースケールへの変更、自己紹介と作業説明の統合など、特定の修正リクエストに対処する最後のイテレーションを行いました。

カードソーティングから学んだことのみを反映した最初の提案IA更新。これは主要な発見事項に対処しながら元の構造を維持する控えめな提案です。

カードソーティングの結果とインタビューの発見事項を反映した2番目の提案IA更新。「INSIGHTS & REPORTS」を「Past Projects」と「Ideas」に改名し、「Upcoming Projects」セクションを作成し、「DIGITAL INITIATIVE」を他の作業と並べて配置することを含みます。
最終的なデザインイテレーションでは、自己紹介のコンテンツグリッドの一致、赤い寄付ステータスバーのグレースケールへの変更、スタンドアロンコンテンツのOUR WORKセクションへの統合など、クライアントのフィードバックに対処しました。
新しいデザインは、ユーザーからの寄付を求めるコンテンツとCTAを組み合わせ、より明確なレイアウトのために情報アーキテクチャを改訂し、調査で特定されたユーザビリティの問題に対処することで、非営利組織の主な目標を達成し、ユーザー体験を改善しました。
設計時点で設定した期待効果(推定値)。実際のコンバージョン率は計測していない。
新しいコピーによる期待効果(設計時点の推定)。実測値ではない。
組織のパフォーマンス情報をランディングページに統合したことによる期待効果(設計時点の推定)。実測値ではない。
すべてのテストユーザーがタスクを正常に完了できました。ユーザーはUIとナビゲーションメニューに良い反応を示しました。しかし、ユーザーはニュースレター登録ポップアップ、日本語版の混乱を招くナビゲーション名、プロジェクト活動の明確性の欠如について懸念を表明しました。
クライアント(メンター)は、コンテンツグリッドの一致、寄付ステータスバーのグレースケールへの変更、自己紹介と作業説明の統合などの特定の修正リクエストを提供しました。これらのリクエストに対処した後、最終デザインが承認されました。
ウェブサイトの情報アーキテクチャを評価し、深く掘り下げた結果、ユーザーがコンテンツがここにある理由を知らない、一部の重複などの問題を発見しました。情報の可視化と行動のメリットを含むコピーとデザインは、CTAボタンだけでなく、ユーザーに行動を促すためにも重要です。
この新しいデザインは、調査で特定された問題を完全に解決するものではありません。イテレーティブなアプローチを迅速に回すことが重要です。次のステップには、リデザインの効果測定、ユーザビリティテストの実施、コンテンツ監査、各ページのコンテンツを徹底的に見直すためのカードソーティングが含まれます。