早割ページのUI改善

Home > Work > Design > 早割ページのUI改善
早割ページのUI改善_メインビジュアル

概要

常設の割引プランと合わせて、キャンペーンを月に一度ほど走らせておりましたが、割引のない通常プランの利用者が多く、それを課題として捉えており、分析を行っておりました。
被験者テストでユーザーの行動を調査したところ、年齢層が高めの方は何も見ずに直接オーダーフォームへ遷移してしまい、そのまま申込んでしまうことが判明しました。また、値段で躊躇してしまい、申込みを諦めるてしまう方も居るだろうという推測から、常設の割引プランのUI改善を行い広告経由でアピールすることとなりました。

改善前の全体画像(PC)
改善後の全体画像(PC)
改善後の全体画像(SP)

改善の目的

アンケート・被験者テスト・売上分析で判明したこと
  • 競合他社よりも価格が高いというイメージを持たれている
  • ユーザーはキャンペーンを行っているにも関わらず、バナーは踏まずに、通常プランから申込んでいる。
  • 通常プランのお申込み比率が50%近くある
対応策
お申込み日が早いほどお得になる、早割という常設プランにて、訪れたユーザーに刺さるページへと改善しつつ、Web広告の出稿量を増やすことで流入を増やし、割引プランを利用すれば、競合他社と同等まで安くサービスを利用できることを周知するのを目的として、UI改善を行いました。

問題点と改善内容

問題点
  1. 参考となる金額が最大割引率の20%しかないので、他の割引率の場合どの程度安くなるのか分かりづらい。
  2. 出発日のサンプルが固定なため、実際に対象となる出発日の期間を把握できない。
  3. 申込ボタンよりも下に割引率があるために、関連性が遠くどの程度割引されるのか直感的に把握できない。
早割ページのUI改善_改善前の画像
改善内容
  1. 各早割プランごとに割引前と後の金額を掲載することで、お得感を強めました。
  2. 各早割プランへのリンク用ボタンや、見出しにあたる箇所にて、[〇〇日前] と [〇〇%OFF] の文言を配置することで関連性を高め、割引率の印象を強めました。
  3. アクセス日から対象となる出発日の期間を掲載することで、渡航予定日がどの早割プランに該当するのか、一目でわかるようにしました。
早割ページのUI改善_改善後の画像

改善結果

改善から4カ月ほど掛けて、広告からの流入でのお申込みが増え、通常プランの申込比率が50%台からドンドン下がり30%台後半まで低下しました。
また、全体の売上も微増しましたので、利用者数も増えているため、施策としては改善に繋げることができました。
ただし、残念ながら数週間後に50%OFFキャンペーンが開始され、その後にほぼ常設となったため、こちらのプランの利用者は一気に低下してしまいました。

制作について

工夫したところ
出発日の期間の算出はJavaScriptのnew Date()を利用してシンプルに実装しました。
処理としては単純ではありますが、一目で期間がわかるのは、利用者視点では効果が大きかったのではないかと感じています。
開発環境
フロントエンド
言語： HTML5, CSS3, JavaScript
ライブラリ： jQuery 3系
バックエンド
言語： PHP
実行環境： XAMPP
インフラ
オンプレミス Linux サーバー（Apache）
バージョン管理
Sourcetree
エディタ
Dreamweaver
デザインツール
Photoshop CC, Illustrator CC
制作期間
2019年7月 (2週間)