予約UI/UXアップデート
こんにちは！💐CHILLNNの藤井です。もうすっかり季節は冬ですね☃️
今日はしばらく取り組んでいた予約のUI/UX改善に関してレポートをしたいとおもいます！
CHILLNNは導入してくださっている施設様から諸々の設定を行っていただけるHOST画面は大変使いやすいと評価いただけてはいたのですが、GUEST画面に関しては予約フローが他のOTAとは異なっているが故に使いづらさを感じさせてしまっているUI/UXになってしまっているなぁと以前より心にひっかかっておりました。
今回の改善では既存の各OTAの予約UI/UXを参考にさせていただき、宿の独自の魅力をこれまで以上に引き出せるデザインと共存させ、スムーズな予約ができるよう改善いたしました。”百聞は一見に如かず”ということで早速before→afterの流れで見ていきましょう！😎
劇的ビフォーアフター
before
これまでは予約のパーツが大きすぎてスマホ版でもデスクトップ版でも一画面に収まりきらないほどのサイズでした。
これによって以下のような課題を抱えていました。
[魅力の矮小化]
CHILLNNの魅力は宿のストーリーを伝えることのできる記事。しかし、コンテンツ部分の30%ほどを予約コンポーネントに取られてしまっているため、注目すべきポイントが弱くなっているのではないか。
[UXの不透明]
予約コンポーネントが、大きくなりすぎていてひとつの画面に収まり切らなくなっているため、操作視認性が低いのではないか。
また、C/in・out日がわかりにくいという意見もいただいていました。確かに、予約のパーツだけ切り出してみると
こんなに大きかったんですね。笑そこで今回の改善の目指すべき方向性として”CHILLNNの魅力(記事部分)を最大限引き出す→予約パーツをコンパクトにする(1画面に収まるレベル)”という方向性で挑んでいくことにしました。
前半戦
デザインする上でまずやることは要素の洗い出し。予約するにあたってどんな要素が必要で、どのタイミングでお部屋を選ばせて、人数を入力させて、子供はいるのか確認して、、、etc
要素を洗い出したら今度はそれらの要素に階層を与えて、画面の遷移方向を考えてざっくりとUXを考えると。(これらはオブジェクト指向UIに基づいて設計しているのですがこれはまたの機会にお話ししたい！)
ここまではすでに形あるものの整理だったのでわりかし順調にいってました。そんなこんなで作りあげた最初の第一版予約パーツはこんな感じです
割とすぐ改善できたわ！なんて思ってました(これが後の自分を苦しめることになるのはまだ知らない笑)
後半戦
実際に既存のCHILLNNに当てはめてみようということで実際にコーディングしてスマホで使えるようにしてみました。
(これはプチ自慢なのですがCHILLNNの構成はとても綺麗で変更も容易なのでコーディングしてから判断してみよっかなんて選択肢もそこまで負担じゃないのです)
しかし、これがいまいちうまくはまらない。🙍♂️
予約パーツに注力しすぎてしまったあまり、CHILLNNの世界観と今回の予約パーツに乖離が生まれてしまい全体としてのGoサインは出せないような改善になってしまっていました。原因としては、今回の目標としてCHILLNNの魅力を最大限引き出すことがあったのですが、完全に僕のミスで予約パーツを小さくすることに注力しすぎていました。🙇♂️
そこでもう１度、全てのOTAの予約パーツをくまなく研究し、CHILLNNとして採用すべき予約パーツはどんなものなのか再考しました。
この辺のデザインのことはまたいつかnoteで書けるといいのですが今回の宿泊予約に関するデザインをする上では以下のようなことに気をつけました
・予約フローに対して、人はメンタルマップを獲得しているのでタスク指向的UIも一部は許容される
・同意なき遷移をなくす
ということで再びゲストの自由を担保しつつも予約が容易に取れるフローをこちらで定義し、UX設計に落としこみ。前回の反省も生かして大局的な視点も維持しつつの改善。
そして最後はひたすらユーザー検証。ゲストの同意が得られている設計になっているのか、指が止まってしまう箇所はどこかに気をつけながら動きをつけたり、そしてまた改善、改善。
11/10、完成。
予約コンポーネントを改善しました
まずは完成版を
↑スマホ版 ↓PC版
今回の改善でこれまで以上に魅力的で快適なCHILLNNに生まれ変わったのでぜひ触ってみてください。
最後に
CHILLNNをより良いサービスにするため、お客様からの声いただけるととても嬉しいです。また、エンジニア・デザイナーも積極的に募集しておりますので弊社CTO永田、または僕にお気軽にDMでもいただければ幸いです。それではまた！👋
一目惚れする旅を。
この記事が気に入ったらサポートをしてみませんか？