Bowortie
相談する
OSAKA JP EST. 2020
© Bowortie
Case Study HOOP COFFEE

カップ単価シミュレーター

課題
毎日飲むなら大きいロットの方がお得なのに、1kgの数字が大きく見えて、初めての人には買う前のハードルになっていた。
解決
割高に見えるのは思い込みだと自分の数字で実感できるよう、1杯あたりの値段をその場で計算できるUIを、ホームと商品ページの購入導線に置いた。
カップ単価シミュレーター

HOOPには、スペシャルティコーヒーを日常的に楽しんでほしいという想いもある。豆の値段も、大きいロットほど卸価格に近づくように設定されていて、毎日飲む人ほどまとめ買いの方がお得だ。でも1kgの数字を前にすると、つい「高い」と感じてしまう。

Background

値段の説明を、言葉でしない。

実際に飲むのは1杯ずつなのに、単位のズレが割高感をつくる。品質のわりに安いと言葉を重ねるほど、かえって「安かろう悪かろう」と身構えられてしまう。

そこで説明をやめて、その場で自分で確かめられる形にした。豆を選ぶと、1杯あたりの値段がその場に出る。

HOOP COFFEE の商品一覧ページ(1kg 単位の価格表示)

Approach

豆を選ぶと、1杯単価と比較バーが即座に動く。数字を眺めるのではなく、自分の飲み方で計算し直せるインタラクションにした。

  • HOOPのレシピに沿った1杯13gを基準に、豆の1kg価格から1杯単価を自動計算。他スペシャルティの比較値と並べたバーで見せる
  • 「飲む量」は人数と杯数のスライダーで調整でき、月額・年額のコストまでその場で変わる
  • 置き場所は、ホームのベストセラー直後と、商品ページのバリアント選択直下。買うか迷う導線の上に差し込んだ
商品詳細ページの小型シミュレーター(¥78 / 1杯)
商品ページでは容量を切り替えるたびに1杯単価が変わる小型版を置いた。ホームで掴んで、商品ページでもう一度確かめられる。

設計のものさし

13g

1杯あたりの基準量(豆のまま)

2箇所

ホーム+商品ページ、導線上に配置

月・年

スライダーで長期コストまで可視化

Measurement

触ってもらう仕掛けと、効いたかを測るしくみをセットでつくる。

  • 表示 → 豆を選ぶ → CTA クリック → 商品ページ → 購入 を、ひと続きのファネルとして追える計測を最初から組み込んだ
  • Shopify 公式連携がすでに発行している Cookie を読み、カスタムのイベントを購入計測と同じ利用者に紐づけた。別で計測を足すとセッションが分かれて、ファネルが繋がらなくなる
  • シミュレーターからの遷移は中間指標にとどめ、本当のコンバージョン(購入)は水増しせずそのままにした
HOOP COFFEE の事例を見る

Related Articles

関連記事

W e b

相談する
相談する