Webアプリ · リデザイン

KAI Wisata — ユーザーフロー改善

Webアプリ・モバイル · UX改善 · リデザイン

PT KAIの観光予約プラットフォーム「KAI Wisata」のユーザーフローを改善。鉄道チケット・ホテル予約・決済フローのエンドツーエンド体験をウェブとモバイル両方で向上させました。

目的

→鉄道チケットとホテル予約の予約フローを簡素化
→決済・チェックアウト体験を改善
→ウェブとモバイルで一貫したUIを構築

役割

→ユーザーフロー分析とリデザイン
→ウェブ・モバイルUIデザイン
→予約・チケット・決済画面のデザイン
→エンジニアリングチームへのDesign Handoff

挑戦

⚡ユーザー離脱を引き起こす複雑な多段階予約フロー
⚡ウェブとモバイル間のUIパターンの不一致
⚡迅速なデザイン判断が求められるタイトなスケジュール

デザインプロセス

フロー分析・調査

2020年初頭

既存の予約フローを監査し、ユーザージャーニーにおける摩擦ポイントと離脱段階を特定しました。

·既存フロー監査とヒューリスティック評価
·旅行予約アプリの競合分析
·主要な摩擦ポイントの特定

UIデザイン（ウェブ・モバイル）

2020年

リスト・詳細・ログイン・チケット・ホテル・決済画面を含む予約体験全体をウェブとモバイル両方でデザインしました。

·鉄道チケット一覧・詳細画面
·ホテル一覧・詳細・予約フロー
·ログイン・認証画面
·決済・チェックアウトフロー
·ホテルチケット確認画面
·モバイルコンパニオン画面

フロー — 鉄道チケット予約

チケット予約フローのステップと認知負荷を削減しました。

例：鉄道チケット予約

✅ Positive Flow （正常系）

1列車を検索 → 結果一覧
2チケット選択 → 詳細確認
3予約確認 → 決済へ進む
4決済成功 → チケット確認

❌ Negative Flow （異常系）

✕空席なし → 代替日程を提案
✕決済失敗 → 明確なエラーメッセージで再試行
✕セッション切れ → コンテキストを保持してログインへ

学び・得られた知見

多段階フローの簡素化が離脱を減少させる

複雑な予約ステップを明確でフォーカスされた画面に分割することで、完了率が大幅に向上しました。

プラットフォーム間の一貫性が信頼を構築する

ウェブとモバイルのビジュアル言語を統一することで、ユーザーが両プラットフォームを自信を持って利用できるようになりました。

成果・インパクト

🎫

↑↑

予約完了率

予約フローの改善

多段階フローの簡素化により摩擦が減少し、予約完了率が向上。

📱

100%

レスポンシブ対応

ウェブ・モバイル一貫性

ウェブとモバイル全体の統一デザインシステムにより一貫した体験を実現。

デザインギャラリー

Train Ticket — Overview

Train Ticket — Selection

Train Ticket — Detail

Ticket List

Ticket Confirmation

Ticket Detail

Hotel List

Hotel Detail

Payment Screen

Hotel Ticket — Page 1

Hotel Ticket — Page 2

Mobile — Screen 1

Mobile — Screen 2

さらに多くの作品はこちら

Dribbble ↗