品質向上を目指す開発組織のデザインレビュー / SmartHR

Slide 1

Slide 1 text

CONFIDENTIAL 品質向上を目指す  開発組織のデザインレビュー  2022.03.02 うちのデザインレビューは“ここ”を見る【デザナレVol.11】小木曽槙一 SmartHR プロダクトデザイングループ

Slide 2

Slide 2 text

CONFIDENTIAL 自己紹介

Slide 3

Slide 3 text

CONFIDENTIAL SmartHR プロダクトデザイングループ所属去年まではメイン機能開発、今年から新規開発事業へジョイン「デザイン」業務を中心に企画、実装まで幅広く対応パラレルキャリアを標榜して、副業も積極的にやってる妻1人とローン30ウン年の家がある趣味は副業先のSlackに、おもしろ絵文字を輸出入すること小木曽槙一（こぎそしんいち） https://twitter.com/kgsi @kgsi

Slide 4

Slide 4 text

CONFIDENTIAL 会社紹介

Slide 5

Slide 5 text

CONFIDENTIAL すべての人が、信頼しあい、  気持ちよく働くために。

Slide 6

Slide 6 text

CONFIDENTIAL SmartHRは、人事・労務の業務効率化を実現し、働くすべての人の生産性向上を支える「クラウド人事労務ソフト」です。

Slide 7

Slide 7 text

CONFIDENTIAL 今日話すこと

Slide 8

Slide 8 text

CONFIDENTIAL “デザインはデザイナーに任せておくには重要すぎる” IDEOのティム・ブラウンのTED内で述べた言葉、もともとはRaymond Loewyの言葉とされる

Slide 9

Slide 9 text

CONFIDENTIAL ソフトウェアの「デザイン」の重要性と期待値は、  ますます高まっています。

Slide 10

Slide 10 text

CONFIDENTIAL この不確実性が増した世界で、優れたアウトプットは1人の知見だけで生み出せるものではありません。我々がよく扱うUIデザインだけに限らず、すべての「デザイン」という行為に当てはまります。

Slide 11

Slide 11 text

CONFIDENTIAL 「デザイン」は「皆（みんな）の力」を使うことで、現実的で使いやすい、理想を目指すことができます。「デザインレビュー」とは、設計品質を高め、理想を現実に近づける手段のひとつです。今回はプロダクトデザイングループが実施している  「プロデザレビュー会」をメインに紹介します。

Slide 12

Slide 12 text

CONFIDENTIAL ご視聴される方は、今日のスライドを見ていただくだけで、SmartHRのデザインレビューの知見を「完全理解」した状態になれます。今日の発表が、少しでも所属される組織・個人の刺激になれば幸いです。「完全理解うちわ5本セット」：SmartHR Storeで販売中  https://omise.smarthr.co.jp/products/kanzenrikai

Slide 13

Slide 13 text

CONFIDENTIAL 詳細な説明の前に... 「デザイン」とは本来何を指す？

Slide 14

Slide 14 text

CONFIDENTIAL デザイン（英語: design）とは、審美性を根源にもつ計画的行為の全般を指すものである。意匠。設計。創意工夫。英語のdesignには本項の意味より幅広く、日本語ではデザインと呼ばない設計全般を含む。出典: ウィキペディア（Wikipedia）https://ja.wikipedia.org/wiki/ %E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3

Slide 15

Slide 15 text

CONFIDENTIAL “審美性を根源にもつ計画的行為の  全般を指すもの”

Slide 16

Slide 16 text

CONFIDENTIAL

Slide 17

Slide 17 text

CONFIDENTIAL UIやモックデザイン設計や計画全般デザイン is

Slide 18

Slide 18 text

CONFIDENTIAL その上でデザインレビューとは？

Slide 19

Slide 19 text

CONFIDENTIAL デザインレビューとは、開発における成果物を、複数の人にチェックしてもらう機会のことで、JIS（日本工業規格）やISO（国際標準化機構）9000シリーズにおいて定義されている設計審査のことである。デザインレビューは本来、システム開発に限らず、工業製品開発も対象としているJISやISOなどの規格で定義されているものを指すが、ソフトウェア開発において一般的に行われているレビューをデザインレビューと呼ぶことも多い。出典: IT用語辞典バイナリ https://www.sophia-it.com/content/Design+Review

Slide 20

Slide 20 text

CONFIDENTIAL デザインレビューとは、製品開発の工程の一つで、設計に問題がないかを担当者、担当部局以外の第三者を交えて検討すること。設計に限らず、各工程の成果物を関係者全体で検討する活動全般を指す場合もある。出典: IT用語辞典 e-Words  https://e-words.jp/w/ %E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%E3%83%AC%E3%83%93%E3%83%A5% E3%83%BC.html

Slide 21

Slide 21 text

CONFIDENTIAL

Slide 22

Slide 22 text

CONFIDENTIAL 「デザインレビュー」を解釈

Slide 23

Slide 23 text

CONFIDENTIAL 成果物の「品質」について精査・検証する儀式    ...とここでは解釈します。

Slide 24

Slide 24 text

CONFIDENTIAL 品質とは何か？

Slide 25

Slide 25 text

CONFIDENTIAL “品質とは誰かにとっての価値である” ジェラルド・ワインバーグの著書 “Quality Software Management: Systems Thinking”より

Slide 26

Slide 26 text

CONFIDENTIAL 「品質」という言葉は本来主観的なもの評価するステークホルダーによって、品質の定義はさまざま 1人のデザイナーの「主観」で出した答えが、  客観としての「品質」の良さを証明することは難しい

Slide 27

Slide 27 text

CONFIDENTIAL プロダクトは誰のために作っているのか? ユーザーにとって価値とは何か? これらの疑問を開発者（プロダクトデザイナー含め）は  常に持つべき

Slide 28

Slide 28 text

CONFIDENTIAL ユーザー目線に立ち、常に主観を疑い、検証していく... そのためにデザインレビューが必要

Slide 29

Slide 29 text

CONFIDENTIAL デザインレビューの紹介の前に改めて... SmartHRのデザイン組織紹介

Slide 30

Slide 30 text

CONFIDENTIAL コミュニケーションデザイングループプロダクト  デザイングループプログレッシブ  デザイングループマーケティング・ブランディングなどコミュニケーションのデザインプロダクトに関わるデザインユーザーの多様性に  関わるデザイン NEW

Slide 31

Slide 31 text

Slide 32

Slide 32 text

CONFIDENTIAL 開発組織の主なレビューイベント

Slide 33

Slide 33 text

CONFIDENTIAL 1. スプリントレビュー 2. プロデザレビュー会

Slide 34

Slide 34 text

CONFIDENTIAL スプリント期間に合わせて（各チームおおよそ1週間単位）職能混合でレビューを行うレビュー対象はUIデザインに限らない、すべてのプロダクトバックログアイテムが対象スプリントレビュースクラムチームと、ステークホルダーがスプリントの成果を  レビューするイベント

Slide 35

Slide 35 text

CONFIDENTIAL 1. スプリントレビュー 2. プロデザレビュー会

Slide 36

Slide 36 text

CONFIDENTIAL プロダクトデザイングループが中心になって行う会対象はSmartHRのプロダクトデザインに関わる成果物全て今回はこの会を掘り下げたお話プロデザレビュー会デザインレビューとモブデザインを行う会

Slide 37

Slide 37 text

CONFIDENTIAL プロデザレビュー会とは

Slide 38

Slide 38 text

CONFIDENTIAL プロデザレビュー会の目的プロダクトを中心とした成果物の精度・品質の向上各プロダクトの状況把握と情報共有ナレッジや判断材料のシェアと標準化出典:イメージをお楽しみください

Slide 39

Slide 39 text

CONFIDENTIAL レビュー対象 UIデザインオブジェクト、UML図ユビキタス言語組織の方針・体制今晩の献立... etc 出典: 時間がなかったのでいらすとや・その他

Slide 40

Slide 40 text

CONFIDENTIAL 実施内容昨今は完全にオンラインで、毎週木曜に1時間実施デザイナーのレビューが多めだが、職能は閉じていない、  エンジニアやPdMからのレビュー依頼もあり横断の取り組みとして、グループ会社の成果物レビューも実施中

Slide 41

Slide 41 text

CONFIDENTIAL レビューのやりかた

Slide 42

Slide 42 text

CONFIDENTIAL レビューのお題を決めるのは、原則レビュー依頼をする人依頼者が用意したアジェンダに従って進行する進行手順に決まりはない、課題、持ち込んだ人次第レビューのツールはFigmaの割合多め、MiroやGoogle Docs、 Spreadsheet、実装画面...など媒体は問わない

Slide 43

Slide 43 text

CONFIDENTIAL 実際のレビュー事例紹介

Slide 44

Slide 44 text

CONFIDENTIAL 事例: UIのバリデーション設計メインプロダクトのバリデーション機能の表示方法を挙げた例フォーム内の入力項目数が長いため、通常のフォームバリデーションとは違った考慮が必要だったのでレビュー会で意見を募ることになった

Slide 45

Slide 45 text

CONFIDENTIAL 事例: アクセシビリティ改善 SmartHR UIというSmartHRの共通コンポーネントのカラーコントラストを改善したい、という事例 APCAという新しいコントラストのスコア基準というものがあることを教えてもらいつつ、モブデザインを実施

Slide 46

Slide 46 text

CONFIDENTIAL 事例: スペシャルサイトの設計 Schedule - RubyKaigi Takeout 2021のUIデザインの設計 SmartHRがRubyKaigiのスポンサーということもあり、特別アプリのUIデザインを担当することにエンジニアと協力してサイトの設計、意匠を決めた事例

Slide 47

Slide 47 text

CONFIDENTIAL 事例: 非同期の改善案募集レビュー枠を待たずに非同期で改善提案が走ることもあるレイアウトへの改善提起、意見を募って改善案のディスッションをSlack上で実施こういった突発的なレビューもしばしば行われている

Slide 48

Slide 48 text

CONFIDENTIAL レビューで生まれる効果

Slide 49

Slide 49 text

CONFIDENTIAL 第三者視点の気づきと多様なフィードバック創発的なアイデアとディスカッション

Slide 50

Slide 50 text

CONFIDENTIAL 参加する  プロダクトデザイナーの  生の声

Slide 51

Slide 51 text

CONFIDENTIAL

Slide 52

Slide 52 text

CONFIDENTIAL デザインレビューの場作り

Slide 53

Slide 53 text

CONFIDENTIAL デザインを見るってどんな観点でみればいいの？レビューはどんな粒度で持っていけばいい？レビューを受け取ったら必ず反映しないといけない？レビューでは何を言ってもいいの？

Slide 54

Slide 54 text

CONFIDENTIAL 答え我々にはデザインシステムがある

Slide 55

Slide 55 text

CONFIDENTIAL レビューは、レビュー依頼側がレビューで達成したい目的・目標を設定し、レビュワーに明示する。レビュワーはその目的・目標に沿った成果物・コードを軸に判断し、コメント、アドバイス・助言する。チームの知見や気づきを糧に品質を向上し、深遠なるインターフェースの極地にたどり着くための儀式である。抜粋：SmartHR Design System - デザインレビューの手引#目的・目標 https://smarthr.design/products/design-process/review/

Slide 56

Slide 56 text

CONFIDENTIAL レビューはクオリティを高め、レビュー依頼者が気づかないことへの気づきを与えるものです。レビューは意見の押し付けではなく、ディスカッションです。レビューはあなたの考えを否定するものではありません。出展：SmartHR Design System - デザインレビューの手引#レビューとは https://smarthr.design/products/design-process/review/

Slide 57

Slide 57 text

CONFIDENTIAL 言語化・体系化されたドキュメントがグループを支えてくれる共通認識ができ、レビューに対して認識ズレが起こりにくくなる前提として、メンバーみんなが泥水を啜ってきた猛者なので、  課題感の認識合わせコストが低い...ということもある

Slide 58

Slide 58 text

CONFIDENTIAL まとめ

Slide 59

Slide 59 text

CONFIDENTIAL 昨今の「デザイン」における課題「品質」を担保するのは1人では難しい一つの観点ではどうしても客観的に見れない

Slide 60

Slide 60 text

CONFIDENTIAL デザインレビューに期待できること意見やフィードバック、精査によって成果物の「品質」を客観的に向上させることができる参加者や職能を絞らないことで、組織全体にナレッジと判断基準を共有できるお互いの知見を持ち寄ることで、スキルの底上げが可能となる

Slide 61

Slide 61 text

CONFIDENTIAL レビューを成功させるためには... 組織のビジョン、デザインについての目線と認識を合わせよう思想や思考を言語化し、共有しよう泥水を啜って繰り返し研磨しよう

Slide 62

Slide 62 text

CONFIDENTIAL 最後にお約束の宣伝

Slide 63

Slide 63 text

CONFIDENTIAL We are hiring!  SmartHRは価値あるプロダクトの開発を、  一緒に進めてくれる仲間を募集しています！

Slide 64

Slide 64 text

CONFIDENTIAL https://open.talentio.com/r/1/c/smarthr/pages/ 45038 デザインレビューについてもっとお話をしたい場合はこちら https://www.vivivit.com/job-postings/7301 一緒に働きたい！と思っていただけた場合はこちら