スーパーマーケットのアプリデザイン

サイトマップ／ワイヤーフレーム（紙・デジタル）／低忠実度プロトタイプ／ユーザビリティ調査

―――――――――

○ サイトマップ

アプリで提供する機能は複数存在するため、分かりやすくユーザーに届けることに注力して情報アーキテクスチャを設計しました。

―――――――――

○ワイヤーフレーム

次に、IAを意識しながらアプリ画面のワイヤーフレームを紙にスケッチしました。
複数のアイデアをスケッチし、良いアイデアを組み合わせることで洗練させていきました。

紙のワイヤーフレームを作成後、デジタルのワイヤーフレームに移行しました。
アイデアをデジタルで制作しなおすことで、より詳細な調整を行うことができました。  

―――――――――

○低忠実度プロトタイプ

ワイヤーフレームを利用して、プロトタイプの制作を行いました。
クーポンの使用とクリップ機能、商品の検索と買い物メモへの追加について、画面を接続しています。
買い物メモの表示非表示など、インタラクティブな動きも実装しました。

低忠実度プロトタイプをプレビュー

―――――――――

○ユーザビリティ調査

プロトタイプを用いてユーザビリティ調査を行いました。
30分～1時間程度、リモートでの実施です。
リサーチ結果のひとつとして、クーポンへの導線がやや分かりづらいこと、クリップ機能は使わないこと、クーポン使用画面と会員証の提示が同じ画面で済むのは助かることなどが挙げられました。