紹介

今回は「ホットペッパービューティー」UI改善についての事例を紹介します。

目的

クーポン・メニュー一覧画面のCVR向上。

背景

クーポンを選んでいる時点では、ポイント利用後の料金がわからない。

仮説

ポイント利用後の料金を表示することで、お得感（予約するメリット）が増し、予約意欲が向上するのではないか。予約の意思決定がしやすくなるのではないか。

オリジナルページ

ABテスト案

A案

ポイント利用後の金額表示（控え目）

あまり強調せずに、補足情報のように表示した方が、ビューティーユーザーには好感度が良いのではないか……？

ログイン済でポイントを保有しているカスタマーの画面では、カセット内のボタンがある右列以外にマウスを合わせると、料金がグレーの打ち消し線の表示に変わり、その上にポイント利用後の料金が表示される。

B案

ポイント利用後の金額表示（強調）

もともと情報量の多いカセットなので、ある程度の変化をつけないと気付かれないのではないか……？

ログイン済でポイントを保有しているカスタマーの画面では、クーポンカセット内の料金にアンダーラインがつき、カセット内のボタンがある右列以外にマウスを合わせると、背景色が変化し、料金はグレーの表示に変わり、ポイント利用後の料金が表示される。

結果

• A案　オリジナルに対し101.69%のCVR
• B案　オリジナルに対し103.30%のCVR (信頼度98%)　★WIN★

考察

• ポイント利用時の金額が把握できた方が、カスタマーは意思決定しやすい（割引表記が効いている可能性あり）
• クーポン一覧画面では、表示されているクーポン枚数も多く、1つ1つのクーポンカセット部分の情報量も多いため、Bパターン程度の変化があった方が、ポイント利用時の金額の表示に気づきやすく、効果が出た（それほど拒絶感もなかった）
• 「ポイント利用時の金額がわかったこと」が有効だったのか、「値引き表記」が有効だったのかは、次回の検証ポイントとしたい。

ホットペッパービューティーはリピートユーザーが多いため、リピーターが違和感を感じてしまう改善の場合、短期的なABテストの結果ではCVRが下がってしまうことが多々あります。
今回の施策は、リピーターが感じる違和感が少なく、お得感（メリット）を訴求できたため、効果があったと考えています。

これからもリーン開発チームから、事例共有していく予定です。