博物館や美術館の訪問時に、誰でも使いやすいアプリがあったら便利だと思ったことはありませんか？
ArtStoryは、すべての人にとっての博物館・ギャラリー体験の向上にフォーカスしたアプリです。
チケット予約機能だけでなく、障害に対応した博物館・ギャラリーを知る手段としても活用できます。このプロジェクトは、CourseraのGoogle UX Design Professional Certificateのポートフォリオ課題の一部です。
※写真はすべてUnsplashの各写真家に帰属します。博物館名や写真は正確なものではなく、ダミー目的で使用しています。
課 題
-
博物館の情報不足により、訪問を十分に楽しめない人がいる。
-
障害を持つ人が、特に美術史や展示情報を学びながら博物館を楽しめる方法が必要である。
使用ツール
-
Figma
-
Adobe Illustrator
-
Microsoft Powerpoint
-
Microsoft Word
チーム
-
UXデザイナー1名
解決策
-
博物館や美術館内のナビゲーションをサポートするモバイルアプリを作成。
-
視覚・聴覚に障害のある方のニーズに対応し、訪問体験をより充実させる。
将来的には、他の特定の障害にも対応できる機能を追加することも想定しています。
私の役割
-
UXジェネラリスト（ユーザーリサーチ、課題と解決策の定義、ワイヤーフレームおよびプロトタイプの作成）
タイムライン
-
全体期間：1か月以上
-
ディスカバリー＆リサーチ：1週間
-
デザイン＆テスト：3週間
デザインプロセス
1
ディスカバー（調査）
2
3
4
課題定義
アイデア創出
デザイン
-
博物館・美術館を訪れる人が通常何を求めているかを把握するため、スクリーナー調査を実施しました。
-
調査結果からインサイトを抽出し、エンパシーマップを作成してユーザーのペインポイントを理解しました。また、調査結果をもとにペルソナを作成し、問題文（ProblemStatement）を問題解決の基礎として使用しました。
-
問題に対する解決策を検討するため、ストーリーボードやハッピーポイントを作成し、アイデア出しを行いました。さらに、Crazy Eightを実施して複数の解決案を考案しました。
-
問題解決の方針を決定した後、ユーザーフローとワイヤーフレームを作成しました。また、ユーザーがアプリをどのように使うかを理解するため、ユーザビリティテストも実施しました。その後、モックアップおよび高忠実度プロトタイプの作成に進みました。
課題の定義
マーティンは元軍人の高齢者で、他人のサポートなしで博物館を楽しみたいと考えています。そのため、博物館訪問時により使いやすい支援ソリューションが必要です。
ペルソナ
私は、ユーザーの目標・ニーズ・体験・行動をより深く理解することを目的としました。
そのため、ユーザーセグメントごとにペルソナを作成しています。ペルソナは初期ユーザーインタビューを基に作成しており、背景情報、引用、目標、フラストレーション、年齢、学歴、出身地、家族構成、職業などの詳細を明確に記載しています。
リサーチ手法
本プロジェクトで用いたリサーチ手法は、定性的リサーチ（インタビュー）、競合分析であり、ユーザビリティテストは**アンモデレート（低忠実度プロトタイプ）とモデレート（高忠実度プロトタイプ）**の両方を実施しました。
ユーザージャーニー
ユーザーに優しい博物館アプリを作るというビジョンに基づき、マーティンのユーザージャーニーを可視化しました。
その結果、アプリがどのように彼らの博物館訪問体験をより快適で充実したものにできるかが明らかになりました。
ペインポイント
インタビュー結果をもとに、アプリが解決すべき課題の基礎となるペインポイントを抽出しました。
言語の壁やアクセントにより、博物館の提供する体験を十分に楽しむことが難しい。
展示説明のテキストが小さすぎる／読みにくいため、閲覧が困難な人がいる。また、すべての展示で音声ガイド機器が貸出されているわけではない。
聴覚に障害がある人は口頭での説明を理解するのが難しく、音声の速度やピッチを調整できる機能を望んでいる。
エンゲージメントやインクルーシブ性の不足により、博物館や美術館への訪問意欲が低下する。
Initial Sketches
ランディングページのデザイン案 ArtStoryアプリのランディングページについて、5つのデザイン案を作成しました。ランディング
ページの主なコンセプトは、チケット予約、博物館情報（ニュース／ブログ）への直感的アクセス、充実したナビゲーションバーをシンプルかつ分かりやすく提供することです。
最終的に採用されたデザインは、1行目の中央の案です。
ワイヤーフレーム
Figmaを使用して、最初のスケッチを低忠実度ワイヤーフレームに落とし込みました。
この段階でワイヤーフレームは、ユーザーテストを行うのに十分な精度まで定義されています。
7名の参加者によるユーザビリティテストの結果をもとに、いくつかの改善を反映し、高忠実度プロトタイプの作成に進みました。
ユーザーフロー
ワイヤーフレーム作成後、ユーザーがアクセシビリティツールにアクセスできるよう、ユーザーフローを作成しました。
ユーザビリティテスト
アプリが主目的に沿っており、ユーザーフレンドリーであることを確認するため、低忠実度プロトタイプと高忠実度プロトタイプそれぞれに対して2回のユーザビリティテストを実施しました。テストから得られたインサイトをもとに、改善すべき課題を抽出しました。
ラウンド1の発見
-
アクセシビリティツールを意図通りに見つけられない
-
チケットメニューと博物館メニューを一目で区別できず、誤ってクリックすることが多い
-
インタラクトボタンの用途が理解されていない
ラウンド2の発見
-
購入済みチケットを見つけやすくする通知機能が必要
-
ニュースのナビゲーションを助けるサムネイルやアーカイブが必要
改善策
-
ホームページにアクセシビリティページへ直接リンクする追加ボタンを作成
-
チケットメニューと博物館メニューのコピーライティングを変更し、区別しやすく
-
インタラクトメニューに用途の説明を追加
-
プロフィールメニューに通知機能を追加し、購入済みチケットを知らせる
-
各ニュースページに追加サムネイルを作成
参加者のフィードバックをもとに2回の反復改善を行った結果、最終テスト参加者の80%が「アプリの操作がより簡単になった」と回答し、**博物館のコンテンツや情報がより充実すれば、長期的に利用したい」と評価しました。
ユーザビリティテスト前後の比較
モックアップ
ユーザビリティ上の課題が解決された後、Figmaでモックアップのデザインに取り組みました。
新規アプリでブランドガイドが存在しなかったため、アイコン、ロゴ、追加のデザイン要素を含めたブランドガイドを自分で作成しました。
参考として、競合や博物館・美術館関連のデザインを調査し、デザインが適切であることを確認しています。
ネイビーブルーと補色のベージュを使用することで、暖かさと歴史の荘厳さを表現しました。
本アプリはiOS（特にiPhoneシリーズ）向けに作成されていますが、将来的にはAndroidプラットフォームにも対応予定です。
ユーザーフローの反復改善
2回目のユーザビリティテスト後、ユーザーがより簡単にナビゲートできるように、ユーザーフローを改良しました。
アクセシビリティ配慮
01
適切なコントラストレベルの色を使用することで、視覚に困難がある人でも要素を識別しやすくしています。
02
本アプリは障害のある方でも博物館訪問を楽しめることに重点を置いており、音声ガイド、車椅子予約、カスタマイズ可能なテキストトランスクリプトなど、博物 館で使用できるアクセシビリティツールを紹介しています。
03
明確なCTA（コール・トゥ・アクション）ボタンを設置し、ユーザーフローをスムーズに進められるようにしています。また、色覚に障害がある方でも機能を判別しやすいよう、アイコンの活用にも配慮しています。
Learnings
Google UX Design Professional Certificateのコースおよび本プロジェクトを通して、アプリが問題解決を通じて他者にポジティブな影響を与えられることを学びました。
また、アプリを作る際に自分の認識やバイアスに固執せず、すべてのユーザーにとってより良いアプリを作る重要性も学びました。
アプリ制作の過程で、ページ間の接続やインタラクションを作るスキルやコツも身につけることができました。
「共感はUXデザイナーの最も強力な資産である」
この講師の言葉に触れ、UXデザイナーという職業は自分のスキルと性格に合っていると確信しました。今後もUXデザインに深く関わり、特に共感力を活かして、多くのユーザーの問題を解決できるより良いプロダクトを作りたいと考えています。