Relux施設詳細画面のリニューアル
iPhone7でSuicaが使えるのが想像以上に快適
今まで気づかなかったのですがSuicaの支払いに対応しているお店って結構あるんですね！
財布を忘れてもiPhoneがあればなんとかなりそうです。
www.jreast.co.jp
Reluxアプリの施設詳細画面（旅館やホテルの情報を表示するページ）のリニューアルをおこないました。今回はリニューアル時に気をつけた点などを中心に紹介したいと思います。
施設詳細画面のリニューアル
タブ表示から1画面へ
以前は「施設紹介」「プラン」「アクセス」「レビュー」の4画面のタブで構成されていましたが、リニューアルで1つの画面に統合しています。
また、部屋タイプの一覧は画面遷移せずにみられるように改善しました。
片手で操作できるように工夫
画面を下にひっぱると写真が画面中央に表示され、片手でも無理なく操作できるようになっています。
画面左上の戻るボタンは×ボタンに変わり全画面表示が解除されるようにしています。もちろん上にスワイプしても解除されます。
項目のアイコン化
施設の情報はアイコンで見やすく整理
文字を少なくすることで情報が詰まりすぎないように工夫しています。
写真・地図のパララックス
施設写真と地図にはパララックスを取り入れ、奥行きと立体感を表現しています。
画面の構造がおかしくならないように注意しながら取り入れました。
どこからでも部屋タイプ一覧にジャンプ
1つの長い画面になっているのでどこからでも部屋タイプ一覧にジャンプできるよう
画面下部にボタンを設置しています。このボタンは部屋タイプ一覧が画面上に表示されると非表示になります。
リニューアルの効果
- 予約完了までの画面がひとつ減ることによりCVRが数%改善
- アプリに関する良いレビューが増加
- Reluxコンシェルジュへの旅行の相談が増加
数値の改善だけでなく社内外から「使いやすくなった」と評価してもらえました。
最後に
今回のリニューアルではアプリエンジニアもSketchを使用したり、
プロトタイプを作成するなど様々なチャレンジをしました。
何度も つくって、触って、壊して を繰り返し
試行錯誤しながら気持ち良い動きになるかを確かめました。
良かったらダウンロードして触ってみてください！
リニューアルプロジェクトのインタビューも
Wantedlyで紹介されているので興味あったらこちらも読んでみてください！
