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

by tyoneda

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

ラフデザインの話

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

思いついただけ作る

Slide 5

Slide 5 text

思いついただけ作る

Slide 6

Slide 6 text

思いついただけ作る

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

既存アプリから学ぶ

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

既存アプリから学ぶ

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

google画像検索「750x1334」

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

第１段のデザインが完成

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

インタビューの話

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

大量の課題が浮き彫りに

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

「食材セットは◎、でもカートでわかりにくい」カートの中で食材セットの中がわかるように

Slide 36

Slide 36 text

No content

Slide 37

Slide 37 text

ユーザーテストでわかったこと「受け取るまで混載だとは思わなかった」

Slide 38

Slide 38 text

知る由もない・・・「受け取るまで混載だとは思わなかった」パネルで説明パネル領域を確保

Slide 39

Slide 39 text

「受け取るまで混載だとは思わなかった」アニメーションで説明

Slide 40

Slide 40 text

インタビューをすることでマクロだと事業の仮説検証ミクロだと開発の優先順位をつけやすくなる

Slide 41

Slide 41 text

実装デザインの話

Slide 42

Slide 42 text

いよいよ実装

Slide 43

Slide 43 text

機能盛り盛りでデザインしたのでスケジュールに合わせて断捨離していく

Slide 44

Slide 44 text

すり合わせ隊

Slide 45

Slide 45 text

すり合わせ隊

Slide 46

Slide 46 text

スケジュールはざっくり

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

ゴールの認識だけあわせるプロセスや手段は各自

Slide 54

Slide 54 text

機能の断捨離盛り盛りデザイン社内ベータ版検索お気に入りラベル表示チュートリアルチャット問い合わせどこでもカート確認ホームパネルタグ社外限定版検索お気に入りラベル表示チュートリアルチャット問い合わせどこでもカート確認ホームパネルタグ検索お気に入りラベル表示チャット問い合わせどこでもカート確認ホームパネルタグチュートリアル

Slide 55

Slide 55 text

実装・スケジュールに合わせてデザインも変えるシャドウだと挙動が重いラベルなし・ボーダー変更ラベルあり・シャドウ表現

Slide 56

Slide 56 text

実装・スケジュールに合わせてデザインも変えるカートに入れるアニメーションは大変アニメーションバイブ

Slide 57

Slide 57 text

「盛り盛りデザイン」「断捨離」を繰り返していく

Slide 58

Slide 58 text

ホーム画面デザインの変遷こだわり表現

Slide 59

Slide 59 text

ホーム画面デザインの変遷微調整

Slide 60

Slide 60 text

一度すり合わせても・・・

Slide 61

Slide 61 text

新しい問題はどんどんでてくる優先順位も変わる

Slide 62

Slide 62 text

なので細かくすり合わせましょうそして個々で判断できるようにゴールをすり合わせよう

Slide 63

Slide 63 text

おまけキャラクターの話

Slide 64

Slide 64 text

「クックパッド」をいれるのを最優先にした

Slide 65

Slide 65 text

コック帽のシンボルがあるので「サービスとしての印象に残るもの」を打ち出しにくい

Slide 66

Slide 66 text

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