Upgrade to PRO for Only $50/Year—Limited-Time Offer! 🔥
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GMOペパボ ECテックカンファレンス デザイナー登壇資料
Search
Shoko Oyamada
June 24, 2020
Design
3
1.1k
GMOペパボ ECテックカンファレンス デザイナー登壇資料
Shoko Oyamada
June 24, 2020
Tweet
Share
More Decks by Shoko Oyamada
See All by Shoko Oyamada
平均ユーザー像 ダッシュボードの作成 @カラーミーショップ
chocolatina
0
1k
UX JAM ONLINE #04 5万店舗を抱えるネットショップASPでの 「共感を生むデザイン」
chocolatina
0
510
popinsight.pdf
chocolatina
0
450
Other Decks in Design
See All in Design
Managing Design Systems (Antwerp 2024)
nathanacurtis
1
320
エンタメ業界からDX領域に飛び込んだデザイナーが今立ち向かっている壁とは / applibot-dx-designer
cyberagentdevelopers
PRO
1
110
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
3.8k
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
230
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜
tak073
0
140
Rayout Pattern 01
one0
0
330
DMMデザイン組織の生成AI導入プロセス - Adobe Fireflyと振り返る約1年とこれから -
takumasaito
1
580
Night Shift concept 9/15/2024
cpineda57
0
750
HCDフォーラム2024 「HCDとHAI ~人間とAIが共存する世界の実現~」
kamechi7222222
0
160
地図・デザイン・可視化 −情報をわかりやすく伝えるために−
hjmkth
2
520
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
760
Charcoal 2.0: デザインシステムの基盤を再構築
godlingkogami
1
530
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
365
19k
Building Your Own Lightsaber
phodgson
103
6.1k
The World Runs on Bad Software
bkeepers
PRO
65
11k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
890
Understanding Cognitive Biases in Performance Measurement
bluesmoon
26
1.4k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
480
Optimising Largest Contentful Paint
csswizardry
33
3k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
Transcript
カラーミーのデザインについて 1
1 カラーミーショップ CREチーム シニアデザイナー 小山田 翔子
カラーミーのデザインについて ペパボのサービスの中では最も 「これで生計を立てている」人が多い ユーザーは商いのプロ toBのサービスとして、 ユーザー理解が重要 6
カラーミーのデザインについて ショップ運営を通じて夢を叶える 6
カラーミーのデザインについて 叶えて欲しい夢 6
カラーミーのデザインについて 6 ユーザーをトータルに支える
カラーミーのデザインについて 6 ユーザーをトータルに支える
カラーミーのデザインについて 6 ユーザーをトータルに支える
カラーミーのデザインについて:PRチーム 4 ① サービスの認知拡大 ② お申込みを増やす
カラーミーのデザインについて:PRチーム 4 サイト SNS イベント 取次店 制作会社 オウンド メディア
広告 タッチポイント ユーザーとの 接点
カラーミーのデザインについて:PRチーム 4 https://shop-pro.jp/yomyom-colorme/
カラーミーのデザインについて:PRチーム 4 https://award.shop-pro.jp/ カラーミーショップ大賞
カラーミーのデザインについて:PRチーム 4 サイト制作 チラシ パンフレット
カラーミーのデザインについて:PRチーム 4 ABテスト フォームの最適化 ユーザーからの声
カラーミーのデザインについて:PRチーム 4 ユーザー理解 •どんなユーザーがいる? •悩みや課題は? •なにをやりたい? ページ設計 •共感 •欲しい情報をみつけやすい
•お申込みへのアクション
カラーミーのデザインについて 6 ユーザーをトータルに支える
カラーミーのデザインについて ショップ運営を通じて夢を叶える 6
カラーミーのデザインについて:CREチーム 6
カラーミーのデザインについて:CREチーム 6
カラーミーのデザインについて:CREチーム 6
カラーミーのデザインについて:CREチーム - ユーザーアンケート - ユーザーインタビュー - ユーザーテスト - お問い合わせ宛のご要望 6
ユーザー の声 ビジネス システム 改善 計画
カラーミーのデザインについて:CREチーム 6
カラーミーのデザインについて 6 ユーザーをトータルに支える
カラーミーのデザインについて:新カゴチーム 4 ショッピングカート
カラーミーのデザインについて:新カゴチーム 4 ショッピングカートの利用状況 決済件数 約550,000件 決済金額 約7,100,000,000円 (2020年3月版)
カラーミーのデザインについて:新カゴチーム 4 プロトタイプ 作成 ユーザビリティ テスト 数値分析 オーナー様の フィードバックを
もとに改善 デザイナーの役割
カラーミーのデザインについて:新カゴチーム 4 実際のお店に例えると 「このお店で買うのはやめよう...」 「次は他のお店で買うことにしよう...」 長蛇の列に並ぶレジ
対応の遅いレジ 現金払いのみのレジ
カラーミーのデザインについて:新カゴチーム 4 使い心地のよい購入画面 どのデバイスでも 決済できること 決済の選択肢が 多いこと ・最小限の入力フォーム ・入力ミスによる離脱防止
・スマホの小さな画面からも 購入しやすく ・LINE Pay、Amazon Pay、 楽天Payなど 入力しやすいこと
カラーミーのデザインについて:新カゴチーム 4 「最高のショッピングカート」 カラーミーショップのショッピングカートは「買いやすい」。 「買いやすい」から、「売れる」。 こう言ってもらえるよう改善と検証を繰り返しています。
カラーミーのデザインについて 6 ユーザーをトータルに支える
1 カラーミーのデザインについて:グロースチーム
カラーミーのデザインについて:グロースチーム 課題1 ショップオーナーが「アプリとは何か」を知らない
カラーミーのデザインについて:グロースチーム 課題2 ショップオーナーにもデベロッパーにも伝わる用語を使わないといけない
カラーミーのデザインについて:グロースチーム この課題を解決するために行ったこと
カラーミーのデザインについて:グロースチーム
カラーミーのデザインについて:グロースチーム
ファーストパーティ アプリ開発 9
カラーミーのデザインについて:アプリ開発チーム 6 ショップページ カートページ 購入完了(配送) リピート カゴ落ち (一般に70%) ミスマッチ 来訪数
電話やFAXで注文したい… 商品の在庫切れてる … 卸値で買いたい…
ユーザーを知る 9
カラーミーのデザインについて:アプリ開発チーム 6 ニーズの事前把握 気づかないポイントに気づく インタビュー ユーザーテスト
カラーミーのデザインについて:アプリ開発チーム 6 FAXでの受注時、入力をお願いする 項目は何ですか? 商品名・数量・住所・希望納品日 (食べ 物・冷凍冷蔵のため)…etc 電話・FAX受注で時間がかかっている 運用を教えて下さい。 例)
一般と業者で割引率が異なり、作 業に時間かかってしまう…etc … インタビュー • 自分達で決めた要件は 満たされている? • 現場の状況で困ってる ポイントはある? ニーズの事前把握
カラーミーのデザインについて:アプリ開発チーム 6 ユーザーテスト • ドメイン知識に気づく • 現場の状況に気づく • 思惑の違いに気づく 気づかなかったポイントに気づく
カラーミーのデザインについて
1
ここから素材だよ〜〜〜 ゆまゆありがと! 1
お役立ちリンク p14~15 デザインの簡単なガイド・TIPS p16-18 表・装飾用素材 p19~22 イラスト・ロゴ ・
目次 • はじめに • hogehogehoge • hogehogehoge • hogehogehoge
2
メインスライド1 本文はこちら 3
メインスライド3 (例) 本文はこちら本文はこちら本文はこちら本文はこちら本文はこちら • こんな使い方もできます • こんな使い方も よって本文はこちらよよって本文はこちらって本文はこちら。 リード文の追加
スライドの結論やポイントを最終行に入れるとわかりやすくなります。 6
メインスライド1 本文はこちら 4
メインスライド2 本文はこちら 本文はこちら 5
ブランクスライド 7
8
章見出しタイトル 大事なことを言う時も使えます 9
章見出しタイトル 大事なことを言う時も使えます 10
章見出しタイトル 大事なことを言う時も使えます 11
素材集 スライド用の素材、デザインのコツなど 12
配色、フォントサイズについて • 30px リード文など • 20px スライドタイトルなど • 18px 本文 13
デザインテクニックリンク集 • レイアウトを整えたい • グラフを綺麗に表示させたい • 配色に迷う 14
表・装飾用素材 ほげ ふが ぴよ ほげ ふが ほげ 123 1 2
3 56 ふが ぴよ ほげ ポイント 重要 重要 ポイント 15
表・装飾用素材 売れる仕組み ・ホゲホゲほげ ・ホゲホゲホゲホゲほげ ・ホゲホゲほげ 売れる仕組み ・ホゲホゲほげ ・ホゲホゲホゲホゲほげ ・ホゲホゲほげ
売れる仕組み ・ホゲホゲほげ ・ホゲホゲホゲホゲほげ ・ホゲホゲほげ 売れる仕組み ・ホゲホゲほげ ・ホゲホゲホゲホゲほげ ・ホゲホゲほげ 16
表・装飾用素材2 17 施策A 施策B 施策C 施策D
イラスト集 18
イラスト集 18
イラスト集 18
イラスト集 18
イラスト集 18
イラスト集 18
イラスト集 18
ロゴ集 19
PRエリア ホワイトペーパーなどの最後にお使いください 12
None
None
None
None
EC事業部のスライド【WIP】 ここにサブタイトルを入れます 1
目次 • はじめに • hogehogehoge • hogehogehoge • hogehogehoge 2
メインスライド1 本文はこちら 3
メインスライド3 (例) 本文はこちら本文はこちら本文はこちら本文はこちら本文はこちら • こんな使い方もできます • こんな使い方も よって本文はこちらよよって本文はこちらって本文はこちら。 リード文の追加
スライドの結論やポイントを最終行に入れるとわかりやすくなります。 6
メインスライド1 本文はこちら 4
メインスライド2 本文はこちら 本文はこちら 5
ブランクスライド 7
8
章見出しタイトル 大事なことを言う時も使えます 9
章見出しタイトル 大事なことを言う時も使えます 10
章見出しタイトル 大事なことを言う時も使えます 11