モバイルアプリ · プロダクトデザイン
旅行予約アプリの構築
モバイルアプリ · プロダクトデザイン · プロトタイプ
オンボーディング・検索・予約フロー・決済・予約管理を含む旅行予約モバイルアプリをゼロから設計。モバイルユーザー向けの直感的なエンドツーエンドの旅行体験の構築に注力しました。
01 / 概要
目的・役割・挑戦
目的
- →シームレスなモバイル旅行予約体験の設計
- →検索から予約後管理までのフルユーザージャーニーをカバー
- →ステークホルダー検証用のクリッカブルプロトタイプ構築
役割
- →エンドツーエンドのモバイルUIデザイン
- →ユーザーフローと画面遷移設計
- →インタラクティブプロトタイプ作成
- →Design Handoffドキュメント
挑戦
- →小画面の制約に合わせた複雑な多段階予約フローの設計
- →モバイルでの情報密度とナビゲーションのしやすさのバランス
- →多くの画面タイプにわたる一貫したビジュアル言語の構築
02 / プロセス
デザインプロセス
01
UIデザイン・プロトタイプ
2020年オンボーディング・検索・予約・決済・アカウント管理を含む主要ユーザーフローすべてをカバーするモバイルアプリUIを設計しました。
- ·オンボーディング・認証画面
- ·検索・フィルタフロー
- ·予約・リザベーション画面
- ·決済・チェックアウトフロー
- ·予約後管理
- ·アカウント・プロフィール画面
- ·ユーザーテスト用クリッカブルプロトタイプ
03 / フロー
フロー — 検索から予約まで
目的地検索から予約確認までの効率的なフローを設計しました。
例：旅行予約の流れ
正常系（Positive Flow）
- 01アプリ起動 → オンボーディング / ログイン
- 02目的地を検索 → 結果を閲覧
- 03選択 → 詳細を確認
- 04予約確認 → 決済
- 05決済成功 → 予約確認
異常系（Negative Flow）
- ✕結果なし → 代替案またはフィルター調整を提案
- ✕決済失敗 → 明確なエラーメッセージで再試行
- ✕予約期限切れ → 入力内容を保持して再スタート
04 / 学び
得られた知見
01
モバイルの制約がより良いデザイン判断を促す
小画面向けの設計は明確さを強制します。すべての要素が存在理由を持ち、よりクリーンでフォーカスされた体験が生まれます。
02
早期プロトタイプでフローの前提を検証する
クリッカブルプロトタイプを構築することで、静的デザインでは発見できないフローの問題が明らかになり、後工程の手戻りを大幅に削減できました。
05 / 成果
成果・インパクト
画面数
27+
完全な画面カバレッジ
アプリの主要ユーザーフローすべてをカバーする27以上の画面を設計。
プロトタイプ完成
100%
クリッカブルプロトタイプ
ステークホルダーレビューとユーザーテスト用のフルインタラクティブプロトタイプを納品。
06 / ギャラリー
ビジュアルギャラリー
Onboarding — Screen 1
Onboarding — Screen 2
Onboarding — Screen 3
Search — Screen 1
Search — Screen 2
Search — Screen 3
Booking — Screen 1
Booking — Screen 2
Booking — Screen 3
Booking — Screen 4
Booking — Screen 5
Payment — Screen 1
Payment — Screen 2
Payment — Screen 3
Payment — Screen 4
Account — Screen 1
Account — Screen 2
Account — Screen 3
Account — Screen 4
Account — Screen 5
Account — Screen 6
Account — Screen 7
Account — Screen 8
Account — Screen 9
Account — Screen 10
Account — Screen 11
Account — Screen 12
ツール
FigmaPrototype
← すべての作品を見る
さらに多くの作品はこちら
Dribbble ↗