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

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

Transcript

1. クックパッドマートで アプリのデザインをした話 2018/9/26 クックパッド買物事業部 米田
2. ラフデザインの話
3. 最初は・・・ 前提条件や制約を聞かずに サービスの説明を聞いて 期待したアプリをデザインしていきたい （個人的な意見です）
4. 思いついただけ作る
5. 思いついただけ作る
6. 思いついただけ作る
7. 自由度が高い初期デザインは まっさらな状態で 楽しんで「広げる」
8. 第１段デザイン 着地までの話
9. 既存アプリから学ぶ
10. 新しいサービスでも 既存のメンタルモデルを流用したい （ユーザーがサービスや挙動に期待する引用元を探す）
11. 既存アプリから学ぶ
12. 中国ショッピングアプリの特徴 サービスカラーが全面に出ている サービスにキャラクターがいる 漢字ならではのレイアウト
13. google画像検索「750x1334」
14. どのような体験を提供したいか 言語化したほうがよさそう
15. クックパッドマートアプリで提供したい体験 使いやすいこと・見つけやすいこと おいしいことが期待できること 買物自体が楽しいこと
16. クックパッドマートアプリで提供したい体験 使いやすいこと・見つけやすいこと おいしいことが期待できること 買物自体が楽しいこと
17. クックパッドマートアプリで提供したい体験 使いやすいこと・見つけやすいこと おいしいことが期待できること 買物自体が楽しいこと
18. クックパッドマートアプリで提供したい体験 使いやすいこと・見つけやすいこと おいしいことが期待できること 買物自体が楽しいこと
19. 何を買うか決めてはいないけど なんとなく食べたいものはある ≒ 何を観るか決めていないけど なんとなく観たいものはある
20. Netflixで映画を探す 体験に近いのかも！？
21. 第１段のデザインが完成
22. 本物の写真でカラー・デザインをする ダミー 本物
23. 写真や文言は できるだけ早い段階で 本番と近いものでデザイン
24. インタビューの話
25. flintoを使って注文から受け取りまで疑似体験
26. デザインスプリントのday.5だけやる感じ
27. 大量の課題が浮き彫りに
28. ユーザーの期待に サービスを合わせる or デザインで 期待を合わせる
29. ユーザーテストでわかったこと 「おいしいことは期待できるが、値段が高そう」
30. 使いやすいこと・見つけやすいこと クックパッドマートアプリで提供したい体験 おいしいことが期待できること 買物自体が楽しいこと
31. 「おいしいことは期待できるが、値段が高そう」 カラーリングで高級感・親しみやすさを調整
32. 「おいしいことは期待できるが、値段が高そう」 カラーリングで高級感・親しみやすさを調整
33. 「おいしいことは期待できるが、値段が高そう」 商品の陳列順を変更
34. ユーザーテストでわかったこと 「食材セットは◎、でもカートでわかりにくい」
35. 「食材セットは◎、でもカートでわかりにくい」 カートの中で食材セットの中がわかるように
37. ユーザーテストでわかったこと 「受け取るまで混載だとは思わなかった」
38. 知る由もない・・・ 「受け取るまで混載だとは思わなかった」 パネルで説明 パネル領域を確保
39. 「受け取るまで混載だとは思わなかった」 アニメーションで説明
40. インタビューをすることで マクロだと事業の仮説検証 ミクロだと開発の優先順位を つけやすくなる
41. 実装デザインの話
42. いよいよ実装
43. 機能盛り盛りでデザインしたので スケジュールに合わせて 断捨離していく
44. すり合わせ隊
45. すり合わせ隊
46. スケジュールはざっくり
47. ゴールイメージはすり合わせる
48. デザインレビュー（すり合わせ隊）はきちんと 週１回ぐらい（何度でもおかわり） slackの画面共有 引っかかればその場で議論
49. その場でsketchにメモ・デザイン変更
50. 汚い言葉で自らを罵倒していくスタイル
51. 五月雨開発のときはデザイン進捗わかるように
52. 触って確かめたい時だけflinto
53. ゴールの認識だけあわせる プロセスや手段は各自
54. 機能の断捨離 盛り盛りデザイン 社内ベータ版 検索 お気に入り ラベル表示 チュートリアル チャット問い合わせ どこでもカート確認 ホームパネル タグ 社外限定版 検索 お気に入り ラベル表示 チュートリアル チャット問い合わせ どこでもカート確認 ホームパネル タグ 検索 お気に入り ラベル表示 チャット問い合わせ どこでもカート確認 ホームパネル タグ チュートリアル
55. 実装・スケジュールに合わせてデザインも変える シャドウだと挙動が重い ラベルなし・ボーダー変更 ラベルあり・シャドウ表現
56. 実装・スケジュールに合わせてデザインも変える カートに入れるアニメーションは大変 アニメーション バイブ
57. 「盛り盛りデザイン」 「断捨離」 を繰り返していく
58. ホーム画面デザインの変遷 こだわり表現
59. ホーム画面デザインの変遷 微調整
60. 一度すり合わせても・・・
61. 新しい問題はどんどんでてくる 優先順位も変わる
62. なので細かくすり合わせましょう そして個々で判断できるように ゴールをすり合わせよう
63. おまけ キャラクターの話
64. 「クックパッド」をいれるのを最優先にした
65. コック帽のシンボルがあるので 「サービスとしての印象に残るもの」 を打ち出しにくい
66. 中国ショッピングアプリの特徴 サービスカラーが全面に出ている サービスにキャラクターがいる 漢字ならではのレイアウト
70. 人っぽいキャラクター
71. 妖精っぽいキャラクター
72. 着地！
73. ご清聴ありがとうございました