デザイン組織のUX

InHouseDesigners #1 組織の中でデザイン品質を高める取り組み で発表させていただきました。
https://in-house-designers.connpass.com/event/78653/

Transcript

1. デザイン組織のUX 10以上のオウンドメディアに デザインシステムを導入するために
2. 誰なの？ レバレジーズ株式会社 デザイナー 小林 信也 周囲の環境によって肩書きは変わりつつも 14年くらいデザイナー。横断型。 2018年レバレジーズに入社。
3. 話すこと 話さないこと デザイン組織の課題解決のために実際にやったことのプロセス デザインシステムの具体的な仕様や導入による効果 （現在、鋭意導入中なので。。）
4. レバレジーズって？ 設立 2005年 事業内容 自社メディア事業 人材関連事業 システムエンジニアリング事業 M&A支援事業 従業員数 1899名以上（グループ全体）※2016年度 うちデザイナー20名程度 マーケとデザイナーの平均年齢約27歳 マーケとデザイナーのうち約７割が新卒入社 売上高 195億 ※2016年度
5. レバレジーズが運営しているオウンドメディア
6. 人員バランス マーケター ディレクター 　 エンジニア セールス デザイナー ※企画・管理職は除く。
7. 組織体制 デザイナー ディレクター エンジニア A事業部 B事業部 C事業部 マーケティング部 セールス エンジニア セールス ディレクター エンジニア セールス デザイナー ディレクター デザイナー
8. 入社してすぐ…。
9. デザインシステムを作って、 効率化したい。 会社からの要求
10. デザインシステムを作って、 効率化したい。 まずは全体の課題の共有を！ 会社からの要求
11. • これはシステム案件でも広告・ブランディング案件でもサービス施策でも同じ。 • 課題の本質から解決することが結果的に近道になることを理解してもらう。 顧客の要求がそのまま要件になるとは限らない。
12. デザインシステムとは？ 原則 コーディング バージョン管理 コードレビュー • デザインの原則、ルールなどの抽象的な概念を明文化・可視化したもの • デザインの構造や制作のプロセスも可視化する • システムを作ることで、属人性が小さくなり、効率化できる。 グラフィック デザイン プロトタイピング UIデザイン バージョン管理 デザインレビュー 通知 通知
13. 現状を理解する。 ALMinium タスク管理 情報共有(チャット) ワイヤーフレーム コード管理 開発環境 BI 情報共有(ストック系)
14. デザインの現状… • 基本はPhotoshopで制作 • ファイル管理がメディアごとにバラバラ • バージョン管理ができてない • そもそもデザインファイルを修正せずにCSSをいじってる • レビューのプロセスが残っていない→属人化 • 品質もメディアごとにバラツキ
15. 課題を抽象化する
16. 課題の整理と施策の実行をどうやって進めるか 課題の抽象化・整理能力 施策の立案・実行能力
17. 課題の抽象化はロジカル思考とヒアリング能力。 • 観察・ヒアリングから、課題の整理と優先度付を体系化。 • 個別の表層の課題から、本質の課題を抽象化していく。 • 組織や人に依存する問題か、システムやツールを導入すれば済む問題かで切り分 け。 • 組織の強みの分析(SWOT分析)も同時にやる。
18. 施策の立案・実行は専門知識＋UX的思考が必要。 • 実際に人を動かすには組織固有の現場の理解と共感が不可欠。 • プロセスの可視化。 • コミュニケーション。伝え方が大事。 • トップダウンでなく、現場から自然と声が上がるような雰囲気づくり。 • ツール（やり方）を変更すれば解決する問題は、コンセンサスを取ってツールを変え てみる。
19. 社内施策はサービスと考える。 • 社内向けの施策は「社員＝ユーザーに向けたサービス」と考える。 • 見える、知っているユーザーが故の難しさ ◦ 立場上のリスク ◦ ユーザーを選べない ◦ 同調圧力 ◦ 過去の成功体験 ◦ お互いに認知バイアスがかかった状態
20. 16% キャズム理論 キャズム イノベーター アーリー アダプター アーリー マジョリティー レイト マジョリティー ラガード
21. キャズム理論 キャズム 安心 新しさ キャズム イノベーター アーリー アダプター アーリー マジョリティー レイト マジョリティー ラガード
22. キャズム理論 新しい試みは最初から全ての人に理解されないという前提に立つ。 まずは行動力・拡散力が高い層に理解してもらうこと。 安心 新しさ キャズム イノベーター アーリー アダプター アーリー マジョリティー レイト マジョリティー ラガード
23. イノベーション要件 比較優位性 適合性 わかりやすさ 試用可能性 可視性
24. 入社して1ヶ月後。
25. まず、デザインシステムの議論・共有用のSlackチャンネルを作って
26. 感じた課題を共有。
27. 課題共有にあたって。 • 既存のシステムやデザイン批判にならないことが大事。 ◦ 時間が経てばシステムは古くなる、という前提に立つ。 ◦ 最適化よりも事業の成長スピードを優先するのは当然。 ◦ 対立構造をつくらない。 • 大きく変えるには、コミュニケーションの必要性と、それなりのエネルギーと協力が 必要、ということを理解してもらう。
28. デザイナー中心にアンケート • 10問程度のアンケートを実施して課題を定量的計測。
29. デザイナーに課題をヒアリング • デザイナー全員に対面でデプスインタビュー。 デザインルー ルがない なぜ？ 時間がない。 リソースがない。 本当に時間が ないのか？ 他の取り組みの方が 優先度が高いと思っ ているから 本当に重要だと 感じていない 課題は？ なぜ必要性を 感じない？ 実は過去に作られたデザイン ガイドラインがあるが 運用されていない デザイナー1人で 完結する体制 ディレクターの 不在
30. デザイナーのスキルについて
31. 専門知識 専門知識 制作会社と事業会社 制作会社 事業会社 業界知識 業界知識 業界知識 業界知識 業界知識
32. 企画、設計から実装まで求められるデザイナー 体験設計 情報設計 UI デザイン ビジュアル デザイン HTML/ CSS実装 JS実装
33. 必然的に広く浅いスキルセットになる 体験設計 情報設計 UI デザイン ビジュアル デザイン HTML/ CSS実装 JS実装 ・競合調査 ・市場調査 ・ユーザーリサーチ ・データ分析 ・施策プランニング ・A/Bテスト ・パーソナライズ ・SEO ・サイトマップ ・ワイヤーフレーム ・ライティング ・ユーザービリティ ・アクセシビリティ ・プロトタイピング ・Atomic Design ・ピクトグラム ・インタラクション ・HTML/CSSの知識 ・iOS/Androidの知識 ・CI/VI設計 ・グラフィック ・タイポグラフィ ・アートディレクション ・撮影ディレクション ・映像編集 ・HTML5 ・CSS設計 ・Sass ・アニメーション ・効率化 ・開発環境構築 ・ES6 ・SPA ・PWA/AMP ・ビルドツール ・サーバサイド連携 ・最適化の知識 ・開発環境構築 しかも必要なスキルはアップデートされていく。
34. パーティーに赤魔道士しかいない状態 赤魔道士 一言で言うと器用貧乏型。攻撃魔法も回復魔法も物理攻撃もそつなくこなす。 序盤では活躍するものの、終盤になるにつれて他の専門魔道士系と差が開き、使いづらくなる。
35. 何が問題なのか？ • 組織から見た問題 ◦ イノベーションが起きにくい ◦ １人で仕事をこなすため、属人性が高まる ◦ 高いレベルの品質・技術を求められる局面で打開できない • 個人のキャリアから見た問題 ◦ 若いうちは重宝されるが、年齢を重ねるにつれ頭打ちになり、特徴のない存在に ◦ すでに先人が築いた領域の中で戦うので、「使われる側」から抜け出せない
36. ダイバーシティ(多様性)の尊重を。 すべてを俯瞰で見れる視野は大切。 一方で、専門性(＝強み)をもつことも大切。 みんな同じではなく、それぞれが違った強みを持った組織へ。
37. 施策を実行する
38. 既存メディアをSketch化
39. Abstractでバージョン管理
40. デザインプロセスの可視化 • AbstractとSlackを連携させて、コミット内容とやり取りをデザイナー以外にも見える化
41. Sketch/Abstractの勉強会 • 使い方というより、やる意味を理解してもらう。
42. デザイン原則 • デザイン制作する上で核となる共通認識を言語化。 • まずは各媒体に所属するデザイナーに言語化して考えてもらう。 • 言語化することによるメリット ◦ 共通言語を持つことで、チームの意思統一。 ◦ 採用基準。ふわっとしていたデザイナーの「カルチャー」を明確に。
43. 今後、デザイナーがやること。(予定) • 新規事業の立ち上げ • 既存のメディアにAtomic Designの導入 • デザイン原則・デザインガイドラインの作成 • データと施策とデザインを一元的に管理 • 組織ブランディング・CI/VI施策 • 開発環境の整備(Docker導入) • 情報共有ツールの統一 • デザイナー教育体制の整備
44. 組織の中でデザインの価値を高めていく。
45. 今までのプロセス マネジメント マーケティング デザイン エンジニアリング サポート
46. 全体にデザインを取り入れる取り組みを。 マネジメント マーケティング デザイン エンジニアリング サポート
47. 一緒に立ち上がってくれる方、待ってます！