クックパッドマートでアプリのデザインをした話

「Cookpad Tech Kitchen #18 生鮮食品EC クックパッドマートの開発秘話」にて登壇した、クックパッドマートのアプリデザインのお話です。
登壇時の資料から一部内容を添削して掲載しています。

Transcript

1. クックパッドマートで
   アプリのデザインをした話
   2018/9/26 クックパッド買物事業部 米田
   

   View Slide

2. ラフデザインの話
   

   View Slide

3. 最初は・・・
   前提条件や制約を聞かずに
   サービスの説明を聞いて
   期待したアプリをデザインしていきたい
   （個人的な意見です）
   

   View Slide

4. 思いついただけ作る
   

   View Slide

5. 思いついただけ作る
   

   View Slide

6. 思いついただけ作る
   

   View Slide

7. 自由度が高い初期デザインは
   まっさらな状態で
   楽しんで「広げる」
   

   View Slide

8. 第１段デザイン
   着地までの話
   

   View Slide

9. 既存アプリから学ぶ
   

   View Slide

10. 新しいサービスでも
    既存のメンタルモデルを流用したい
    （ユーザーがサービスや挙動に期待する引用元を探す）
    

    View Slide

11. 既存アプリから学ぶ
    

    View Slide

12. 中国ショッピングアプリの特徴
    サービスカラーが全面に出ている
    サービスにキャラクターがいる
    漢字ならではのレイアウト
    

    View Slide

13. google画像検索「750x1334」
    

    View Slide

14. どのような体験を提供したいか
    言語化したほうがよさそう
    

    View Slide

15. クックパッドマートアプリで提供したい体験
    使いやすいこと・見つけやすいこと
    おいしいことが期待できること
    買物自体が楽しいこと
    

    View Slide

16. クックパッドマートアプリで提供したい体験
    使いやすいこと・見つけやすいこと
    おいしいことが期待できること
    買物自体が楽しいこと
    

    View Slide

17. クックパッドマートアプリで提供したい体験
    使いやすいこと・見つけやすいこと
    おいしいことが期待できること
    買物自体が楽しいこと
    

    View Slide

18. クックパッドマートアプリで提供したい体験
    使いやすいこと・見つけやすいこと
    おいしいことが期待できること
    買物自体が楽しいこと
    

    View Slide

19. 何を買うか決めてはいないけど
    なんとなく食べたいものはある
    ≒
    何を観るか決めていないけど
    なんとなく観たいものはある
    

    View Slide

20. Netflixで映画を探す
    体験に近いのかも！？
    

    View Slide

21. 第１段のデザインが完成
    

    View Slide

22. 本物の写真でカラー・デザインをする
    ダミー 本物
    

    View Slide

23. 写真や文言は
    できるだけ早い段階で
    本番と近いものでデザイン
    

    View Slide

24. インタビューの話
    

    View Slide

25. flintoを使って注文から受け取りまで疑似体験
    

    View Slide

26. デザインスプリントのday.5だけやる感じ
    

    View Slide

27. 大量の課題が浮き彫りに
    

    View Slide

28. ユーザーの期待に
    サービスを合わせる
    or
    デザインで
    期待を合わせる
    

    View Slide

29. ユーザーテストでわかったこと
    「おいしいことは期待できるが、値段が高そう」
    

    View Slide

30. 使いやすいこと・見つけやすいこと
    クックパッドマートアプリで提供したい体験
    おいしいことが期待できること
    買物自体が楽しいこと
    

    View Slide

31. 「おいしいことは期待できるが、値段が高そう」
    カラーリングで高級感・親しみやすさを調整
    

    View Slide

32. 「おいしいことは期待できるが、値段が高そう」
    カラーリングで高級感・親しみやすさを調整
    

    View Slide

33. 「おいしいことは期待できるが、値段が高そう」
    商品の陳列順を変更
    

    View Slide

34. ユーザーテストでわかったこと
    「食材セットは◎、でもカートでわかりにくい」
    

    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. スケジュールはざっくり
    

    View Slide

47. ゴールイメージはすり合わせる
    

    View Slide

48. デザインレビュー（すり合わせ隊）はきちんと
    週１回ぐらい（何度でもおかわり）
    slackの画面共有
    引っかかればその場で議論
    

    View Slide

49. その場でsketchにメモ・デザイン変更
    

    View Slide

50. 汚い言葉で自らを罵倒していくスタイル
    

    View Slide

51. 五月雨開発のときはデザイン進捗わかるように
    

    View Slide

52. 触って確かめたい時だけflinto
    

    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. 妖精っぽいキャラクター
    

    View Slide

72. 着地！
    

    View Slide

73. ご清聴ありがとうございました
    

    View Slide