Bowortie
相談する
OSAKA JPEST. 2020
© Bowortie
Case StudyPASS COFFEE

コーヒー診断(旧版)

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

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

Approach

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

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

Design

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

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

設計のかたち

4問

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

3軸

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

そのまま購入

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

PASS COFFEE の事例を見る→

Related Articles

関連記事

Webやデジタルまわりの課題整理から制作・運用まで対応しています。お見積もりもお気軽にご相談ください

相談する
相談する