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

コーヒー診断

課題
スペシャルティコーヒーは種類が多く、初めての人ほど「どれを選べばいいか」で迷って手が止まっていた。
解決
味わいの3つの質問に答えると、その人に近い一杯が出る診断をつくった。結果からそのまま買えて、なぜその一杯かも伝わる。
コーヒー診断

コーヒーは、飲んでみないと好みが分からない。棚に並ぶ名前や産地だけでは、初めての人ほど選びきれない。

Approach

味わいの質問に答えると、その人に近い一杯が出る。結果には酸味・甘み・香りの3軸メーターで「なぜこれか」まで示す。

  • 4つの質問(酸味・甘み・香り + 飲むシーン)に答えるだけ
  • 答えを味覚のベクトルに変換し、商品の味覚データとの距離で、いちばん近い一杯を選ぶ
  • 結果画面に3軸の味覚メーターを出し、容量・挽き方を選んでそのまま買える
  • 入口はトップの常設バナー(TASTE FINDER)とナビから、いつでも始められる
コーヒー診断の結果画面 — 酸味・甘み・香りの3軸メーターと、そのまま押せるカートに追加ボタン
結果画面。3軸のメーターで“なぜこの一杯か”を示し、容量・挽き方を選んでそのままカートに追加できる。

設計判断

この診断は外部アプリではなく、お店のテーマの中につくった。

  • 外部サービスを iframe で埋め込むと、見た目は同じページでも中身は“別のサイト”扱い(別オリジン)になる
  • だから本体のカートを直接操作できず、選んだ一杯をそのまま買えない。購入の計測もセッションが分かれて、診断から売れたのかを追えなくなる
  • テーマの中に置けば、同じサイトの一部。カートはネイティブに直結(/cart/add.js)し、診断から購入までひと続きで追える
  • 以前は外部のアプリに載せていて、おすすめもランダムだった。作り直しで、味覚データとの距離で選ぶ実データのマッチングにした
外部アプリ(iframe)からテーマ内へ、の構成比較図
外部アプリ(iframe)はカートが別世界で計測も切れる。テーマの中に作り直し、ネイティブカートと購入までの計測を、体験の一部にした。

設計のかたち

4問

酸味・甘み・香り + 飲むシーン

3軸

味覚メーターで“なぜこれか”を可視化

そのまま購入

結果からネイティブカートに直結

PASS COFFEE の事例を見る

Related Articles

関連記事

W e b

相談する
相談する