【担当範囲】課題抽出、UI/UX改善、提案資料作成
【使用ツール】Figma
【制作時間】25時間 約2週間
| 制作物
| 課題要件
◆ クライアント
THE VEGE LODGE（ザ・ベジ・ロッジ）
長野県の郊外に位置する宿泊施設
"野菜がたのしい"のテーマに、自家菜園での収穫体験や、野菜をふんだんに使用したコースディナーを提供しており、自然と食を楽しむことができる点が特徴
日常から少し離れた環境で、訪れた人が「普段の生活では味わえない食と暮らし」を体験できるよう工夫されています
◆ メインターゲット
- 20代後半〜40代前半の都市部在住者
- 自然の中でリフレッシュしたい女性
- 子どもと自然体験を楽しみたいファミリー層
◆ 本プロジェクトの目的
【 予約完了率の改善 】
- Webサイトへの訪問は比較的多いが、予約完了率が低いという課題がある
- 離脱ページもデータが取れているため、ひとつひとつの導線の改善を行うことで、離脱を減らし、予約完了率の改善を目指したい
【 離脱ページ 】
- お部屋選択ページ：離脱率42％
- 宿泊日選択ページ：離脱率63％
- 宿泊プラン選択ページ：離脱率38％
- お客様情報入力フォーム：離脱率24％
| ペルソナ
以下、THE VEGE LODGE様が想定しているペルソナとなります
◆ 想定ペルソナ No.1
【 基本情報 】
- 高橋 すみれ （28）
- 東京都狛江市在住
- 出版社の編集者（6年目）
【 背景や行動 】
- 忙しい日々に癒しを求め、自然の中でリセットしたいと思っている
- 部屋が空いている日程で有給を取る予定である
- InstagramやPinterestで「自然に癒される宿」などをよく検索
- THE VEGE LODGEは前から気になっていて、写真を見て即「ここに行こう」と決めた
【 ニーズ 】
- 都会の喧騒から離れて、ひとりで静かに過ごしたい（禁煙・1人部屋）
- 自然に囲まれた空間で、綺麗な写真をたくさん撮りたい
- 野菜たっぷりのフルコースディナーで心身を満たしたい
◆ 想定ペルソナ No.2
【 基本情報 】
- 大野 翔太（38）
- 神奈川県横浜市在住
- IT系企業のマネージャー職（12年目）
- 妻（36）と小学生の子供2人（7歳・9歳）の4人家族
【 背景や行動 】
- 年1〜2回の家族旅行が楽しみ
- 今回の旅行はすでに日付が決まっている
- 今回は「自然体験ができる」「食事が安心・充実」「子どもが退屈しない」宿を探している
- 3つの候補宿を比較検討し、価格・施設内容・レビューを冷静に見比べている段階
- 妻が軽度の食物アレルギー（ナッツ系）を持っているため、食事対応に配慮があるかも重視
- 条件下で最安値の自然体験を親子で楽しみたいと思っている
【 ニーズ 】
- 家族全員が快適に過ごせる環境が欲しい（禁煙・4人部屋）
- ナッツ系の原材料表記があるかどうかを確認し、安心してバイキングを楽しみたい
- 子どもたちに自然体験をさせながら、親もリラックスできる旅にしたい
| 現行予約ページの課題と改善提案
◆ 予約導線について
【 現行 】
- 現行の導線ではお部屋選択→宿泊日選択の順になっています
- 部屋の空き状況は日程によって異なるため、部屋→日程の選択順だと、選びたい日程が埋まっている場合にその場で離脱してしまうのではと考えました（ペルソナNo.2などのケース）
【 改善案 】
- 宿泊者の条件（人数や宿泊日 / 滞在日数）を入力しながら、リアルタイムで選択可能な日程がわかると、条件変更なども含めてユーザー側が選択できるようになると考えました
- 「予約ができません」と一方的に伝えられるUIではなく、予約可能な条件が伝わった方が、コミュニケーションとして心地よく、他の選択肢も検討いただけると考えました
◆ 宿泊日選択ページ改善案
【 課題 】
- ページ離脱率が63％（他ページと比較しても高い離脱率）
【 仮説 】
- 日付を選択するまでお部屋の空き状況がわからないため、宿泊計画が立てづらい
- 希望の日程に空きがあるのかわかるまでに、追加で2ステップ要するため、フローの煩わしさが離脱につながっている（お部屋選択→日付入力 まで行って、ようやく空き状況がわかるフローになっている）
【 目指す必須要件 】
- お部屋ごとに定員が決まっているため、入力した人数や宿泊日数の条件に応じて、お部屋の空き状況が可視化される（1名予約なら全部屋に対して空室数が反映されるが、3名以上の予約ならば1名定員・2名定員のお部屋が空いていてもいなくてもカウントせず、ファミリーベジスイートの空き状況のみが表示されるイメージ）
- 入力工数削減のため、男女は分けず「大人」と一括りにする（ダイバーシティの視点も含む）（①）
- 選択できる部屋とできない部屋を色分けし、直感的に区別できるようにする
- 予約できない日程を選択した場合には、カレンダー上に斜線が入る仕様にする（②）
- 空室状況が2部屋以下の場合には数字で空室を表記する（残りわずかなら早めに予約しなければ！というユーザー心理も考慮）（③）
- 宿泊者の基本条件の入力が完了するまでは「お部屋選択へ進む」ボタンはグレーアウトされており、入力完了後にアクティベートされるようにする（ボタンの色が変わることで視線がボタンへ移り、次の行動へ移りやすいと考えました）（④）
【 目指す推奨条件 】
- 月を跨いでの予約も大歓迎なので、5月ページだとしても前月末や翌月末の日程も同時に選択できるようにしておく
【 UI/UX改善提案 】
◆ お客様選択ページ改善案
【 課題 】
- ページの離脱率が42％と高いため、改善したい
【 仮説 】
- 禁煙/喫煙や朝食の有無といった情報が、お部屋の種類との組み合わせの数だけ並んでいるので、希望する部屋の定員やオプション情報オプション部分を選ぶ際に、求めているものがどれなのか判別しづらい
- ビジュアル訴求が強みである反面、写真が小さいので施設の魅力が伝わりきらない
- アレルギーの関する情報がほしいペルソナNo.2のような方は、「朝食付き」というワードだけでなく、内容の部分が気になるのではないか
- 現段階での入力情報で、費用がどれくらいかかるのか、ざっくりわかるとその他の体験やディナーを予算に応じて組み替える余地ができそう
【 目指す必須条件 】
- ビジュアル訴求を意識し、写真を大きめに配置する（①）
- 1つのお部屋カードで1部屋の情報になるように、表示カードの簡素化を目指す（②）
- 禁煙/喫煙 や 朝食の有無については、ラジオボタンで選択できると、1部屋に対しての情報が1つのカードにまとめられそう（③）
- ラジオボタンを2カ所選択してから次のステップに進んで欲しいので、デフォルトではお部屋を「選択する」ボタンをグレーにしておき、ラジオボタンが選択されたらお部屋を「選択する」ボタンがアクティベートされるようにする（④）
- 現在の選択状況を表示し、ミニマムの料金が表示されるようにする（体験やディナーの選択によって費用が変わってくるため、「○○,○○○円〜」のように、やや曖昧さは残す）（⑤）
【 目指す推奨条件 】
- 宿泊者求める条件のお部屋を選択しやすいように、部屋の定員を明記する（⑥）
- 改善前はお部屋の表示順が ソロ→ペア→ファミリー の順になっていたが、表示順を固定せず、事前に入力済みの宿泊人数に応じて、お部屋カードの表示優先度が変わるようにする
- お部屋選択カードから、お部屋の詳細を開けるように詳細確認ボタンを配置する（⑦）
- 詳細ページはアコーディオンを活用し、宿泊者が知りたい情報を能動的に取得できるようにする（⑧）
- アコーディオンにしておくことで、ラジオボタンやお部屋を選択するボタンまでのスクロールを減らすことができ、情報過多になることなく次のステップに進むことができる
- お部屋詳細ページ内の情報を 基本情報 / アメニティ / 注意事項 の3種類に整理し、基本情報以外の内容はアコーディオンを活用することで、少ないスクロールでお部屋の雰囲気が伝わる写真が目に入るようになり、宿泊イメージを持ってもらいやすくなる（⑨）
【 UI/UX改善提案 】
◆ 宿泊プラン選択ページ改善案
【 課題 】
- ページの離脱率が38％と高く、改善したい
【 仮説 】
- 自然豊かな写真を見てサイトを訪問してくださる方が多い反面、プラン選択画面には写真が1枚もないので、プランの詳細がイメージしづらい
- プランごとのターゲット層がわかりづらい
- プランが多いため、目指すステイに対してどのプランを選択すればいいのかわからない
【 目指す必須条件 】
- プラン紹介カードに写真を追加する（①）
- どんな過ごし方をしたいかによって、プランを選択しやすいように絞り込み機能を追加する（②）
【 目指す推奨条件 】
- プランの詳細が確認できるようにアコーディオン式のボタンをつける（③）
- 「選択する」ボタンが白背景で印象が薄いので、アクティベートされたボタンとしてここまででも使用してきた緑色のボタンに変更する（④）
【 UI/UX改善提案 】
◆ お客様情報入力ページ
【 課題 】
- ページの離脱率が24％と高く、改善したい
【 仮説 】
- 入力必須項目がどれかわからない
- エラー時に、どの項目でエラーが起こっているのかわからない
【 目指す必須要件 】
- 必ず入力してほしい項目が明確になるように✳︎を項目の横に書いておく（①）
- サンプルテキストを薄いグレーであらかじめ入れておくことで、入力内容を想像しやすくなる
- 入力工数削減のため、チャックイン時間はプルダウン選択式にする（フリー記載にしておくと、チェックイン可能時間の情報をさかのぼる必要が出てきたり、そもそも文字を打つこと自体を面倒に思う方もいると思いました）（②）
- 宿泊人数や宿泊日程は最初のステップで入力いただいているので、「現在のご選択状況」の表示に誤りがないか確認していただき、お客様情報入力ページでは自動反映されるようにしておく（③）
【 目指す推奨条件 】
- エラー画面では、エラーが起こっているテキストボックスが明確になるようにする（④）
- エラー時に、宿泊者にどのように修正してほしいのかをわかるようにする（④）
【 UI/UX改善提案 】
◆ その他の工夫したところ
- ステップインジゲーターの配置
どの宿泊予約においても、選ぶ・入力するといった宿泊者側のステップがありますが、予約完了までにあとどれくらいのステップがあるのかわからないまま作業を進めると面倒になってしまう方もいらっしゃると考えたので、画面上部にステップインジゲーターを配置し、予約完了までの全ステップ数と現段階での進捗状況が可視化されるようにしました
- 現在のご選択状況の表示
宿泊予定日の候補日がいくつかある方や、同行者の人数が変わる可能性のある方の場合、どのパターンで予約を進めているかわからなくなる場合もあると考え、ステップインジゲーター上で次のステップに進むたびに、ここまでの選択内容が表示されるようにしました
また、今選択している内容で費用がいくらになるのかある程度わかっていた方が、費用を理由に離脱される方が減ると考え、選択内容に応じて費用を自動計算で表示されるようにしました
- 共通情報としてトップページにお風呂の情報を入れた
大浴場の情報はお部屋詳細ページに写真が配置されているのみだったのですが、どのお部屋やプランをご選択いただいても、宿泊者の方全員に楽しんでいただけるコンテンツであるため、トップページに浴室の情報を差し込みました
- トップページのプラン紹介セクションに写真を配置
ビジュアル訴求によりターゲットに興味を持ってもらうというきっかけがこれまでにわかっているとのことでしたので、トップページにも写真をたくさん配置した方がよいと考えました
- ディナー選択も写真を大きく配置
トップページのプラン選択と同様、ビジュアル訴求を意識してプランに応じたディナーの雰囲気を感じていただける写真を、プランカード内に大きく配置しました
| 課題を通して学んだこと
- 何気なく使っている予約アプリでしたが、ユーザーひとりひとりが直感的な操作で扱いやすいことを考え抜かれているということがわかりました
- ペルソナがどのタイミングでどの情報を欲しいのかをイメージしながら改善案を考えていくことで、ユーザー視点に立ってクリエイティブを捉え直すことの重要性を改めて感じました
- 今回の改善案は離脱率改善につながるものもあれば、直結しないものもあると思うので、継続したモニタリングと更なる改善を常に続けていくお仕事であるとわかりました
| 課題に対していただいたFB
- ヒアリング内容を踏まえて、要因の分析・解決策の提示・アウトプット提案まで、論理的に考えられている
- サービスや予約システムの特性も取り入れた提案になっており、クライアントにあったオリジナリティのある提案になっている
課題の抽出・解決策の提示という点は、前職の理学療法士経験で何度も繰り返し行ってきた思考過程と通ずるものがあると思うので、自分自身の強みとして活かしていきたいと思います。