16

大手旅行代理店の旅行プラン予約サイトのUX/UI改善

某大手旅行代理店

大手旅行代理店の旅行プラン予約サイトのUX/UI改善

度重なる改修によるデザインの不統一と、情報量過多により操作性・一覧性が低下してしまっているWebサイトの改修を行いました。定性・定量のデータを元に課題抽出と代表的なユーザのペルソナを定義し、ジャーニーマップを描き、課題の要因分析をしたうえで改善施策をワークショップにより検討し、ファンクションリストをUIデザインに落とし込みフロントエンドの実装まで行いました。

SOLUTIONS
FLOW

  1. Step
    01

    UXデザインフェーズ

    クライアントからユーザアンケートとGoogleAnalyticsのデータを共有いただき、課題の抽出を行いました。 課題抽出と並行してサービスの理解を進め、定義したペルソナごとに体験シナリオに落とし込みました。特に課題となっていた情報量の課題については、情報をユーザの求める情報とコンプライアンス上表示が求められる情報に分類し、各情報に優先順位を設定することで表示する情報の整理を行いました。

    Output

    • ペルソナ
    • 体験シナリオ
    • 課題リスト
    • 表示する情報の優先順位リスト
    • 機能リスト
  2. Step
    02

    UIデザインフェーズ

    ワイヤーフレームの設計では、UXデザインフェーズで定義した各情報の優先順位を基準に各情報の表示方法を検討し、優先度の低い情報はアイコンやアコーディオンなどのUIコンポーネントを利用して一覧性を担保しました。 スマホによる利用が8割を超えているというデータから、スマホでの利用でも多くの情報へ容易にアクセスできるような設計を行い、PCと遜色ない情報量を用意に取得することを可能にしました。 グランドデザインでは、企業のイメージカラーをベースに、優先度の高い情報や次のアクションに繋がる箇所を強調することで視認性を担保しつつ、全体的にシンプルかつ安心感の持てるデザインを行い、クライアントの企業イメージを表現し提案させていただきました。

    Output

    • ワイヤーフレーム
    • GUI
  3. Step
    03

    フロントエンド実装フェーズ

    デザインと並行してフロントエンド実装を進めていくために、各画面のデザインの完了と開発者のスケジュール管理とアウトプットに対するフィードバックを徹底し、全画面のデザイン完了から短期間での納品を実現しました。

    Output

    • ソースコード(フロントエンドのみ)