Pizza 4Ps様 - オンラインデリバリーアプリのUI/UX構築

Pizza 4Ps様

コロナの影響で来店数の減少と顧客との距離が離れてしまう恐れがあるため、レストランのメニュー及び、オンラインストアの料理を配達するためのオンラインデリバリーチャネルが必要になった。

目標は顧客とレストランを効率的かつ継続的に結びつけ、食品の鮮度を確保するために配達時間を設定できるアプリを作ることでした。

施策概要

アライブのタスクはPizza 4Psのデリバリーアプリ（主にレストランへの注文）を一から構築し、主要指標を改善するためにのインターフェースを改善することでした。

プロジェクト

本プロジェクトの方向性として、ユーザー中心をベースにデザイン思考プロセスで進めていきました。具体的なプロセス全体は以下に述べますので、是非ご覧ください。

ユーザー調査

調査プロセスでは、ユーザーのニーズを理解するために、インタビューやアンケートで調査を行いました。アンケート調査は、定量的なデータを提供するため、顧客環境を最初に確認するのに最適です。
また、デザインへのアプローチ方法を完全に理解するために定性調査 (インタビュー) も行いました。

インタビューから得られた最も重要な発見は以下になります。

競合調査

競合他社の調査を実施し、食品宅配市場における他社の強みと弱点を特定しました。

情報アーキテクチャ

ユーザー動線

ユーザー問題解決のために、ユーザー が行う一連のアクティビティを明確に表すユーザーフローを作成します。 最初は、注文の作成と確認の流れにフォーカスすることにしました。

これらは最も重要なフェーズであるため、解決すれば、ユーザー エクスペリエンスを向上させ、製品のビジネスメトリックを向上させることができます。 したがって、ユーザーサイクルは注文の作成と確認の流れのみを表しています。

低忠実度ワイヤーフレーム

このワイヤーフレームは、高忠実度のプロトタイプを決定するため、私たちは常に最初ににフォーカスします。 ユーザーがアプリを利用した時に直面した問題点をターゲットにするのに最適です。

高忠実度ワイヤーフレーム

UIデザイン: 自分好みのテイストにカスタマイズ可能なピザ

レストラン向けの通常な食品注文アプリは、決まった配合のピザで提供していますが、 Pizza 4Psでは限界を押し広げ、ユーザーは、トッピングや食材を追加または削除して既存のピザをカスタマイズすることができ、ハーフ & ハーフピザを選択して自分の好みのピザを作成することもできます。カスタマイズに応じてユーザーは価格がどのように変化するかを確認できます。

ハーフ＆ハーフのデザイン

メニューには、レストランで提供している食べ物が表示されます。ユーザーは商品の写真と価格を見ることができます。ハーフ & ハーフボタンの文字表示の色味を変えることで、ユーザーにとってより分かりやすくなり結果CTA（行動喚起）を促しやすく工夫しました。さらに、画面の上部にあるカテゴリで、他のメニューやレストランの位置を探しやすくするように配置されています。

ハーフ & ハーフボタンを押下すると、次の画面ではピザの半径左部分が表示され、ユーザーはピザの右半分のテイストを写真のリストから選び、カートに追加することができます。

また、画面デザインは極力シンプルにクリーンに見えるようにしました。さらに、自分好みのテイストカスタマイズや詳細情報に関心が無く、できるだけ早く注文したいユーザーには、食材または成分に関する詳細情報でオーバロードされていないように画面をデザインしています。

多様な選択肢

トッピングが気になる方は、画面中央の「Add More」ボタンを使います。 タップすることでポップアップが表示され、トッピングの内容を確認できます。 リストのビジュアルパフォーマンスを効果的かつ魅力的にするために、インターフェイスにはすべての材料の写真が表示されています。 もう1つの重要な UX アフォーダンスはカートアイコンには、数量を表すオレンジ色のドットは、ユーザーに速くオーダーを完了させるように促す意図があります。

Pizza 4Ps アプリのデザインプロセスは、ALIVE デザインチームにとって刺激的なクリエイティブチャレンジでした。拡張機能と優れた使いやすさでフードオーダー アプリケーション業界を飛躍させる素晴らしい挑戦と機会でした。