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
ユビーのペイシェントジャーニーを支えるデザインシステム構築
Search
takanorip
August 04, 2022
Design
0
400
ユビーのペイシェントジャーニーを支えるデザインシステム構築
takanorip
August 04, 2022
Tweet
Share
More Decks by takanorip
See All by takanorip
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
440
Bulletproof Design System with TypeScript
takanorip
7
4k
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
160
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
930
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
15
7.4k
社内管理画面のデザインもプロダクトデザイン
takanorip
5
2k
早わかり W3C Community Group
takanorip
0
500
Ubieとアクセシビリティのこれからを考える
takanorip
0
470
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
4k
Other Decks in Design
See All in Design
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
280
decksh object reference
ajstarks
2
1.3k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
2.8k
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.5k
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
270
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
840
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.4k
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
430
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
410
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
420
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.2k
What makes a great Director?
_limex_
0
140
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Writing Fast Ruby
sferik
628
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Designing Experiences People Love
moore
142
24k
Agile that works and the tools we love
rasmusluckow
329
21k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Become a Pro
speakerdeck
PRO
29
5.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Art, The Web, and Tiny UX
lynnandtonic
302
21k
Testing 201, or: Great Expectations
jmmastey
45
7.6k
Transcript
Ubieのペイシェントジャーニーを支える デザインシステムと組織 Takanori Oki 2022/08/04 - プロダクトデザイナー Meetup
自己紹介 ' 大木 尊紀 / Takanori Oki / takanoriY '
デザインエンジニア@Ubiu ' WEB+DB PRESS vol.129 「小さく始めるデザインシステム」(共著H ' 趣味は料理と筋トレ、得意料理はパスタ 現在取り組んでいること: デザインシステム、アクセシビリティ改善、”ユビー病気のQ&A”の開発、…
ユビーの紹介
ユビーについて 医師とエンジニアが創業した 医療AIスタートアップ 社名:Ubie株式会社 代表:阿部吉倫(医師)、久保恒太(エンジニア) 設立:2017年5月 従業員:約200名(2022年4月現在) 累計調達額:79.8億円
MISSION テクノロジーで 人々を適切な医療に案内する
主要プロダクト 医療機関向け 生活者向け 月間利用者数 500万人超 導入医療機関数 1,000以上
ユビーが目指す医療プラットフォーム 製薬企業 その他 患者 医療機関 ユビーが中心となって 患者、医療機関、製薬企業など すべてのステークホルダーに価値を 提供する医療プラットフォーム
ペイシェントジャーニー 発症 診察 治療 症状に関連した適切 な診療や治療法の情 報提供 症状に応じた参考病 名や近くの医療機関 を検索・情報共有
ユビーの課題
Ubieのデザインが抱える課題 デザインの一貫性が低下、 品質も一定じゃなくなってきた…
一貫性低下の原因 ステークホルダーが多いh u 様々なステークホルダー向けの施策が同時に進行しているので 全体の変更を追いきれないT ホラクラシー組織なので権限が個人に委譲されているため、 他のデザイナーの目に触れないままリリースされてしまs
デザインの基礎となるルールが整備されていない
ステークホルダーの多さ 患者の体験が… 1つの画面だけでもいろんな思惑が交差してる 製薬企業との案件が… 医療機関からの要望が…
ホラクラシー組織 親サークルから子サークル、 サークルから個人(ロール)に 権限が委譲される
解決策① デザインシステム
デザインシステムの目的 デザインのベースを作る どのデザイナーでも同じくらい「ユビーらしい」 プロダクトが作れるようにしたい レビューの基準をつくる ガイドラインを整備してレビューが主観的・属人 的にならないようにしたい UIの実装品質向上 エンジニアが実装しやすいような基盤を整備して リリースされるUIの品質を向上したい
意思決定の速度向上 不必要な議論を減らし、よりスピーディーに機能 開発ができるようにしたい
デザインシステム構築で大事なこと @ とにかく小さく始めるこ6 @ 課題設定をするこ6 @ 実装のことまで考えること
デザインシステムの構成 2020年8月版 コンポーネントライブラリ(実装・Figma) コンポーネントガイドライン アイコンセット(実装・Figma) デザイントークン(実装・Figma) UXライティングガイドライン アクセシビリティガイドライン デザイン原則
デザイントークン
コンポーネントライブラリ・ドキュメント
BtoBtoCプロダクトにおけるデザインシステムの難しさ toCプロダクトとtoBプロダクトでデザインが異なる → 共通定義する部分と個別定義する部分の見極めが大事 個別定義する部分 コンポーネントライブラリ、 UXライティングガイドライン、など 共通部分 デザイン原則、デザイントークン、など
解決策② デザインケツモチ制度
デザインケツモチ? w (Not マネージャー3 w あくまでも各施策のデザイン決定権は担当デザイナーにある → ユビーはホラクラシー組織なので決定権は各個人に委譲され7 w 各プロダクトに1f
w 客観的な視点でデザインレビューを主導する人 各プロダクト全体のデザイン品質に責任を持ってる人
デザインケツモチの目的 6p デザインの属人性をなくし、知見をチーム全体で共有するこ) 7p チームの共通認識をつくり、意思決定速度を向上させるこ) "p 客観的な視点からプロダクトの一貫性を考えること デザインの品質を高めること そのために次の3つのことをする
デザインケツモチ関連の取り組み D デザインレビューガイドの作成・周0 D ケツモチ相談会(週1 D 非同期でのデザインレビュー 主なレビュー観点 D デザイン原則に沿ったデザインになっているw
D デザイントークンに則ったデザインになっているw D 既存のコンポーネントを利用しているw D アクセシビリティの問題がないか
Notionを活用したナレッジシェア A レビューに出したいチケットごとに Notionを作成し、そこに議論内容を まとめる運用をしている A 毎週金曜日にナレシェア会を実 業務で得た知見を共有するv
これもNotionにまとめてシェア Notion最高!
デザインケツモチがもたらした変化 v デザインレビューで得られたフィードバックをもとに改善した結果、 メトリクスの数値が向上しu v デザイナー間の議論が活発になり、より良いデザインをチーム全体で考える 習慣がついてきV 9 良い意味で属人性が減ってきたe v
ガイドラインが浸透しガイドラインへのフィードバックも増加 → より使いやすいガイドラインへ改善できつつある
デザインケツモチからプロダクトケツモチへ プロダクトケツモチ デザイン+エンジニアリングでプロダクト全体の品質向上 デザインケツモチ デザインケツモチ
まとめ
まとめ x デザインシステムでデザインの基礎をかためることで、 様々なステークホルダー向け施策のデザインを一貫性を保ちつつ進められA x デザインレビュー文化を根付かせることで、知見をチーム全体で共有し 体験の一貫性を高められA x BtoBtoCの体験全体を俯瞰して考えることが大事!
Thank you!