Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
デザインシステム運用とOKRの良い関係
Search
takanorip
August 23, 2022
Design
0
2k
デザインシステム運用とOKRの良い関係
takanorip
August 23, 2022
Tweet
Share
More Decks by takanorip
See All by takanorip
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
720
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.6k
早わかり W3C Community Group
takanorip
0
430
Ubieとアクセシビリティのこれからを考える
takanorip
0
400
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.7k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
0
280
Other Decks in Design
See All in Design
世界中のチームワークをどうデザインしているのか
ka3zu1ma10
0
230
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
3.9k
(第1回) アーキテクト・テックリード育成講座
masakaya
0
110
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.5k
最速[要出典]アクセシビリティチェック
magi1125
2
130
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
450
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.2k
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4k
ZKK_001.pdf
nicholaspegu
0
1.4k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
470
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
280
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
2.6k
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Producing Creativity
orderedlist
PRO
341
39k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
5
450
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
28
2.1k
No one is an island. Learnings from fostering a developers community.
thoeni
19
3k
A Modern Web Designer's Workflow
chriscoyier
693
190k
How to Think Like a Performance Engineer
csswizardry
22
1.2k
Git: the NoSQL Database
bkeepers
PRO
427
64k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
111
49k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
Faster Mobile Websites
deanohume
305
30k
Code Review Best Practice
trishagee
65
17k
Transcript
デザインシステム運用と OKRの良い関係 Takanori Oki 2022/08/23 - Design System Build #01
自己紹介 大木 尊紀 / Takanori Oki / takanoriP
デザインエンジニア@Ubi4 デザイン読書日和にサークル参加するので買いに来て 趣味は料理と筋トレ、得意料理はパスタ https://dezabiyo.studio.siter 現在取り組んでいること: デザインシステム、アクセシビリティ改善、”ユビー病気のQ&A”の開発、…
目次 ) Ubieの紹4 ) OKRと& ) Ubieの組5 ) デザインによる価値最大化サークÇ )
UbieのデザインシステÃ ) デザインシステムとOK% ) まとめ
Ubieの紹介
医師とエンジニアが創業した 医療AIスタートアップ 社名:Ubie株式会社 代表:阿部吉倫(医師)、久保恒太(エンジニア) 設立:2017年5月 従業員:約200名(2022年4月現在) 累計調達額:79.8億円 Ubieについて
テクノロジーで 人々を適切な医療に案内する MISSION
医療機関向け 生活者向け 月間利用者数 500万人超 導入医療機関数 1,000以上 主要プロダクト
製薬企業 その他 患者 医療機関 ユビーが中心となって 患者、医療機関、製薬企業など すべてのステークホルダーに価値を提供する 医療プラットフォーム Ubieが目指す医療プラットフォーム
OKR?
OKR G アンディ グローブ氏によって考案された「目標管理」手法の1 G 2000年代初めにGoogleが導Ã G 難易度の高い目標を掲げ、進捗状況を確認するためのツール Objectives (目標)
Key Results (成果指標)
OKR 目標は60~70%の達成率になりそうな、少しストレッチしたものが理想W 成果指標は数値化して測定でき、簡単に評価できるようにす% OKRは組織の全員に公開して、お互いの状況を確認できるようにす% 従業員評価ツール、タスク管理ツールではない! 出典:https://rework.withgoogle.com/jp/guides/set-goals-with-okrs/steps/introduction/
Ubieの組織
ホラクラシー組織 e 自律分散型組織(ティール組織)の フレームワークの一l e サークルとロールで組織が構成され、 憲法に則って運営され e 権限がどんどん下に委譲されてい8 e
全体→サークル1→サークル2→ロー e 詳しいことはnoteに書いてある1 e https://note.com/ubie_discovery/n/ nd86e2a5655c9 e 評価しない、上司いない、1on1もない
OKRの運用 S 四半期(3ヶ月)に一度振り返りと再策c S ホラクラシーのサークルごとにOKR策c S KRごとにKR Promoter(メイン担当)と Gatekeeper(サブ担当)を決め' S
週1回のミーティングで日々の状況を確 S 社内ツール(ユビオケ)で管理
デザインによる 価値最大化サークル
デザインによる価値最大化サークル? デザインの力によって柔軟かつスピーディーに プロダクト品質の改善と新たな価値を生み出す! & 開発におけるデザインの基盤を整え、 プロダクト全体の生産性を推進する!
構成メンバー デザイナー:7人 デザインエンジニア:2人 エンジニア:1人 合計:10人(みんな兼業)
主な取り組み O1 % デザイントークンやコンポーネントの開$ % ボイス&トーン O2 % デザインシステム運用体制の構F %
アクセシビリティ、推4 % デザインレビュー・QAの推進 O3 % プロダクトのUI改q % デザインシステム適用
Ubieのデザインシステム
Ubie Vitals
Ubie Vitalsの由来・役割 役割 Vital:生命の維持に必要な、命に関わるほど重大な,不可欠な、必須の アイデアに命を吹き込む(具現化する)もv 医療用語で「バイタルサイン」という言葉があS
「呼吸」「体温」「血圧」「脈拍」の4項目 → Ubieのプロダクトデザインにとって必要不可欠なもv 役割 ユビーらしいプロダクトデザインを支える集合 アイデアを具現化する手助けをするもの
Ubie Vitalsに含むもの Y デザインシステムの思想、プロダクトデザイン原( Y アイコン、デザイントークン、コンポーネン) Y UIデザインガイドライA Y アクセシビリティガイドライA
Y UXライティングガイドライA Y レビューガイドライA Y プロダクトで利用するイラスト
Ubie Vitalsの成り立ち デザイン生産基盤 ガイドライン デザイン原則、思想 個別にできたものが合体してできた
デザインシステムとOKR
取り組み方 `f やりたいこと、やるべきこと(KR候補)を集めH 5f KR候補、親サークルのOKRなどからObjectiveを考えH 9f OごとにKRを考え、KR PromoterとGatekeeperを決めH df KR
PromoterがAC(KRで達成すること)を考える 発散→分類→全体→詳細
OKRの一例 Objective B デザイン・開発の生産性&プロダクト品質向上 のための基盤を作り切る Key Results B デザイナーとエンジニアの誰もがデザイントー クンを開発で活用出来ている
Return B 開発に携わるエンジニア・デザイナー約25名の コミュニケーションや作業の効率j B 25人×5分/日×20日 = 約42時間・人/ B プロダクト品質の底上げ Investment B ツール開発:トータル40時間想¤ B トークンの追加:32時間/月 Process B VSCode拡張機能の開発(30%â B トークンの追加(70%â B Shadow(10%â B Radius(5%â B Easing(5%â B Color(ブランドカラー以外)(50%)
ポイント A Invest、Returnをできるだけ数値化するこ A 何が終わったらOKRが何%達成されたか数値化するこ A O、KRは具体的に書くこと
メリット g 進捗を数値で可視化できるので、全体の状況把握がしやすU g 何ができて何ができなかったかが記録に残るので振り返りがしやすU g デザインシステムのどの部分に注力するかチーム内外で共有しやすU g デザインシステムに直接関係ないメンバーに現状を伝えやすい
デメリット 数値化しにくい目標を管理するのが苦d みんな兼業で稼働できる時間が不明なため、OKRがどれくらいストレッチ してるなのか考えにくt 目標設定の精度が悪いので、必要以上に進捗が悪く見えQ 長いロードマップとの相性が悪t
ストレッチした目標を立てるので、3ヶ月より長いスパンのロードマップと 一緒に運用するのは難しい
組織的な課題 f みんな兼業なので進捗が微 スタートアップなので事業開発の優先度が高 OKRがストレッチしすぎ問R f メンバーの入れ替わりが激し@
3ヶ月ごとにチーム体制が大きく変わるので、サークルメンバーの 入れ替わりが激し リードリンク(サークルの長)もちょこちょこ変わv 固定メンバーを作っても良いかも
今後やりたいこと デザインシステムのサポート体制構v i デザインシステムの浸透をOKRで追っていきたQ 進捗加速した5 i 優先度やメンバーの固定化などの方法を模索していきたQ
外部公開できるように整えた5 i 採用・企業ブランディング観点
まとめ
まとめ T UbieではOKRでデザイン改善をやってるB T OKRはデザインシステム構築を数値化して追っていけ9 T デザインシステム構築は大きいプロジェクトになりがちなので 細かく数値化することで全体の状況を把握しやすくな9 T 数値化できない目標にはあまり適してない
プロダクト開発エンジニア募集中! https://recruit.ubie.life/jd_dev/eng_prod
Thank you!