UI/UX Study：Chompy
■ はじめに
こんにちは！ReproGrowthMarketingチームの稲田です！
今回は今話題の新進気鋭のフードデリバリーサービス「Chompy」を題材に実際に使ってみてのUI/UX観点で感じた点をまとめていきます
※注意事項
最初に断っておくと本記事は否定批判のためのものではなく、あくまでも僕の主観と経験に基づいて感じた点に関して論じるためのものです
僕自身のインプット・アウトプットのためのnoteである点にご留意ください
今回はChompyさん公式からnote化の許可いただいてます
ありがとうございます！
アプリ概要
まずは簡単に「Chompy」自体の説明から！
Chompyは2020年2月にリリースされたばかりのフードデリバリーサービスで、群雄割拠のフードデリバリー業界の中でも着実にファンを増やしているサービスです。
特徴としては、大手チェーンではなく地元のお店がメインである故に、調理者の顔が見える、お客さんとお店の方の間の繋がりを意識したサービスである点が挙げられます。
現在は渋谷を中心としたエリア限定でのサービス展開ですが、順次拡大予定とのことです。
僕も個人的に複数回利用させてもらったのですが、地元の良いお店を発見できたので気に入っています！
今回のスコープと調査観点
Chompyにおけるユーザーステップは以下のようになります
■ Chompyユーザーステップ
①：初回起動
②：デリバリー画面(店舗一覧)
③：店舗詳細〜注文
④：受け取り待ち
⑤：受け取り完了
⑥：食事完了
今回は主に ①：初回起動〜④：受け取り待ち までをスコープとして詳しくみていきます。
また、調査の観点としては以下の2点に関して言及します。
サービス根幹の改善アイデアなどに関しては言及しない点ご留意下さい。
■ 調査観点
①：デザインアイデア
インターフェースの観点でのアイデア
②：コミュニケーションアイデア
アプリ内メッセージやプッシュ通知を用いたグロースアイデア
また文章中の凡例は以下を参照してください。
■ 文章中凡例
📝：客観的な事実
🤩：素敵な設計だと感じた点
🤔：不安・疑問に感じた点
💡：アイデア
①：初回起動
まずは初回起動画面から。
このフェーズでは新規ユーザーに関しては電話番号認証のプロセスがありますが、今回はプッシュ通知許諾ダイアログと位置情報許諾ダイアログの2つに注目して見ていきます。
■ プッシュ通知許諾ダイアログ
📝：アプリ起動をしてスプラッシュ画面表示後プッシュ通知許諾を求めるダイアログがポップアップ
🤔：プッシュ通知許諾をオンにするメリットが不明確
💡：Chompyの場合はデリバリー開始から到着までの大事なステップでプッシュ通知を送ってくれるのがユーザーにとって便利なので、そのメリットを事前に訴求する
💡プッシュ通知許諾改善アイデア
①：Appleのネイティブプッシュ許諾ダイアログ発動前にメリットを訴求する画面を挟む
②：初回注文完了タイミングでダイアログを発動
個人的には②の方法であればユーザー体験の流れに沿っているため抵抗なく許諾されそうな所感あります。
が、この方法だと許諾母数が注文完了ユーザーに絞られ、許諾率としては高くなっても数が担保できない可能性があるため、現状の説明なしのダイアログ発動とメリット説明後のダイアログ発動で許諾率の変化を検証するのが良いんじゃないかと思います。
プッシュ通知の許諾促進に関する事例は以下の2つが非常に参考になるかと思うので引用します。
■ 位置情報許諾ダイアログ
📝：アプリ起動をしてスプラッシュ画面表示後位置情報許諾を求めるダイアログがポップアップ
🤔：なぜ位置情報許諾をしなければいけないのか不明確(デリバリーアプリとはいえ)
💡：お届け先登録のタイミングでダイアログを発動
こちらもプッシュ通知許諾と同じで、なぜ許諾をしないといけないかを明確にした状態で促進をする方がよいんじゃないかと思います。
具体的にはお届け先登録画面遷移のタイミングでダイアログを発動させる形ですね。
プッシュ通知許諾と違って、位置情報取得許諾の有無はアプリ内マーケティング観点・サービス利用観点両方からクリティカルではないため、多少導線を深くしても問題ない気がしています。
②：デリバリー画面(店舗一覧)
利用登録が済んだ次はデリバリー画面での利用開始です。
■ お届け先登録
📝：住所検索と現在地から検索の2通りでお届け先を設定可能
🤩：位置情報が正確でほとんどピンを微調整することなく設定ができる
🤔：対象エリア外も検索可能だが選択後にエラーメッセージが出現
🤔：ピンを動かしてから対象エリア外であることが分かる
💡：対象エリア外は検索候補に出さないようにする
💡：ピン設置の際に地図上に対象エリアを○囲いで表示する
■ フードジャンル
📝：17のジャンルから絞り込みが可能
🤩：フードアイコンをクリックするとアイコンが飛び出てクリックされていることが一目で分かる
🤩：「どんなものが食べたい気分」でザックリとしたフードジャンルで絞り込みができる
🤔：トップのお店一覧はどういう順番で並んでいるんだろう？
🤔：ジャンル選択後デリバリータブを押しても初期画面に戻らない
ジャンル関係なくその日の気分でお店を選べるのはいいですね！
実際のランチでも「これを食べよう！」って決めてから出発するよりも、オフィス外に出てからぶらぶら歩きながら決める方も多いんじゃないかと思います。
オンラインのデリバリーでも同じ体験ができるのは素晴らしいですね！
ジャンルバーからの注文とトップおすすめ店舗からの注文のファネルを組んでいくと、個人注文かグループ注文かで傾向が変わりそうですね。
分析しがいがありそうで面白そうです。
■ 店舗一覧
📝：上部に営業中・営業時時間外の店舗がまとまって表示
📝：受注停止中・定休日の店舗はグレーアウトされて表示
🤩：お店の人の写真とコメントが表示されて繋がりを感じられる
🤔：営業時間外のお店も選択できるが注文はできないので困惑しそう
🤔：店舗カセットの要素が上下どちらの店舗に属しているのかパッと見で分からない
💡：カセット間に線引きを行いマテリアルデザイン化すると見やすそう
💡：フードデリバリー注文者は値段とどれくらいの時間がかかるのかの方が重要視しそう
店舗の各要素構成はデリバリーアプリと食べログのようなポータルアプリと比べるとユーザーの利用目的・シチュエーションの違いが浮き彫りになって面白いです。
Chompyの場合は利用者と飲食店の繋がりを重視する世界観なので、値段や所要時間よりも、飲食店の方の写真とコメントが先にくる構成になっているのかもしれないですね！
③：店舗詳細〜注文
気になるお店が見つかったらいよいよメニューを決めて注文です！
■ 店舗詳細
📝：店長のおすすめ→定番人気→新着商品→ユーザーレビュー→カテゴリー の順番でメニューが並ぶ
🤩：店長のおすすめには一つ一つのメニューにコメントが入っていて繋がりを感じられる
■ 商品詳細
📝：オプション選択をして注文を行う
🤩：一つ一つのメニューに商品説明が丁寧に書いてあるので商品のイメージが湧きやすい
🤔：オプション機能がある場合オプション無しでも「なし」を選択しないと注文できない
💡：デフォルトでオプション「なし」にチェックを入れる仕様にする
💡：又はオプション未選択時はカート追加ボタンをアンクリッカブルにする
■ 注文画面
📝：カートタブは存在せず、カートに追加後画面にホバーボタンが出現
🤔：これはそもそもフードデリバリーが瞬間的ニーズで使用することに起因する？
📝：カート画面上では商品の削除や追加はできず、個別の商品ページまで戻って削除する仕組み
📝：別店舗の商品は同時に注文できない仕組み
🤔：これは配送者の仕様の問題？複数人で食べ比べをするユースケースも少なくはなさそう！(他デリバリーサービスも1店舗1注文制)
🤩：お届け目安時間が記載(設定している届け先で自動で変わる仕組み！)
💡：であれば現在の時刻を加味した届く実時刻記載のほうが便利そう！
④：受け取り待ち
最後に、注文が済んだ後の受け取るまでの体験を見ていきます！
■ 注文一覧
📝：表示要素は店舗設定のアイキャッチと店舗名
💡：注文商品名や届くまでの時間の記載が注文詳細に遷移無しで見れると良さそう
💡：オーダー詳細ページにあるプログレスバーがあると分かりやすそう！
■ 注文詳細
📝：「注文状況を確認する」のCTAクリックで詳細画面に遷移
📝：商品到着まで近くなるとドライバーとのチャット・電話アイコンが出現し連絡を取れるようになる
💡：お店の人もそうだけど、ドライバーのアイコンもあると安心感がありそう！
📝：お届け先にドライバーが到着するとプッシュ通知が届く
🤔：「クルーが到着しました。商品のお届けにあがります」だと飲食店に商品をピックアップしにきたように見える…？
💡：「お届け先に到着しました！商品をお渡しにあがります」だと伝わりやすそう！
💡：到着5分前に「まもなくお届け先に到着します！」みたいな文言でリマインドプッシュ通知が届くとユーザーも余裕をもって迎えられそう！
その他
ここまでが一連のユーザー体験に関してでしたが、最後にクーポン周りに関して感じた点を簡単にまとめます！
■ クーポン導線
📝：クーポンを追加するのは「マイページ」タブの「所有しているクーポン」＞「コードから追加」で可能
🤔：CTAが「所有しているクーポン」だとここからクーポンが追加できるとは分かりにくい
💡：CTAを「クーポンを管理・追加する」のようにするとパッと見で何ができるページなのかが分かりやすそう！
■ 友だち招待キャンペーン
📝：友達がそのクーポン経由で初回注文するとお互いに1500円分のクーポンが配布
🤩：合計1500円分クーポンはとてもお得！
💡：この施策はかなりバイラル性高そうなので、初回注文完了段階でシェアを促すアプリ内メッセージを出すのは反応率高くなりそう！
このシェアを促す施策はやるタイミングは主に以下の2つあると思います。
それぞれメリット・懸念両方があり、且つクーポン配布という事業KPIに直接響く施策にあたるため、質と量を両方担保するための検証が重要になりそうです。
①：初回注文完了時
注文が届くまでのワクワク感はあるが、プロダクト体験を完遂はしていないため満足度が最高潮に達しているとは言えない
②：初回注文後次回アプリ起動時
実際の食事というプロダクト体験のゴールを完遂しているため満足度が高まっている。一方で、初回体験の質が満足度を大きく左右し、再訪率にも気を配らねばならずシェア数が①と比べると低下する可能性はある
■ 最後に
今回は「Chompy」を題材に各ステップのUI/UXを見てきました。
この調査のためにも何回か改めて使いましたがやっぱり良いサービスだな〜と強く思いました！
個人の飲食店とエンドユーザーの繋がりを重視するコンセプトがデザイン設計の隅々にまで行き渡っていて心が温かくなりますね。
あと、ユーザーからのフィードバックを真摯に受け止めて、迅速に改善・機能開発をしていく体制が本当に素敵だなと！
実際このnote書こうと決めてから執筆している間に、改善要望挙げようとしていた「レビュー公開機能」や「どんなものが食べたい気分？」機能が実装されましたからね笑
この情勢でエンドユーザーのみならず、飲食店業界の方にとっても大きな希望となるサービスだと思っています！
今後も機能開発・サービス拡充楽しみにしています！
この記事が気に入ったらサポートをしてみませんか？