レシピサービスに買い物体験を組み込むにあたって向き合った課題と解決までの話

2021.03.05開催のCreators MIX 2021で登壇した際の発表資料です
https://creatorzine.jp/news/detail/1791

Transcript

1. レシピサービスに買い物体験を組み込むにあ
   たって向き合った課題と解決までの話
   

   View Slide

2. 自己紹介
   ● 佐野大河です
   ● 2017新卒でクックパッドアプリのデザインをやっています
   ● 昨年の途中から、クックパッドアプリに買い物機能を組み込
   む部分のデザインをやっています
   

   View Slide

3. View Slide

4. View Slide

5. プロジェクトにジョインしたときの話
   ● 昨年2月ごろ、「クックパッドアプリ内で、クックパッドマートと
   の連携をやるから、そこのデザイナーやってくれ」と言われ
   た
   

   View Slide

6. クックパッド
   ● レシピの検索・投稿サービス
   ● 毎日の「献立どうしよう」の声に応えています
   ● （外部向け資料を持ってくる）
   

   View Slide

7. クックパッドマート
   ● 地域の生産者が販売する食材を、1品から送料無料で、
   ユーザーの近隣の受け取り場所へお届けするサービス
   ● （外部向け資料持ってくる）
   

   View Slide

8. クックパッドマート
   ● 地域の生産者が販売する食材を、1品から送料無料で、
   ユーザーの近隣の受け取り場所へお届けするサービス
   ● （外部向け資料持ってくる）
   

   View Slide

9. View Slide

10. View Slide

11. どんなことができそう？
    ● レシピに必要な材料が買える
    ● 買う食材でつくれるレシピが見つかる
    ○ 真っ先に思いつくのはこのあたり？当時の自分もこれをイメージしましたし、
    実際最初の叩きとして描かれていたものもこういったものでした
    

    View Slide

12. どんなことができそう？
    ● レシピに必要な材料が買える
    ● 買う食材でつくれるレシピが見つかる
    ○ 真っ先に思いつくのはこのあたり？当時の自分もこれをイメージしましたし、
    実際最初の叩きとして描かれていたものもこういったものでした
    

    View Slide

13. View Slide

14. 作りたい体験は単純ではなく
    ● 悩む時間が減り献立決めと買い物が今までよりも楽にな
    る！
    ● 買ったことない食材や、つくったことないレシピに今まで以上
    に挑戦しやすくなる！
    ● etc...
    

    View Slide

15. ただ必要な食材が買える、必要なレシピが見つかる、じゃなく、レシピ
    と買い物が融合することでより広い範囲でユーザーの毎日の料理体
    験を良くできる！
    

    View Slide

16. View Slide

17. 昨年10月、買い物機能をリリース
    ● こんなUI
    

    View Slide

18. 昨年10月、買い物機能をリリース
    ● こんなUI
    

    View Slide

19. 昨年10月、買い物機能をリリース
    ● こんなUI
    

    View Slide

20. View Slide

21. View Slide

22. リリースまでに向き合った3つの課題
    

    View Slide

23. 登場人物
    ● レシピを投稿している人
    ● レシピを探しに来ている人
    

    View Slide

24. 登場人物
    ● 買い物する人
    ● 買い物したくてもできない人
    

    View Slide

25. 「買い物をする人」以外の体験を設計する必要がある
    

    View Slide

26. 買い物機能を使えない人
    ● 買い物機能の対象ユーザーはクックパッドマートの配送エリ
    アのユーザーに限られるという制約への対応をどうするか...
    

    View Slide

27. レシピを探しに来ている人
    ● 多くの人は「今日の」献立をどうしようとレシピを探しにきて
    いる
    ● 明日以降届く前提の買い物機能をネガティブに捉えられな
    いか...
    

    View Slide

28. レシピを投稿している人
    ● 「クックパッドがユーザーのレシピを使って儲けようとしてい
    る」と印象がわるくならないか...
    

    View Slide

29. どうやってネガティブな印象を避けるか、、？
    ● 現CEO「価値のあるものだと信じてやってるわけだからポジ
    ティブに思えるようにしたいよね」
    ○ これによってどんどん最高のデザイン作れたぜ！てわけじゃないけど、考え
    方として印象に残っています
    

    View Slide

30. どうやってネガティブな印象を避けるか、、？
    ● 現CEO「価値のあるものだと信じてやってるわけだからポジ
    ティブに思えるようにしたいよね」
    ○ これによってどんどん最高のデザイン作れたぜ！てわけじゃないけど、考え
    方として印象に残っています
    

    View Slide

31. どうやってネガティブな印象を避けるか、、？
    ● 現CEO「価値のあるものだと信じてやってるわけだからポジ
    ティブに思えるようにしたいよね」
    ○ これによってどんどん最高のデザイン作れたぜ！てわけじゃないけど、考え
    方として印象に残っています
    

    View Slide

32. ネガティブをどう避けるかよりも
    いかにポジティブに思ってらもえるか
    

    View Slide

33. [買い物機能を使えない人]
    

    View Slide

34. 90%以上のユーザーが機能を使えない
    ● クックパッドマートの配送エリアのユーザーに限られるが故
    ● とはいえクックパッドには全国にユーザーがいる
    ● 人口比率にすると90%以上のユーザーが機能を使えない
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

39. View Slide

40. View Slide

41. View Slide

42. View Slide

43. View Slide

44. View Slide

45. View Slide

46. この辺りの話はnoteにも書いたのでぜひ
    ● リンク
    

    View Slide

47. [レシピを探しに来ている人]
    レシピ閲覧の邪魔にならない、かつ、レシピ探し→買い物がスムー
    ズになるように（もうちょい端的に）
    

    View Slide

48. ほとんどの人がレシピを探しにきている
    ● そこから買い物ができる体験をつくりたい
    ○ それに価値があると信じてるので
    ● 「今日の」献立を決めたい人、レシピを見てつくりたい人の邪魔
    にならないか...
    ○ 食材が買えることがレシピの付加価値になるには？
    ○ レシピを探す体験と買い物をする体験が共存するには？
    

    View Slide

49. View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. View Slide

55. View Slide

56. レシピのどこから食材が買えるかのが良いか？
    ● レシピを見るのを邪魔せず、かつ「この食材が買える」とわかる
    ように
    ○ 材料欄横のアイコンから変えるように。あくまでレシピが
    主。ハーフモーダルであくまでレシピ画面の上で探せるよう
    に
    ○ 他の没案も紹介？
    

    View Slide

57. View Slide

58. View Slide

59. View Slide

60. View Slide

61. View Slide

62. View Slide

63. View Slide

64. View Slide

65. View Slide

66. View Slide

67. View Slide

68. [レシピを投稿している人]
    自分の書いたレシピが役に立つと思えるように
    

    View Slide

69. View Slide

70. View Slide

71. レシピ作者さんに適切なコミュニケーションを
    ● レシピから食材が買えるようになることを伝える
    ● 「クックパッドがユーザーのレシピを使って儲けようとしている」
    と印象がわるくならないか
    ● PdM主導でメッセージを作り具体化
    

    View Slide

72. レシピから買い物できる体験をポジティブに伝える
    ● こんなデザイン
    

    View Slide

73. View Slide

74. View Slide

75. View Slide

76. View Slide

77. View Slide

78. View Slide

79. リリースまでに向き合った課題まとめ
    

    View Slide

80. リリースまでに向き合った課題まとめ
    ● ネガティブをどう解消するか、よりも、どうポジティブに捉えても
    らうか
    ○ ユーザーにとって価値があると信じてやっているものなの
    で、その気持ちはストレートに
    ● リアルな反応を見てバランスを決める
    ○ 一方向に向きすぎないように
    ○ 正直、ネガポジの反応は実際に見ないとわからない
    ○ ユーザーインタビューを通じて解決策を決めていった
    

    View Slide

81. リリースまでに向き合った課題まとめ
    ● ネガティブをどう解消するか、よりも、どうポジティブに捉えても
    らうか
    ○ ユーザーにとって価値があると信じてやっているものなの
    で、その気持ちはストレートに
    ● リアルな反応を見てバランスを決める
    ○ 一方向に向きすぎないように
    ○ 正直、ネガポジの反応は実際に見ないとわからない
    ○ ユーザーインタビューを通じて解決策を決めていった
    

    View Slide

82. リリースまでに向き合った課題まとめ
    ● ネガティブをどう解消するか、よりも、どうポジティブに捉えても
    らうか
    ○ ユーザーにとって価値があると信じてやっているものなの
    で、その気持ちはストレートに
    ● リアルな反応を見てバランスを決める
    ○ 一方向に向きすぎないように
    ○ 正直、ネガポジの反応は実際に見ないとわからない
    ○ ユーザーインタビューを通じて解決策を決めていった
    

    View Slide

83. View Slide

84. リリースしてどうだったの？
    

    View Slide

85. リリースしてどうだったの？
    ● 懸念していた既存ユーザーのネガティブな反応、炎上のような
    わかりやすいトラブルは皆無
    ● 一方で、自然に買い物を使い始める人も全然いない
    ○ 家にあるもので何つくろう、と買い物は文脈が逸れている
    

    View Slide

86. まだまだこれから
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. 現在地と未来（イベントのタイトルにあやかってまとめ）
    ● 現在地
    ○ 買い物する以外の人も含めポジティブに感じるユーザーとのコ
    ミュニケーションを整え、レシピ×買い物の土台をつくった
    ● 未来
    ○ 「献立決め」と「買い物」が融け合った新しい体験をつくり、毎日
    の料理がより楽しみになるようにしていく
    

    View Slide

91. View Slide

92. View Slide