Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ユビーのペイシェントジャーニーを支えるデザインシステム構築

takanorip
August 04, 2022

 ユビーのペイシェントジャーニーを支えるデザインシステム構築

takanorip

August 04, 2022
Tweet

More Decks by takanorip

Other Decks in Design

Transcript

  1. Ubieのペイシェントジャーニーを支える

    デザインシステムと組織
    Takanori Oki
    2022/08/04 - プロダクトデザイナー Meetup

    View full-size slide

  2. 自己紹介
    ' 大木 尊紀 / Takanori Oki / takanoriY
    ' デザインエンジニア@Ubiu
    ' WEB+DB PRESS vol.129 「小さく始めるデザインシステム」(共著H
    ' 趣味は料理と筋トレ、得意料理はパスタ
    現在取り組んでいること:
    デザインシステム、アクセシビリティ改善、”ユビー病気のQ&A”の開発、…

    View full-size slide

  3. ユビーの紹介

    View full-size slide

  4. ユビーについて
    医師とエンジニアが創業した

    医療AIスタートアップ
    社名:Ubie株式会社

    代表:阿部吉倫(医師)、久保恒太(エンジニア)

    設立:2017年5月

    従業員:約200名(2022年4月現在)

    累計調達額:79.8億円

    View full-size slide

  5. MISSION
    テクノロジーで

    人々を適切な医療に案内する

    View full-size slide

  6. 主要プロダクト
    医療機関向け
    生活者向け
    月間利用者数
    500万人超
    導入医療機関数
    1,000以上

    View full-size slide

  7. ユビーが目指す医療プラットフォーム
    製薬企業 その他
    患者 医療機関
    ユビーが中心となって

    患者、医療機関、製薬企業など

    すべてのステークホルダーに価値を

    提供する医療プラットフォーム

    View full-size slide

  8. ペイシェントジャーニー
    発症 診察 治療
    症状に関連した適切
    な診療や治療法の情
    報提供
    症状に応じた参考病
    名や近くの医療機関
    を検索・情報共有

    View full-size slide

  9. ユビーの課題

    View full-size slide

  10. Ubieのデザインが抱える課題
    デザインの一貫性が低下、

    品質も一定じゃなくなってきた…

    View full-size slide

  11. 一貫性低下の原因
    ƒ ステークホルダーが多いh
    u 様々なステークホルダー向けの施策が同時に進行しているので

    全体の変更を追いきれないT
    ƒ ホラクラシー組織なので権限が個人に委譲されているため、

    他のデザイナーの目に触れないままリリースされてしまs
    ƒ デザインの基礎となるルールが整備されていない

    View full-size slide

  12. ステークホルダーの多さ
    患者の体験が…
    1つの画面だけでもいろんな思惑が交差してる
    製薬企業との案件が…
    医療機関からの要望が…

    View full-size slide

  13. ホラクラシー組織
    親サークルから子サークル、

    サークルから個人(ロール)に

    権限が委譲される

    View full-size slide

  14. 解決策①
    デザインシステム

    View full-size slide

  15. デザインシステムの目的
    デザインのベースを作る
    どのデザイナーでも同じくらい「ユビーらしい」
    プロダクトが作れるようにしたい
    レビューの基準をつくる
    ガイドラインを整備してレビューが主観的・属人
    的にならないようにしたい
    UIの実装品質向上
    エンジニアが実装しやすいような基盤を整備して
    リリースされるUIの品質を向上したい
    意思決定の速度向上
    不必要な議論を減らし、よりスピーディーに機能
    開発ができるようにしたい

    View full-size slide

  16. デザインシステム構築で大事なこと
    @ とにかく小さく始めるこ6
    @ 課題設定をするこ6
    @ 実装のことまで考えること

    View full-size slide

  17. デザインシステムの構成 2020年8月版
    コンポーネントライブラリ(実装・Figma) コンポーネントガイドライン
    アイコンセット(実装・Figma) デザイントークン(実装・Figma)
    UXライティングガイドライン アクセシビリティガイドライン
    デザイン原則

    View full-size slide

  18. デザイントークン

    View full-size slide

  19. コンポーネントライブラリ・ドキュメント

    View full-size slide

  20. BtoBtoCプロダクトにおけるデザインシステムの難しさ
    toCプロダクトとtoBプロダクトでデザインが異なる

    → 共通定義する部分と個別定義する部分の見極めが大事
    個別定義する部分

    コンポーネントライブラリ、

    UXライティングガイドライン、など
    共通部分

    デザイン原則、デザイントークン、など

    View full-size slide

  21. 解決策②
    デザインケツモチ制度

    View full-size slide

  22. デザインケツモチ?
    w
    (Not マネージャー3
    w あくまでも各施策のデザイン決定権は担当デザイナーにある

    → ユビーはホラクラシー組織なので決定権は各個人に委譲され7
    w 各プロダクトに1f
    w 客観的な視点でデザインレビューを主導する人
    各プロダクト全体のデザイン品質に責任を持ってる人


    View full-size slide

  23. デザインケツモチの目的
    6p デザインの属人性をなくし、知見をチーム全体で共有するこ)
    7p チームの共通認識をつくり、意思決定速度を向上させるこ)
    "p 客観的な視点からプロダクトの一貫性を考えること
    デザインの品質を高めること
    そのために次の3つのことをする

    View full-size slide

  24. デザインケツモチ関連の取り組み
    D デザインレビューガイドの作成・周0
    D ケツモチ相談会(週1
    D 非同期でのデザインレビュー
    主なレビュー観点
    D デザイン原則に沿ったデザインになっているw
    D デザイントークンに則ったデザインになっているw
    D 既存のコンポーネントを利用しているw
    D アクセシビリティの問題がないか

    View full-size slide

  25. Notionを活用したナレッジシェア
    A レビューに出したいチケットごとに

    Notionを作成し、そこに議論内容を

    まとめる運用をしている
    A 毎週金曜日にナレシェア会を実
    ˜ 業務で得た知見を共有するv
    ˜ これもNotionにまとめてシェア
    Notion最高!

    View full-size slide

  26. デザインケツモチがもたらした変化
    v デザインレビューで得られたフィードバックをもとに改善した結果、

    メトリクスの数値が向上しu
    v デザイナー間の議論が活発になり、より良いデザインをチーム全体で考える

    習慣がついてきV
    9 良い意味で属人性が減ってきたe
    v ガイドラインが浸透しガイドラインへのフィードバックも増加

    → より使いやすいガイドラインへ改善できつつある

    View full-size slide

  27. デザインケツモチからプロダクトケツモチへ
    プロダクトケツモチ
    デザイン+エンジニアリングでプロダクト全体の品質向上
    デザインケツモチ デザインケツモチ

    View full-size slide

  28. まとめ
    x デザインシステムでデザインの基礎をかためることで、

    様々なステークホルダー向け施策のデザインを一貫性を保ちつつ進められA
    x デザインレビュー文化を根付かせることで、知見をチーム全体で共有し

    体験の一貫性を高められA
    x BtoBtoCの体験全体を俯瞰して考えることが大事!

    View full-size slide