「Cookpad Tech Kitchen #18 生鮮食品EC クックパッドマートの開発秘話」にて登壇した、クックパッドマートのアプリデザインのお話です。 登壇時の資料から一部内容を添削して掲載しています。
クックパッドマートでアプリのデザインをした話2018/9/26 クックパッド買物事業部 米田
View Slide
ラフデザインの話
最初は・・・前提条件や制約を聞かずにサービスの説明を聞いて期待したアプリをデザインしていきたい(個人的な意見です)
思いついただけ作る
自由度が高い初期デザインはまっさらな状態で楽しんで「広げる」
第1段デザイン着地までの話
既存アプリから学ぶ
新しいサービスでも既存のメンタルモデルを流用したい(ユーザーがサービスや挙動に期待する引用元を探す)
中国ショッピングアプリの特徴サービスカラーが全面に出ているサービスにキャラクターがいる漢字ならではのレイアウト
google画像検索「750x1334」
どのような体験を提供したいか言語化したほうがよさそう
クックパッドマートアプリで提供したい体験使いやすいこと・見つけやすいことおいしいことが期待できること買物自体が楽しいこと
何を買うか決めてはいないけどなんとなく食べたいものはある≒何を観るか決めていないけどなんとなく観たいものはある
Netflixで映画を探す体験に近いのかも!?
第1段のデザインが完成
本物の写真でカラー・デザインをするダミー 本物
写真や文言はできるだけ早い段階で本番と近いものでデザイン
インタビューの話
flintoを使って注文から受け取りまで疑似体験
デザインスプリントのday.5だけやる感じ
大量の課題が浮き彫りに
ユーザーの期待にサービスを合わせるorデザインで期待を合わせる
ユーザーテストでわかったこと「おいしいことは期待できるが、値段が高そう」
使いやすいこと・見つけやすいことクックパッドマートアプリで提供したい体験おいしいことが期待できること買物自体が楽しいこと
「おいしいことは期待できるが、値段が高そう」カラーリングで高級感・親しみやすさを調整
「おいしいことは期待できるが、値段が高そう」商品の陳列順を変更
ユーザーテストでわかったこと「食材セットは◎、でもカートでわかりにくい」
「食材セットは◎、でもカートでわかりにくい」カートの中で食材セットの中がわかるように
ユーザーテストでわかったこと「受け取るまで混載だとは思わなかった」
知る由もない・・・「受け取るまで混載だとは思わなかった」パネルで説明パネル領域を確保
「受け取るまで混載だとは思わなかった」アニメーションで説明
インタビューをすることでマクロだと事業の仮説検証ミクロだと開発の優先順位をつけやすくなる
実装デザインの話
いよいよ実装
機能盛り盛りでデザインしたのでスケジュールに合わせて断捨離していく
すり合わせ隊
スケジュールはざっくり
ゴールイメージはすり合わせる
デザインレビュー(すり合わせ隊)はきちんと週1回ぐらい(何度でもおかわり)slackの画面共有引っかかればその場で議論
その場でsketchにメモ・デザイン変更
汚い言葉で自らを罵倒していくスタイル
五月雨開発のときはデザイン進捗わかるように
触って確かめたい時だけflinto
ゴールの認識だけあわせるプロセスや手段は各自
機能の断捨離盛り盛りデザイン 社内ベータ版検索お気に入りラベル表示チュートリアルチャット問い合わせどこでもカート確認ホームパネルタグ社外限定版検索お気に入りラベル表示チュートリアルチャット問い合わせどこでもカート確認ホームパネルタグ検索お気に入りラベル表示チャット問い合わせどこでもカート確認ホームパネルタグチュートリアル
実装・スケジュールに合わせてデザインも変えるシャドウだと挙動が重いラベルなし・ボーダー変更ラベルあり・シャドウ表現
実装・スケジュールに合わせてデザインも変えるカートに入れるアニメーションは大変アニメーション バイブ
「盛り盛りデザイン」「断捨離」を繰り返していく
ホーム画面デザインの変遷こだわり表現
ホーム画面デザインの変遷微調整
一度すり合わせても・・・
新しい問題はどんどんでてくる優先順位も変わる
なので細かくすり合わせましょうそして個々で判断できるようにゴールをすり合わせよう
おまけキャラクターの話
「クックパッド」をいれるのを最優先にした
コック帽のシンボルがあるので「サービスとしての印象に残るもの」を打ち出しにくい
人っぽいキャラクター
妖精っぽいキャラクター
着地!
ご清聴ありがとうございました