【架空】宿泊施設『THE VEGE LODGE』予約ページUI/UX改善
SHElikes PROデザイナーの課題にて、宿泊施設を題材にした『THE VEGE LODGE(ザ・ベジ・ロッジ)』の予約ページのUI/UX改善を行いました。
🔹使用ツール:Figma
🔹制作時間:約16時間
🔹目次
・課題要件
・UI/UX改善案
・学んだこと
◾課題要件
🔸プロジェクト概要
🔸ペルソナ
今回のペルソナは、クライアント側から提示されたものです。
【ペルソナ1】

【ペルソナ2】

◾UI/UX改善案
🔸予約導線

【課題】
改善前の導線では、選択した宿泊日が空いてない場合、エラー画面へ遷移してお部屋選択からやり直すという手間が発生していました。
【改善案】
CTAから空室検索ができるようにし、宿泊日とお部屋の選択を何度もやり直すことなく予約が進められるようにしました。
空室検索では人数・室数のほか、宿泊日もここで入力できるようにし、その後のお部屋選択で条件に合う部屋を自動で検索してくれる設計にしました。
🔸空室検索(宿泊日選択ページ)

【課題】
・ページの離脱率が63%と高く、改善したい。
【仮説】
・空き状況が最初にわからないため、ユーザーの不安に繋がっている。
・満室時、入力し直す手間が発生してしまっている。
【目指す必須条件】
・部屋の空き状況が直感的にわかること。
・入力の手間を省き、エラー画面への遷移ややり直しを減らす。
【目指す推奨条件】
・具体的な利用日が決まっていないユーザーでも、宿泊人数や室数での検索ができること。
【改善案】

🔸お部屋選択ページ
【課題】
・ページの離脱率が42%と高く、改善したい。
【仮説】
・朝食の有無や喫煙の可否など、部屋によるサービスの違いがわかりにくい。
・並んでいる部屋情報が多く、情報を見比べることに時間がかかる。
【目指す必須条件】
・サービス内容の違いを一目で判断できるようにすること。
・条件に合った部屋をすぐ探せること。
【目指す推奨要件】
・迷いやすいユーザーでも、安心してお部屋選びができるようにすること。
【改善案】
🔸宿泊プラン選択ページ
【課題】
・ページの離脱率が38%と高く、改善したい 。
【仮説】
・プラン情報が文字のみのため、内容が想像しにくい。
・選択肢が多く、プランの確認に手間がかかっている。
【目指すべき必須条件】
・プラン内容をイメージしやすくすること。
・見たいプランを探しやすくすること。
【目指すべき推奨条件】
・家族利用のユーザーに対して、「子ども」の基準年齢がわかること。
・選びたいプランが決まっていないユーザーに対して、おすすめプランが確認できること。
【改善案】

🔸お客様情報入力ページ

【課題】
・ページの離脱率が24%と高く、改善したい 。
【仮説】
・入力ガイドないため、不安に繋がっている。
・エラー時に、入力不備の箇所がわかりにくい。
【目指すべき必須条件】
・直感的に入力方法がわかること。
・入力に不備があった場合、該当箇所がわかりやすいこと。
【目指すべき推奨条件】
・特別な配慮を必要とするユーザーでも、その旨を伝えやすいこと。
・必須項目を明確にすること。
【改善案】

🔸その他改善点
【ディナー選択ページ】
【画面上部】
◾学んだこと
・「離脱が起きる原因」や「その改善方法」についても、「なぜ不便なのか」「このデザイ ンで解決できる理由」をしっかり言語化できるようにしなければならないと感じました。 個人的に必須要件を考えるところが難しかったのですが、「なぜこの要件を満たさなけれ ばいけないのか」というところも根拠を持って考えることが必要であり、このプロセスを踏むからこそ、ユーザーにわかりやすいUIになるのだと感じました。
・既存のルールやトンマナに合わせてUI改善するというところで、思い描くデザインとのバランスを探るのが大変でした。実務でも必ずガイドラインを確認し、こまめにルールやトンマナから外れていないか確認しながら作業を進めることを心掛けていこうと思いました。
・Figmaの操作は久々で、オートレイアウトも最初は慣れなかったのですが、使えるようになると作業が効率的になるのを感じました。今回はプロトタイプの作成はできなかったのですが、今後挑戦しさらにFigmaを使いこなせるようになりたいと思います。


