Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

tyoneda
September 26, 2018

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

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

tyoneda

September 26, 2018
Tweet

More Decks by tyoneda

Other Decks in Design

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. 第1段デザイン
    着地までの話

    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. 第1段のデザインが完成

    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. デザインレビュー(すり合わせ隊)はきちんと
    週1回ぐらい(何度でもおかわり)
    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