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