Beautiful Kingston

情報アーキテクチャ
ウェブデザイン
UX/UIデザイン
BeautifulKingston.caは、カナダオンタリオ州キングストン市の観光情報を提供するウェブサイトです。このウェブサイトは、旅行を計画する観光客や、潜在的な顧客と繋がる地元の商人にとって重要なリソースとなっています。サイトの情報検索機能を向上させ、観光客と地元のビジネスの両方にとって直感的で効率的なユーザー体験を提供するために、UIと情報アーキテクチャの再設計が実施されました。その結果、タスク成功率は30%から90%以上に増加し、サイトの多様なユーザー層に対する効果が大幅に向上しました。

タイムライン

12週間(2022年)

使用ツール

Figma, Figjam, Miro, Optimal Workshop

役割

• 情報アーキテクチャアナリスト
• ミッド・ハイファイ プロトタイピング

チーム

Julia Gil, Joyce Ng, Yisu Hu, Min Lin, Myself

00 - プロジェクトの背景

ウェブサイト概要

BeautifulKingston.caは2008年に作成され、2012年に更新されました。このウェブサイトは観光客がキングストンの歴史や文化を発見し、街について基本的な理解を得るために利用され、訪問したいという興味を引き起こすことを目的としています。また、地元の商人が自分のビジネスを宣伝するためにも利用されています。

課題

観光客を引き付け、関連情報を提供することはキングストンの市収入にとって重要ですが、現在のウェブサイトは混雑しており、信頼性のない情報が表示されているため、この目標を妨げています。現行の情報アーキテクチャとインターフェースデザインは、観光客がキングストンを理解し、訪れる意欲を削いでいます。BeautifulKingston.caのUXを改善することで、キングストンの観光業は強化される機会を得ることができます。

解決策

ウェブサイトは、効率的で直感的な情報アーキテクチャと、シンプルで簡潔なインターフェースデザインに再設計されました。これにより、ユーザーはキングストンへの旅行を計画するために必要な情報を簡単に見つけ、さらに都市の基本情報や地元のビジネスについても学ぶことができます。

デザインアプローチ

問題は反復的な方法でアプローチされ、デザインの意思決定は主にリサーチデータに基づいて行われました。

01 - コンテキスト分析

コンテキスト

ウェブサイトの目標を特定した後、主要な調査、ユーザビリティテストをガイドし、後の段階でデザインの意思決定に役立てるために、ステークホルダーの定義も重要でした。
ステークホルダーは次の通りです:

1. キングストンの地元企業
2. キングストン市議会
3. 政府および地域機関

観光は都市の経済において重要な役割を果たし、収益を増加させ、地元の製造業を支援し、重要なサービス業の雇用を生み出します。これを踏まえて、ウェブサイトのナビゲーションを予測可能で信頼性が高く、一貫性のあるものにすることが目標でした。これにより、ユーザー体験が向上することを目指しました。

コンテンツ監査

Content Auditor と Screaming Frog SEO Spider を使用して BeautifulKingston.CA のコンテンツ監査を行った結果、サイトは主に画像とテキストで構成されていることが明らかになりました。サイトには224枚の画像(65.50%)、114のHTMLファイル(33.33%)、最小限のCSSおよびJavaScript(それぞれ0.58%)が含まれています。GIFは装飾や見出しに使用されており、不必要な負荷をかけ、アクセシビリティの問題を引き起こし、ページの読み込み時間を増加させています。
テキストコンテンツに関しては、On Point Content Auditorでのクロール結果によると、読みやすさのグレードスコアは14.6であり、サイトのコンテンツが理解しづらい可能性があることを示しています。
さらに、コンテンツの平均更新日数は3084日であり、つまりこのサイトのコンテンツは約8年前のものであることが分かります。古くなったコンテンツは、最新の観光情報を提供するという目的に対して不満を生じさせる可能性があります。

ナビゲーションシステム

コンテンツ監査に加えて、ユーザーが必要な情報をどのように探し出すかを理解するために、ナビゲーションシステムの簡単な分析も行いました。
2つの主な問題点が見つかりました:
1. ナビゲーションメニューにおけるフラットな情報階層
ウェブサイトは、さまざまなページへの30以上のリンクが含まれるスクロール可能なグローバルナビゲーションバーを特徴としています。カテゴリ化や階層的なグループ分けがないため、ナビゲーションが難しく、情報過多に繋がっています。
2. フッターの重複
ウェブサイトには、グローバルフッターに30以上のリンクが含まれており、その多くがグローバルナビゲーションバーにあるリンクの重複です。その結果、フッターはプライバシーポリシーや法的通知などの重要度の低いページへの二次的なナビゲーションを提供するという本来の目的を果たせていません。

02 - リサーチ

二次ユーザーリサーチ

文献レビューとデスクトップリサーチに基づき、ウェブサイトのターゲットオーディエンスに関する以下の洞察が得られました:

一次ユーザーリサーチ

一次ユーザーリサーチを通じて、以下の点を明らかにすることを目的としました:

1. 旅行者がウェブサイト上でタスクを完了する際の課題や痛点
2.  小規模事業者がオンラインで広告を出す際のニーズ

一次ユーザーリサーチは、以下の3つの異なる潜在ユーザーグループを対象に実施されました:
キングストンへの旅行を計画している大学生 フェリーの時刻表とキングストンの観光スポットをウェブサイトで探すタスクに対して、シンクアラウド方式でセッションを行いました。
美しい風景の撮影を好むトラベルフォトグラファー ウェブサイトを自由に閲覧してもらいながら、観察セッションを実施し、随時フィードバックを収集しました。
オンラインでの発信経験を持つ地元のビジネスオーナー 15分間の半構造化インタビューを行い、ビジネスオーナーとしての具体的なニーズや課題を深掘りしました。

主なインサイト

ほとんどのユーザビリティテストにおいて、タスクの完了に失敗するケースが見られました:

1. サイト全体にわたる安全でない警告メッセージや頻繁なエラー。
2. 情報検索を妨げる機能していない検索エンジン。
3. 混乱を招く整理されていない、または無関係な情報の掲載。
4. ナビゲーションを困難にする分かりづらいラベリング。

「毎秒のように、このサイトを閉じてGoogleマップを開きたくなる。」

— インタビュ―参加者

03 - 再設計

カードソーティング

カードソーティングは、ユーザーが情報をどのように整理するかを理解するための手法です。参加者にはカードが渡され、自分の考えたカテゴリに分類してもらいます。現在のウェブサイトでは、ラベリングや情報の分類に問題があるため、この手法を通じて新しい情報アーキテクチャの設計を正当化することができます。
3回のカードソーティングを、反復的なアプローチとOptimal Workshopのカードソーティングツールを用いて実施しました。各ラウンドの結果は、次回のセッションに向けたカードやカテゴリの修正に活かされました。
↓ 最初のカードソート結果からの抜粋
最初のカードソーティングテストでは、20枚のカードと8つのカテゴリーを使用しました。
類似度マトリックスを使用して、異なるカードの潜在的なグループ分けを特定しました。

情報アーキテクチャのスケマティック

カードソーティングのデータを使用して、新しい情報アーキテクチャ(IA)スキーマを開発しました。以下は、前後のスキーマの比較です。
*変更前
❌ グローバルナビゲーションメニューに30以上のカテゴリリンクがある。
❌ グローバルフッターにグローバルナビゲーションメニューと重複するリンクがある。
❌ 「Visitor Guide 2012」などの曖昧なラベルがあり、混乱を招く。
❌ 階層構造やセカンダリナビゲーションの不足により、サイトのナビゲーションが難しい。
❌ 関連性のない外部リンクが多すぎる。
↓ 下記の変更前のIAスキーマをご覧ください (完全なIAダイアグラムはこちら)
*変更後
✅ グローバルナビゲーションメニューを5つのカテゴリに簡素化
✅ 古くなったり関連性のないコンテンツを削除
✅ 外部リンクを削除
✅ ラベルの表現を明確化
✅グローバルフッターをセカンダリーナビゲーションとして活用し、重要度の低いリンクを配置
↓ 下記の変更後のIAスキーマをご覧ください (完全なIAダイアグラムはこちら)

04 - イテレーション

ツリーテスト

IAスキーマの最初のイテレーションを再設計した後、新しい構造を検証するためにツリーテストを実施しました。ツリーテストは、参加者に情報アーキテクチャ内で特定の情報を探してもらい、その構造を評価する方法です。
OptimalWorkshopのTreejackツールを使用して、7つのツリーテストタスクを作成しました。ツリーテストのデータは、IAスキーマに対して第二次イテレーションが必要かどうかを判断するための参考になります。
7つのタスクは以下の通りです:
タスク1: ウルフアイランドのフェリー時刻表を探す。
タスク2: キングストンの博物館に関する情報を探す。
タスク3: 駐車場に関する情報を探す。
タスク4: キングストンの博物館に関する情報を探す。
タスク5: キングストンの公園に関する情報を探す。
タスク6: キングストンの交通機関に関する情報を探す。
タスク7: キングストンの写真を探す。
↓ 以下は、ツリーテストがどのように実施されたかの例です

キーインサイト

1. 高い成功率
すべてのタスクにおいて成功率が80%を超えており、ラベリング、階層構造、およびカテゴリ分類が効果的であることが示されています。
2. 直接的成功と間接的成功
タスク4およびタスク5では、高い成功率にもかかわらず、間接的成功が目立ちました。これは、参加者のほぼ半数が情報を見つけるために戻る必要があったことを意味します。最初のクリック結果に基づくと、ユーザーは「ウォーキングツアー」を「すること」のカテゴリか「キングストンの移動」のカテゴリに分類すべきか、また「博物館」を「キングストンについて」のカテゴリか「すること」のカテゴリに分類すべきかについて迷っていたようです。
3. 次のステップ
ウェブサイトの主な目標は、観光客にキングストン市について教育し、情報提供することです。間接的成功率は高いものの、訪問者が情報にたどり着く過程でも、サイトの目的に貢献する場合があります。情報を見つけた訪問者がそれでも関連情報を得ることができ、体験が向上します。しかし、全体的なナビゲーション体験を改善し、特定のエリアでの混乱を減らすために、グローバルナビゲーションメニューのラベルを再検討することが有益です。
↓ ツリーテストの結果に示された直接的および間接的成功率

2回目の情報アーキテクチャ(IA)スキーマの改善

ツリーテストの結果、参加者が「About-Kingston」と「Things-to-do」のラベルに混乱していることが、間接的な成功データから明らかになりました。「About-Kingston」は都市に関する一般的な情報を提供するためのものであり、「Things-to-do」は特定の観光地に関する情報を提供するものであることをより明確にしたいと考えています。

05 - 中解像度プロトタイプ

ストーリーボード作成

3つのタスクが、新しい情報アーキテクチャスキーマを使用してストーリーボードに翻訳されました。このステップでは、スキーマをページレイアウトと画面デザインに変換しました。

06 - 高忠実度プロトタイプ

ビジュアルデザインガイド & プロトタイピング

個別プロジェクトの一環として、ウェブサイトの再設計プロトタイプはハイファイに進化させ、ユーザーフロー「キングストンの美術館を探す」に焦点を当てました。デザインは、キングストン市(ON)の公式カラーに合わせて作成されたスタイルガイドに従いました。

07 - 振り返り

学んだ教訓

1. データ分析におけるターゲットオーディエンスの理解
間接的な成功は必ずしも悪い結果ではありません。重要なのは、ターゲットオーディエンスとウェブサイトの目標を理解することです。例えば、観光サイトでは、ユーザーが市内の情報を収集するために探索することが有益であれば、それが有効です。サイトが簡潔で関連性のあるコンテンツを提供する限り、探索はポジティブな影響を与えます。
2. 情報アーキテクチャとUXの学際的な性質
情報アーキテクチャとUXデザインは、ユーザーエクスペリエンスの向上に焦点を当てた密接に関連する分野です。ウェブサイトでの道案内を改善することは、物理的な空間を通じてユーザーをガイドすることに似ており、ユーザーが目的の情報に簡単にたどり着けるようにすることが重要です。ユーザーフローとナビゲーションを理解することは、シームレスで直感的な体験を作り出すために欠かせない要素です。