サービスのフェーズで変わるUIデザインの話

こんにちは。
クックパッドマート開発チームの長野です。注文ユーザー向けアプリのプロダクトマネージャーをしています。

今日は、ここ数ヶ月の間にiOSアプリのホーム画面のデザインをがらりと変えていった話について、お話ししたいと思います。

サービス初期のUIは世界観推しで

クックパッドマートアプリのホーム画面は、リリース当初から先日まで、出店いただいている販売ストア別に商品が並ぶUIでした。

▲ 販売者さんのこだわりコメントとともに商品を並べるUI

このような形にしていた背景にはいくつか理由があります。

まず、リリース当初は取り扱える商品数が限られていたこと。サービス開始当初は実績も前例もないサービスに協力してくださるパートナーを集めるのは本当に至難です。当然初期フェーズでは商品数は少なく、それでもサービスの魅力が伝わる見せ方を考える必要がありました。

また価格についても、普段利用しているスーパーなどと比べると決して安くないという状況でした。注文が増えて売り上げが上がれば値下げも検討してもらいやすいですが、商品がなければ注文は増えない、まさに「ニワトリが先かタマゴが先か」という状態でした。

そんな中でただひとつ、初期から自信を持ってサービスのウリにできたのは、サービスの世界観に賛同して出店してくださる販売者さんとその商品です。おいしく食べてもらいたいという気持ちとともに丁寧につくられた食材は、どれも自信を持ってオススメすることができました。

▲ クックパッドマートに参画いただいている販売者の方々

「ニワトリタマゴ」状態の立ち上げフェーズにおいて、いかにユーザーにサービスの魅力を伝え、ネガティブな要素をポジティブに受け入れてもらえるようにデザインするか。それが初期のUIデザインに求められることだったと思います。そこで、クックパッドマートの初期のUIでは、各販売者さんを全面に推し出し、お店の人が語りかけてくるような顔の見えるUIで商品を陳列する形式をとりました。

結果として、初期に使い始めてくれたユーザーやユーザーテストを行った際のフィードバックでは、「こだわりが伝わってきて美味しそうと思える」「普段買えないようなお店の商品が届くのは嬉しい」「ちょっと特別な日に使いたい」といった内容が多く見られました。

サービスの成長に合わせて利便性の比重を上げる

現在クックパッドマートのサービスは徐々に拡大フェーズに入ってきています。出店いただける販売者さんも少しずつ増え、商品数も初期とは比べ物にならない数になっています。

そのようなサービスの成長とともに、初期のUIでは「商品を探しづらい」という声が徐々に高まりました。同じジャンルでも複数の店舗が出店する状態になり、「鶏肉を買おう」と思っているユーザーが、店舗別に分かれたUIでは比較検討しづらいのはイメージできるかと思います。
また、参加してくださる販売店さんが増えるにしたがって、スーパーと比較しても見劣りしない価格も実現できるようになってきました。

▲「鶏もも」だけでもお店をまたいだ幅のある商品ラインナップができてきた

そうしたサービスの変化を受けて、これまで「こだわり推し」に全面的に振っていた店舗別UIも潮時を迎えたと判断し、よりユーザーの利便性を重視した商品カテゴリ別のUIの採用を決めました。

▲ 一般的なカテゴリ分けで商品を陳列するUI

カテゴリ別UIは多くの一般的なECサービスで採用されており、ユーザーのメンタルモデルとの乖離が少ないので、使い方を理解してもらいやすいと考えられます。実際に店舗別UIの時に行ったユーザーテストでも、「カテゴリメニューはないの？」といったような反応は少なからず見られ、使い慣れた一般的なUIを踏襲するメリットは大きいと考えました。

利便性：世界観のバランスを整える

しかし、カテゴリ別UIの導入後約1ヶ月ほどで、ホーム画面のUIをさらにアップデートしています。

▲ ファーストビューに販売ストア一覧を表示するUIへ

カテゴリ別UIでは、商品の選びやすさという利便性は叶えられるものの、ツール感が強くなりすぎてワクワクしない、他のECとの違いが感じられない、といった課題がありました。

このような課題はユーザーの声からは上がってきにくいタイプのものだと思います。機能的なゴールはカテゴリ別UIでも叶えられているので、「ワクワクしない」「他のECでもいい」といった情緒的な不満は実際の声としては発せられにくいためです。
しかし、サービスのビジョンや世界観に共感して使うのと、機能的に満たされるからという理由でサービスを使うのとでは、その人にとってのサービスの意味づけの強さが異なってくるので、長期にわたって日常的に使ってもらえるサービスになるためには重要な観点だと思います。そのため「世界観が伝わりづらいUIになっている」というチームでの課題認識から、UIの変更を進めました。

ここでのデザインで気を遣ったのは、ただ運営目線の世界観を表現しても、ユーザーにとって価値のある情報でなければ読み飛ばされてしまうということです。初期のホーム画面のファーストビューにおいていたカルーセルバナーに全く効果が見られなかったことからの反省もありました。

▲ 初期のカルーセルバナーいろいろ（ほとんど見られていなかった）

そこで、「どれくらいの選択肢から商品を選べて、いつ、どこで受け取れるのか」というユーザーにとって意味のある情報を伝えつつ、「自分で買い回るのは難しい様々な店舗の商品から選べる」というサービスの価値を伝えることを狙いとし、現在のデザインになりました。

今見えている課題

ここ数ヶ月でのホーム画面の変遷をご紹介してきましたが、現在の状態がベストだとは決して思っていません。まだまだ解決したい課題は山積みです。今まさに検討を進めている課題の一部をご紹介します。

商品まだまだ増えるよ問題

▲ 日々増えていく商品たち

商品が徐々に増えてカテゴリ別UIを採用したと書きましたが、クックパッドマートが日々の食卓を支える選択肢となるためには、まだまだ商品数もカテゴリ数も増やしていく必要があると考えています。そうなると、今よりさらに検索性の高さが求められます。その時の理想のUIはどのようなものなのか、どこから実現させていくかを今まさに検討中です。

どれ買ったらいいのかわからない問題

▲ なす、なす、なす、ナス・・・

また、どれだけ検索性を高めても、類似の商品がたくさんある状態ではユーザーはどれを買ったらいいかわからなくなってしまうという問題は残ります。今のクックパッドマートは価格以外の判断軸が弱いので、今後はお気に入り数やクチコミなど、購入の意思決定を助けるための複数の判断軸を用意し、自分にあった満足度の高い商品に出会いやすいUIを作っていきたいと考えています。

次に買えるのはいつなのか問題

▲ 他の曜日なら買える商品、でも何曜日に買えるのかわからない

クックパッドマートはたくさんの販売者さんが参加するプラットフォームなので、販売者さんによって営業日が異なります。つまり、ユーザーからすると閲覧する日によって、商品ラインナップが常に変化している状態になります。現在はもっとも近い配送日の注文しか受け付けることができていないため、「この間買ったベーグル美味しかったのに今日見てみたら売ってない・・・」といった残念体験が起こってしまっています。

このような残念体験を解消するため、先日のリリースで、他の曜日なら買える商品を「現在はご注文いただけません」という表記とともに表示するアップデートを行いました。さらに今後は、「次に販売される曜日を明示する」「未来の配送日に予約注文を入れられるようにする」といった施策を展開していきたいと考えています。

まとめ

「少ない商品でどのようにポジティブな買い物体験を作っていくか」を考えていたのが約一年前。そこから刻々と変わるサービスの状況に合わせてUIを改修し続け、今に至ります。
新規事業は本当に変化が早く、常に最高形を議論しつつも、その最高形もどんどんアップデートされていくのが難しくも面白いところです。

ここまで読んでいただけた方は、まだまだ課題山積なことはおわかりいただけたかと思います。
この記事を通してクックパッドマートの開発にご興味を持っていただけた方がいれば、ぜひお力を貸してください！一緒にサービスを作りましょう。

クックパッドマートチームは、エンジニア・デザイナーはもちろん、様々な職種で仲間を募集しています。ご応募おまちしております。