より良い体験を共にデザインするためにやってきたこと / What we did to design a better experience together

1 より良い体験を共にデザインするためにやってきたこと株式会社プレイド鈴⽊健⼀ ɹɹʛɹɹ© 2019 PLAID Inc.
2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ

AGENDA 2 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ ɹɹʛɹɹ© 2019
PLAID Inc. お話すること

PLAID Inc. お話すること話す⼈についてなぜ共にデザインする必要があるのか？誰とデザインしたのか？どのようにデザインしたのか？

INTRO 4 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ ɹɹʛɹɹ© 2019
PLAID Inc. 話す⼈について

5 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ ɹɹʛɹɹ© 2019 PLAID
Inc. ⾃⼰紹介 UIデザイナーデザインシステムに取組み中ダイエット中 35 鈴⽊健⼀株式会社プレイド twitter : @suk note : kenichisuzuki ⼀児の⽗元ケーキ職⼈川崎市在住銀座勤務リバウンド中

ɹɹʛɹɹ© 2019 PLAID Inc. 6 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT
ORGANIZATIONɹɹʛɹ 株式会社プレイドについて株式会社プレイド東京都中央区銀座6-10-1 GINZA SIX 10F 設⽴：2011年10⽉従業員：130名資本⾦：149,987,878円 ※資本準備⾦含む

ɹɹʛɹɹ© 2019 PLAID Inc. 7 yyyy.mm.ddɹɹʛɹɹEvent name hereɹɹʛɹ 株式会社プレイドについて OUR
MISSON データによって⼈の価値を最⼤化する

Inc. 株式会社プレイドについて $9 ސ٬ମݧ ϓϥοτϑΥʔϜ

Inc. 株式会社プレイドについて ֬ೝ͢Δ جຊαʔϏε΍͝ར༻ํ๏Λ͝঺հ͠·͢ɻ ͓ಘͳಛయ΍໾ཱͭ৘ใ͕ຬࡌͰ͢ɻ ॳΊͯͷํ΁ ְתּׅ然钠ׅ׷ 6*رؠ؎ش٦׌ֽוזַזַ♳麦׃זְծ➙ ״׶إٔؗ،حف׃׋ְהְֲ倯䗳铣דׅկ UIرؠ؎ش٦ָ濼׏גֶֻץֹ 7אךرؠ؎ٕٝ٦ٕ DESIGN RULES » CHECK ׆׏ה⢪ִ׷،؎ذي׌ֽ׾䲧ִת׃׋կ ֿך堣⠓׾ֶ鋅鷕׃זֻկ 窫㼎ծ 妜׃ְ ౙͷओ໾ɺ Ξ΢λʔ COLLECTION OUTER 嗚稊勴⟝׾㼰׃㢌刿ׅ׷׌ֽדծ֮ז׋ך椚䟝ך暟⟝ח⳿⠓ִ׷〳腉䚍ָ넝ֻז׶תׅկ 勴⟝׾㢌ִג嗚稊׃ג׫גֻ׌ְׁկ ׀䋞劄ך暟⟝כ 鋅אַ׶תׇ׿ד׃׋ַ ꟗׄ׷ ⼀⼈⼀⼈に合わせた顧客体験を設計 Webサイトの訪問者の⾏動を顧客ごとにリアルタイムに解析 $9 ސ٬ମݧ ϓϥοτϑΥʔϜ

PLAID Inc. お話することデザイナー・デザインエンジニア含め11名プロダクト、マーケティング、カスタマーサクセスの3領域に取り組んでいるデザインチームについて

WHY 12 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ ɹɹʛɹɹ© 2019
PLAID Inc. なぜ、共にデザインする必要があるのか？

13 ɹɹʛɹɹ© 2019 PLAID Inc. 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT
ORGANIZATIONɹɹʛɹ なぜ、共にデザインする必要があるのか？なぜ共にデザインするのか ?

ORGANIZATIONɹɹʛɹ なぜ、共にデザインする必要があるのか？デザイナーだけでは良い体験を設計するのが難しいからなぜ共にデザインするのか

Inc. “Design is too important to be left to designers” Raymond Loewy なぜ共にデザインするのか

Inc. “ ” Raymond Loewy デザインは、デザイナーだけに任せるには重要すぎるなぜ共にデザインするのか

ORGANIZATIONɹɹʛɹ なぜデザイナーだけだと難しいのかなぜ共にデザインするのか ?

ORGANIZATIONɹɹʛɹ なぜデザイナーだけだと難しいのか顧客理解の難しさ 1 なぜ共にデザインするのか

ORGANIZATIONɹɹʛɹ なぜデザイナーだけだと難しいのか技術理解の難しさ 2 なぜ共にデザインするのか

ORGANIZATIONɹɹʛɹ 顧客理解の難しさ 1 なぜ共にデザインするのか

ORGANIZATIONɹɹʛɹ 顧客理解の難しさ 1 利⽤⽬的広いデジタルマーケティング / カスタマーサポート / カスタマーサクセス / データ分析 / グロースハックなぜ共にデザインするのか

ORGANIZATIONɹɹʛɹ 1 利⽤⽬的広いデジタルマーケティング / カスタマーサポート / カスタマーサクセス / データ分析 / グロースハック変数が多い事業ドメイン / リテラシー / 企業サイズ / 利⽤部署 / 役割 / KPI,KGI なぜ共にデザインするのか顧客理解の難しさ

ORGANIZATIONɹɹʛɹ 技術理解の難しさ 2 なぜ共にデザインするのか

ORGANIZATIONɹɹʛɹ 技術理解の難しさ 2 計測技術に関する知識リアルタイム解析 / 機械学習 / 統計学なぜ共にデザインするのか

ORGANIZATIONɹɹʛɹ 技術理解の難しさ 2 計測技術に関する知識リアルタイム解析 / 機械学習 / 統計学技術戦略に対する理解 API / エコシステム / プラットフォーム構想なぜ共にデザインするのか

ORGANIZATIONɹɹʛɹ 技術理解の難しさ 2 顧客理解の難しさ 1 なぜ共にデザインするのか

ORGANIZATIONɹɹʛɹ 技術理解の難しさ 2 顧客理解の難しさ 1 なぜ共にデザインするのかどうすれば？

ORGANIZATIONɹɹʛɹ 技術理解の難しさ 2 顧客理解の難しさ 1 なぜ共にデザインするのか共にデザインする

ORGANIZATIONɹɹʛɹ 技術理解の難しさ 2 顧客理解の難しさ 1 なぜ共にデザインするのか共にデザインする誰とデザインしたのか？

WHO 31 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ ɹɹʛɹɹ© 2019
PLAID Inc. 誰とデザインしたのか？

ORGANIZATIONɹɹʛɹ 誰とデザインしたのか？誰とデザインしたのか ?

ORGANIZATIONɹɹʛɹ 誰とデザインしたのか？ 1 カスタマーサクセスクライアントへの提案やサポートをしているドメイン知識・顧客理解の視点誰とデザインしたのか

ORGANIZATIONɹɹʛɹ 誰とデザインしたのか？ 2 エンジニア対象とする機能の仕様に精通している技術理解の視点誰とデザインしたのか

ORGANIZATIONɹɹʛɹ 1 カスタマーサクセスチーム内に不在なのでチーム外のメンバーに協⼒を仰ぐ誰とデザインしたのか

ORGANIZATIONɹɹʛɹ 2 エンジニアフォーカスチーム内のエンジニアと⼀緒に取り組む 1 カスタマーサクセスチーム内に不在なのでチーム外のメンバーに協⼒を仰ぐ誰とデザインしたのか

デザインキャリアの構造 37 ɹɹʛɹɹ© 2019 PLAID Inc. 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN
PRODUCT ORGANIZATIONɹɹʛɹ 2 エンジニアフォーカスチーム内のエンジニアと⼀緒に取り組む 1 カスタマーサクセスチーム内に不在なのでチーム外のメンバーに協⼒を仰ぐどのようにデザインしたのか？これらのメンバーと、

HOW 39 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ ɹɹʛɹɹ© 2019
PLAID Inc. どのようにデザインしたのか？

ɹɹʛɹɹ© 2019 PLAID Inc. 40 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT
ORGANIZATIONɹɹʛɹ やっていること既存画⾯の改善プロジェクトの場合やっている⼈杞ְ걄㚖ד׮䞔㜠׾㢳ֻⰅ׸鴥׫זָ׵ծ〳铣䚍׾䬐⥂ׅ׷׋׭ח妌俑דכ3PCPUP׾䱰欽կㄤ俑כ/PUP4BOT׾竰竲կ醱侧遤ذؗأزך㜥さծぐ؟؎ؤך㛇彊⦼הז׷MJOF IFJHIU׮㹀纏׃גְֻկ TYPOGRAPHY BAISU DESIGN SYSTEM for KARTE Noto Sans CJK JP ֮ font-family: ㄤ俑ה妌俑כ׉׸׊׸〸鎸׾䱰欽 Roboto Aa for title: font-weight:bold 鋅⳿׃הז׷俑㶵銲稆ח㼎׃ג黝欽կؐؑ؎ زכCPMEך׫կ鋅⳿׃ח♧顐䚍׾䭯׋ׇ׷׋ ׭חծOPSNBMכ黝欽׃זְկ typo-default rgba(0,16,14,0.8) font-size:24px line-height:36px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸ כת׌搀ְկוֿד欰 ׸׋ַה׿ה鋅䔲ָא ַטկ font-size:20px line-height:32px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת ׌搀ְկוֿד欰׸׋ַה ׿ה鋅䔲ָאַטկ font-size:16px line-height:28px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀 ְկוֿד欰׸׋ַה׿ה鋅䔲ָ אַטկ for title: font-weight:bold 鋅⳿׃הז׷俑㶵銲稆ח㼎׃ג黝欽կؐؑ؎ font-size:24px line-height:36px グ鰳כ枾ד֮׷կ font-size:20px line-height:32px グ鰳כ枾ד֮׷կ font-size:16px line-height:28px グ鰳כ枾ד֮׷կ ؝ٝه٦طٝز⚥ך鸐䌢ך俑㶵⴨ח黝欽կ䞔㜠ך珏겲׾⮚⯓䏝➰׃ծꅾ銲䏝ח䘔ׄגؐؑ ؎ز׾⢪ְⴓֽ׷կ typo-default rgba(0,16,14,0.8) for paragraph: font-size:14px line-height:24px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկו ֿד欰׸׋ַה׿ה鋅䔲ָאַטկ⡦ ד׮謬农ְׄ׭ׄ׭׃׋䨽דصٍ٦ صٍ٦岛ְגְ׋✲׌ֽכ鎸䥉׃גְ ׷կ font-size:12px line-height:20px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկוֿד欰 ׸׋ַה׿ה鋅䔲ָאַטկ⡦ד׮謬农ְׄ ׭ׄ׭׃׋䨽דصٍ٦صٍ٦岛ְגְ׋✲׌ ֽכ鎸䥉׃גְ׷կグ鰳כֿֿד㨣׭ג➂꟦ הְֲ׮ך׾鋅׋կ font-size:10px line-height:16px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկוֿד欰׸׋ַה׿ ה鋅䔲ָאַטկ⡦ד׮謬农ְׄ׭ׄ׭׃׋䨽דصٍ٦ صٍ٦岛ְגְ׋✲׌ֽכ鎸䥉׃גְ׷կグ鰳כֿֿד 㨣׭ג➂꟦הְֲ׮ך׾鋅׋կ׃ַ׮֮הד耀ֻה׉׸ כ剅欰הְֲ➂꟦⚥ד♧殢样䝤ז珏做ד֮׏׋׉ֲ׌կ font-weight:normal line-height:24px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկו ֿד欰׸׋ַה׿ה鋅䔲ָאַטկ⡦ ד׮謬农ְׄ׭ׄ׭׃׋䨽דصٍ٦ صٍ٦岛ְגְ׋✲׌ֽכ鎸䥉׃גְ ׷կ font-weight:normal line-height:20px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկוֿד欰 ׸׋ַה׿ה鋅䔲ָאַטկ⡦ד׮謬农ְׄ ׭ׄ׭׃׋䨽דصٍ٦صٍ٦岛ְגְ׋✲׌ ֽכ鎸䥉׃גְ׷կグ鰳כֿֿד㨣׭ג➂꟦ הְֲ׮ך׾鋅׋կ font-weight:normal line-height:16px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկוֿד欰׸׋ַה׿ ה鋅䔲ָאַטկ⡦ד׮謬农ְׄ׭ׄ׭׃׋䨽דصٍ٦ صٍ٦岛ְגְ׋✲׌ֽכ鎸䥉׃גְ׷կグ鰳כֿֿד 㨣׭ג➂꟦הְֲ׮ך׾鋅׋կ׃ַ׮֮הד耀ֻה׉׸ כ剅欰הְֲ➂꟦⚥ד♧殢样䝤ז珏做ד֮׏׋׉ֲ׌կ for caption: ؝ٝه٦طٝز⚥ך鸐䌢ך俑㶵⴨ח黝欽կ䞔㜠ך珏겲׾⮚⯓䏝➰׃ծⶰ如涸ז䞔㜠ח㼎׃ ג黝欽ׅ׷կ typo-caption rgba(0,16,14,0.55) font-size:14px line-height:24px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկו ֿד欰׸׋ַה׿ה鋅䔲ָאַטկ⡦ ד׮謬农ְׄ׭ׄ׭׃׋䨽דصٍ٦ صٍ٦岛ְגְ׋✲׌ֽכ鎸䥉׃גְ ׷կ font-size:12px line-height:20px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկוֿד欰 ׸׋ַה׿ה鋅䔲ָאַטկ⡦ד׮謬农ְׄ ׭ׄ׭׃׋䨽דصٍ٦صٍ٦岛ְגְ׋✲׌ ֽכ鎸䥉׃גְ׷կグ鰳כֿֿד㨣׭ג➂꟦ הְֲ׮ך׾鋅׋կ font-size:10px line-height:16px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկוֿד欰׸׋ַה׿ ה鋅䔲ָאַטկ⡦ד׮謬农ְׄ׭ׄ׭׃׋䨽דصٍ٦ صٍ٦岛ְגְ׋✲׌ֽכ鎸䥉׃גְ׷կグ鰳כֿֿד 㨣׭ג➂꟦הְֲ׮ך׾鋅׋կ׃ַ׮֮הד耀ֻה׉׸ כ剅欰הְֲ➂꟦⚥ד♧殢样䝤ז珏做ד֮׏׋׉ֲ׌կ font-weight:normal line-height:24px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկו ֿד欰׸׋ַה׿ה鋅䔲ָאַטկ⡦ ד׮謬农ְׄ׭ׄ׭׃׋䨽דصٍ٦ صٍ٦岛ְגְ׋✲׌ֽכ鎸䥉׃גְ ׷կ font-weight:normal line-height:20px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկוֿד欰 ׸׋ַה׿ה鋅䔲ָאַטկ⡦ד׮謬农ְׄ ׭ׄ׭׃׋䨽דصٍ٦صٍ٦岛ְגְ׋✲׌ ֽכ鎸䥉׃גְ׷կグ鰳כֿֿד㨣׭ג➂꟦ הְֲ׮ך׾鋅׋կ font-weight:normal line-height:16px グ鰳כ枾ד֮׷կ グ鰳כ枾ד֮׷կせ⵸כת׌搀ְկוֿד欰׸׋ַה׿ ה鋅䔲ָאַטկ⡦ד׮謬农ְׄ׭ׄ׭׃׋䨽דصٍ٦ صٍ٦岛ְגְ׋✲׌ֽכ鎸䥉׃גְ׷կグ鰳כֿֿד 㨣׭ג➂꟦הְֲ׮ך׾鋅׋կ׃ַ׮֮הד耀ֻה׉׸ כ剅欰הְֲ➂꟦⚥ד♧殢样䝤ז珏做ד֮׏׋׉ֲ׌կ bg-palegray rgba(0,16,14,0.03) ك٦أؕٓ٦ה׃גծ⟃♴ך葿׾㹀纏׃גְתׅկIPWFSװBDUJWFזו朐䡾㢌⻉ך葿חאְגכծ׉׸׊׸ךBUPNTװDPNQPOFOUTⰻדꟗׄג㹋鄲ׅ׷׮ךה׃ծ害欽DMBTTה׃ג כꟚ佝׃זְֿהד醱꧟ָׁ㟓ִ׷ֿה׾꣇ֺתׅկ COLOR BAISU DESIGN SYSTEM for KARTE bg-lightgray rgba(0,16,14,0.06) bg-darkgray rgba(0,16,14,0.8) bg-gray rgba(0,16,14,0.55) bg-karte #2AAB9F bg-white #FFFFFF bg-transparent transparent typo-default rgba(0,16,14,0.8) typo-critical #C42F27 typo-success #1D76BF typo-attention #EF9816 text color 俑㶵כرؿٕؓزהٍؗفءّٝ欽 ך珏겲׾ك٦أחծ农ְ胜兝欽ך ⿾鯄晛׾欽䠐կ ؕٓ٦؝٦سדכזֻSHCBד䭷㹀ׅ ׷ֿהדծ胜兝葿ח꼧厩׬״ֲח׃ גְתׅկ ׉ך➭ծ،ٓ٦ز邌爙װ،ٓ٦ز، ؎؝ٝ׾䟝㹀׃׋葿׾珏겲欽䠐կ background color 葿ך؎ً٦آ׾䊩〸ׁ׸׋ֻזְ׮ ךـٓٝسؕٓ٦ծ،ٓ٦زؕ ٓ٦חאְגכؕٓ٦؝٦سד䭷㹀կ 鷲僇䏝׾䭯׋ׇ׷ֿהדծꅾי׋ה ֹך䭁䓸䚍׾׮׋ׇ׋ְؚٖ٦أ ؛٦ٕ禸ך葿חאְגכSHCBד䭷㹀 ׃גְתׅկ typo-caption rgba(0,16,14,0.55) typo-default-invert rgba(255,255,255,1) typo-caption-invert rgba(255,255,255,0.55) BUTTON BAISU DESIGN SYSTEM for KARTE rule نةٝ銲稆כ〸鎸ך銲稆ך穈׫さ ׻ׇד圓䧭׃גְתׅկ theme 俑㶵؟؎ؤծ俑㶵葿ծ胜兝葿ծ ぐ珏أذ٦ز׾㹀纏 _primary _basicLight _basicDark _support size 넝ׁծ俑㶵؟؎ؤ׾♳剅ֹ small middle large decoration ،؎؝ٝך剣搀ծ⡘縧׾㹀纏 plain icon-left icon-right icon text color typo-default-invert rgba(255,255,255,1) alpha:0.3 rgba(255,255,255,0.3) _basicDark CBTJDכծQSJNBSZך如חꅾ銲ז، ؙءّٝח欽ְ׷نةٝדׅկ胜兝葿ח䘔ׄגծMJHIUהEBSL׾⢪ְⴓ ֽגֻ׌ְׁկ نةٝٓكٕ default :hover :active :disabled aria-busy="false" aria-busy="true" نةٝٓكٕ نةٝٓكٕ نةٝٓكٕ نةٝٓكٕ نةٝٓكٕ نةٝٓكٕ نةٝٓكٕ preview bg-white preview bg-dark bg color bg-gray rgba(0,16,14,0.55) bg-gray rgba(0,16,14,0.55) alpha:75% rgba(0,16,14,0.75) alpha:75% rgba(0,16,14,0.75) alpha:30% rgba(0,16,14,0.3) _basicLight CBTJDכծQSJNBSZך如חꅾ銲ז، ؙءّٝח欽ְ׷نةٝדׅկ胜兝葿ח䘔ׄגծMJHIUהEBSL׾⢪ְⴓ ֽגֻ׌ְׁկ text color نةٝٓكٕ default نةٝٓكٕ :hover نةٝٓكٕ :active نةٝٓكٕ :disabled preview typo-default rgba(0,16,14,0.8) alpha:0.2 rgba(0,16,14,0.2) bg color bg-lightgray rgba(0,16,14,0.06) bg-lightgray rgba(0,16,14,0.06) alpha:20% rgba(0,16,14,0.2) alpha:20% rgba(0,16,14,0.2) alpha:3% rgba(0,16,14,0.03) aria-busy="false" aria-busy="true" _primary QSJNBSZכծ♧鸬ךفٗإأךꟚ㨣 ♧鸬ךفٗإأ׾如ח鹌׭׷♧ 鸬ךفٗإأך㸣✪זוծ歗꬗ⰻד 剑׮ꅾ銲ז،ؙءّٝ׾爙ׅꥷח欽 ְתׅկ نةٝٓكٕ default نةٝٓكٕ :hover نةٝٓكٕ :active aria-busy="false" aria-busy="true" bg-karte #2AAB9F bg-karte #2AAB9F +black20% #21887F +white20% #54BBB2 typo-default-invert rgba(255,255,255,1) alpha:0.3 rgba(255,255,255,0.3) نةٝٓكٕ :disabled +black20% #21887F _critical DSJUJDBMכծ⵴ꤐװ鍑秈זוծ灶㠨涸٥♶〳鷞涸ז،ؙءّٝ׾爙ׅꥷ نةٝٓكٕ default نةٝٓكٕ :hover نةٝٓكٕ :active aria-busy="false" aria-busy="true" نةٝٓكٕ :disabled _support TVQQPSUכծQSJNBSZװCBTJDח➰ꥤ ׃ծ㼎חז׷،ؙءّٝח欽ְ׷ن ةٝדׅկ⢽⥂㶷ח㼎ׅ׷ٍؗ ٝإٕկ鷄⸇ח㼎ׅ׷⵴ꤐ text color نةٝٓكٕ default نةٝٓكٕ :hover نةٝٓكٕ :active نةٝٓكٕ :disabled preview typo-default rgba(0,16,14,0.8) alpha:0.2 rgba(0,16,14,0.2) bg color transparent rgba(0,16,14,0) alpha:6% rgba(0,16,14,0.06) alpha:10% rgba(0,16,14,0.1) transparent rgba(0,16,14,0) alpha:3% rgba(0,16,14,0.03) aria-busy="false" aria-busy="true" bg-white #FFFFFF FORM BAISU DESIGN SYSTEM for KARTE input text input type QMBDFIPMEFS bg-white #FFFFFF 1px solid rgba(0,16,14,0.2) 1px solid rgba(0,16,14,0.2) 1px solid rgba(0,16,14,0.1) ˒ 2px solid #EF9816 bg-white #FFFFFF bg-white #FFFFFF bg-white #FFFFFF bg-white #FFFFFF bg color border text color preview QMBDFIPMEFS QMBDFIPMEFS default ذؗأز disable ذؗأز inputed hover focus ذؗأز error validarion message ذؗأز ؒٓ٦ⰻ㺁׾铡僇ׅ׷ذؗأز default disable inputed hover button-hover button-click focus error 涯胜兝晛׾㹀纏կ 랲胜兝晛חאְגכ歗꬗⡲䧭ך堣⠓ ָדֹ׋ة؎ىؚٝד嗚鎢ׅ׷կ ˒ ˒ ˒ typo-default rgba(0,16,14,0.8) typo-default rgba(0,16,14,0.8) alpha:0.3 rgba(0,16,14,0.3) alpha:0.2 rgba(0,16,14,0.2) 2px solid rgba(0,16,14,0.06) 2px solid #2AAB9F ﬂoating label color ˒ typo-default rgba(0,16,14,0.8) typo-default rgba(0,16,14,0.8) alpha:0.3 rgba(0,16,14,0.3) alpha:0.2 rgba(0,16,14,0.2) ˒ ٓكָٕⰅ׶תׅ QMBDFIPMEFS ٓكָٕⰅ׶תׅ QMBDFIPMEFS ٓكָٕⰅ׶תׅ Ⰵ⸂幥׫ذؗأز QMBDFIPMEFS ٓكָٕⰅ׶תׅ ٓكָٕⰅ׶תׅ IPHF ٓكָٕⰅ׶תׅ ذؗأزذؗأز ﬂoating label ذؗأزذؗأز _middle _large font-size padding height 12px 14px 32px 40px ذؗأزذؗأز size 넝ׁה䊩〸ךQBEEJOHծ 俑㶵؟؎ؤ׾㹀纏կ ذؗأزذؗأز ذؗأزذؗأز 12px 12px preview default :hover :disabled selected karte-green #2AAB9F ˒ デザインシステムで定義した内容を、昔から存在している画⾯に対して適⽤していくプロジェクト。どのようにデザインしたのか

HOW 41 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ ɹɹʛɹɹ© 2019
PLAID Inc. どのようにデザインしたのかエンジニアとの取り組みカスタマーサクセスとの取り組みチーム全員との取り組み

ORGANIZATIONɹɹʛɹ CS カスタマーサクセスとの取り組みどのようにデザインしたのか ?

ORGANIZATIONɹɹʛɹ インタビューイシュー棚卸し CS カスタマーサクセスとの取り組みどのようにデザインしたのか

改善対象の画⾯に課題感を持っているメンバーにインタビューを実施。感じている課題や、もらうことが多い要望について情報を集めた。 44 ɹɹʛɹɹ© 2019 PLAID Inc.
2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ インタビューどのようにデザインしたのか / カスタマーサクセスとの取り組み

深堀りしたい時は、クライアントに直接インタビューしにいった。 45 ɹɹʛɹɹ© 2019 PLAID Inc. 2019.12.17ɹɹʛɹɹDESIGN IT!
#1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ インタビューどのようにデザインしたのか / カスタマーサクセスとの取り組み

CSのメンバーを中⼼に、クライアントとの会話やチャットサポートで上がった要望を github issueにストックしてくれている。 46 ɹɹʛɹɹ© 2019 PLAID Inc.
2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ イシュー棚卸しどのようにデザインしたのか / カスタマーサクセスとの取り組み

対象となる画⾯に関するissueに全て⽬を通すことにより、課題理解と、解くべき課題のスコープ決めにつながった。 47 ɹɹʛɹɹ© 2019 PLAID Inc.
2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ イシュー棚卸しどのようにデザインしたのか / カスタマーサクセスとの取り組み

ORGANIZATIONɹɹʛɹ Dev エンジニアとの取り組みどのようにデザインしたのか ?

ORGANIZATIONɹɹʛɹ デザインの逆⾏分析仕様の構造化 Dev エンジニアとの取り組みどのようにデザインしたのか

既存画⾯に存在している要素をひとつずつ⾒ながら「⾒える情報」と「できる操作」のような形で分解することで、デザイナーの仕様理解につなげる取り組み。 50 ɹɹʛɹɹ©
2019 PLAID Inc. 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ デザインの逆⾏分析どのようにデザインしたのか / エンジニアとの取り組み

対象画⾯で表⽰される情報の分岐ロジックや、表⽰されるデータのオブジェクト・モデルの構造を、エンジニアさんに図⽰してもらった。 51 ɹɹʛɹɹ©
2019 PLAID Inc. 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN PRODUCT ORGANIZATIONɹɹʛɹ 仕様の構造化どのようにデザインしたのか / エンジニアとの取り組み

ORGANIZATIONɹɹʛɹ どのようにデザインしたのか / エンジニアとの取り組み https://note.com/kenichisuzuki/n/n5c93b886f1be UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話

All 53 ɹɹʛɹɹ© 2019 PLAID Inc. 2019.12.17ɹɹʛɹɹDESIGN IT! #1 DESIGN
PRODUCT ORGANIZATIONɹɹʛɹ チーム全員との取り組みどのようにデザインしたのか ?

PRODUCT ORGANIZATIONɹɹʛɹ チーム全員との取り組みインタビュー/分析デザインレビューユーザビリティテストどのようにデザインしたのか

ORGANIZATIONɹɹʛɹ どのようにデザインしたのか / チーム全員との取り組み全員でインタビューと分析に取り組む事で、課題やクライアントの状況について共通認識を持ち会話することができた。前提が揃うため、建設的∕具体的なデザインレビューにつながった。インタビュー/分析を全員で実施

ORGANIZATIONɹɹʛɹ どのようにデザインしたのか / チーム全員との取り組み全員でインタビューと分析に取り組む事で、課題やクライアントの状況について共通認識を持ち会話することができた。前提が揃うため、建設的∕具体的なデザインレビューにつながった。インタビュー/分析を全員で実施 σβΠφʔA σβΠφʔB σβΠφʔC

ORGANIZATIONɹɹʛɹ どのようにデザインしたのか / チーム全員との取り組みヒアリングしたCSメンバーに対し、改善の意図と変更点をまとめたpaperと、設計の議論がストックされたmiroを共有。フィードバックを得た。多職種を巻き込んでデザインレビューを実施

ORGANIZATIONɹɹʛɹ どのようにデザインしたのか / チーム全員との取り組みリモートテストツールLookbackを使いユーザビリティテストを実施。メンバー全員が同席できたことで、課題を⾃分ごと化しやすくなった。ユーザビリティテストに全員が同席インタビュアー観察&メモ観察&メモ観察観察現場グループリモートグループ

ORGANIZATIONɹɹʛɹ どのようにデザインしたのか / チーム全員との取り組み https://note.com/hagipen/n/n5d61b6f0667d Lookbackを使ってユーザビリティテストをしたらとても良かった話

ORGANIZATIONɹɹʛɹ 他職種とより良い関係性をつくるためにやってみたことどのようにデザインしたのか ?

ORGANIZATIONɹɹʛɹ 他職種とより良い関係性をつくるためにやってみたことボール拾いポジティブ野郎 Slackの奴隷どのようにデザインしたのか

ORGANIZATIONɹɹʛɹ どのようにデザインしたのか / その他やったことスキマ時間で対応できるものであれば、他チームで起きているデザイン系のタスクも取りに⾏った。逆に協⼒してほしい事がある時に⼒を借りれるようになってきた。ボール拾い

ORGANIZATIONɹɹʛɹ どのようにデザインしたのか / その他やったこと意図しない変更があっても前向きに捉えた発⾔することで、次から巻き込んでもらえるように（したいという願望）ポジティブ野郎

ORGANIZATIONɹɹʛɹ どのようにデザインしたのか / その他やったこと情報を素早くキャッチアップして、先⼿を打てるようにした。開発中の機能やデザインに対して気付けるように、 Slackのチャンネルめちゃ⼊ったり、マイワードめちゃ登録したりしたり、ハブとなる⼈の発⾔ストーキングしたりした。情報過多になりすぎたので今はやめてる.. Slackの奴隷

Inc. どのようにデザインしたのか / その他やったこと

Inc. 今⽇お話したことより良い体験を共にデザインするためにやってきたこと

Inc. 今⽇お話したことなぜ共にデザインする必要があるのか？誰とデザインしたのか？どのようにデザインしたのか？

ORGANIZATIONɹɹʛɹ なぜ、共にデザインする必要があるのか？デザイナーだけでは良い体験を設計するのが難しいから今⽇お話したこと

ORGANIZATIONɹɹʛɹ 技術理解の難しさ 2 顧客理解の難しさ 1 今⽇お話したこと

ORGANIZATIONɹɹʛɹ 誰とデザインしたのか？ ? 今⽇お話したこと

ORGANIZATIONɹɹʛɹ 2 エンジニアフォーカスチーム内のエンジニアと⼀緒に取り組む 1 カスタマーサクセスチーム内に不在なのでチーム外のメンバーに協⼒を仰ぐ今⽇お話したこと

ORGANIZATIONɹɹʛɹ インタビューイシュー棚卸し CS カスタマーサクセスとの取り組み今⽇お話したこと

ORGANIZATIONɹɹʛɹ デザインの逆⾏分析仕様の構造化 Dev エンジニアとの取り組み今⽇お話したこと

PRODUCT ORGANIZATIONɹɹʛɹ チーム全員との取り組みインタビュー/分析デザインレビューユーザビリティテスト今⽇お話したこと

ORGANIZATIONɹɹʛɹ 他職種とより良い関係性をつくるためにやってみたことボール拾いポジティブ野郎 Slackの奴隷今⽇お話したこと

Inc. デザイナーの仕事

Inc. デザイナーの仕事良い体験につなげる

Inc. デザイナーの仕事良い体験につなげるマーケティングセールスカスタマーサクセスエンジニア

Inc. デザイナーの仕事良い体験につなげるマーケティングセールスカスタマーサクセスエンジニアための、ひとつのチーム

Inc. デザイナー側マーケティング側セールス側カスタマーサクセス側エンジニア側

Inc. デザイナーだからマーケティングだからセールスだからカスタマーサクセスだからエンジニアだから

Inc. デザイナー良い体験につなげるマーケティングセールスカスタマーサクセスエンジニア

Inc. より良い体験を共にデザインする

Inc. 共にデザインしていきましょう

Inc. 共にデザインしてください PR

Inc. ありがとうございました！

より良い体験を共にデザインするためにやってきたこと / What we did to desi...

より良い体験を共にデザインするためにやってきたこと / What we did to design a better experience together

More Decks by Kenichi Suzuki

Other Decks in Design

Featured

Transcript