歴史あるパッケージアプリにUI/UXの知恵を新たに取り入れたい！ 伝統（的なシステム開発）職人の良きパートナーになるための工夫/Women Developers Summit 2022

[Works Human Intelligence]
竹原 百合子/大川 澪/扈 文茜/古澤 杏奈

伝統職人のパートナーになりたいデザイナーと、伝統職人のトークセッション。

分社後、新設されたUI/UXデザインチームが歴史あるパッケージアプリのUI/UX向上に本気で取り組む中で、どんな壁にぶち当たって、それをどう乗り越えてきたか/乗り越えているのか。

　・歴史が長い製品のUI/UX設計ってなにやるの？
　・デザイナーと開発者の関係性はどうなの？
　・デザイン文化って受け入れてもらえたの？

などなど

Transcript

1. Women Developers Summit 2022
   

   View Slide

2. Women Developers Summit 2022
   私たちの会社
   複雑化、多様化する社会課題を人の知恵を結集し解決することで「はたらく」を楽しくする
   知恵とテクノロジーで「COMPANY」を進化させ、お客様に最も信頼されるHRテック業界の
   リーディングカンパニーになる
   社員が成長する環境を作り、その成長にコミットし、我々が最も「はたらく」を楽しんでいる
   Vision
   Mission
   

   View Slide

3. Women Developers Summit 2022
   私たちの組織
   

   View Slide

4. Women Developers Summit 2022
   私たちの組織
   

   View Slide

5. Women Developers Summit 2022
   私たちの製品
   「COMPANYは統合人事システム」
   約1,200法人グループの大手法人にご利用いただいている、入社から退職までの人事
   労務をすべて網羅する統合人事システムです。
   初期リリースは 1996年 で、提供する製品は人事・給与・勤怠・要因分析・人材開
   発・雇用手続き管理・ID管理 と多岐にわたります。
   

   View Slide

6. Women Developers Summit 2022
   Women Developers Summit 2022
   今日のテーマ
   1. WHIのUI/UXチームって？
   2. 歴史ある製品のデザイナー的難所
   3. UI/UXチームの”歴史”
   4. これからのUI/UXチーム
   

   View Slide

7. Women Developers Summit 2022
   QAチームに配属後、UI/UXデザインチーム発足時に
   デザイナーとしてキャリアを再スタート。 ロゴ作成、デザ
   インガイドライン設計、デザイン文化啓蒙などを経験。
   現在は、チームリーダーとしてジュニアデザイナーのサポ
   ートや幅広い製品の新規機能や既存機能のUI/UX設計を担
   当。
   古澤 杏奈
   （UI/UXデザイナー歴 3年）
   ふるさわ あんな
   

   View Slide

8. Women Developers Summit 2022
   入社後、UI/UXデザインチームに配属され、会計や建設系
   管理の画面デザインをメインで担当したのち、人事の就労
   チームに異動。
   現在は、就労全般と設定画面関連のUI/UX改善を担当し、
   ツールの開発から画面改善など幅広く対応。
   扈 文茜
   （UI/UXデザイナー歴 5年）
   こ ぶんせん
   

   View Slide

9. Women Developers Summit 2022
   入社後、UI/UXデザインチームに配属され、UI/UXのいろは
   を修得。その後、開発(2年半)→導入支援(半年)と渡り歩き、
   今年7月にWHIに出戻り中途入社、UI/UXデザインチームに
   参加。
   現在は、タレントマネジメント系の新規機能や既存機能の
   UI/UX設計を担当。
   大川 澪
   （UI/UXデザイナー歴 2年）
   おおかわ みお
   

   View Slide

10. Women Developers Summit 2022
    入社後、COMPANY製品人事考課チームで新規機能開発、
    保守開発を担当し、コンセプトデザイン、バックエンド、
    フロントエンド、UI/UXデザインを経験。
    現在は、新規機能開発と保守のしやすいフロントエンド開
    発を担当。
    竹原 百合子
    （エンジニア歴 5年）
    たけはら ゆりこ
    

    View Slide

11. Women Developers Summit 2022
    Women Developers Summit 2022
    今日のテーマ
    1. WHIのUI/UXチームって？
    2. 歴史ある製品のデザイナー的難所
    3. UI/UXチームの”歴史”
    4. これからのUI/UXチーム
    

    View Slide

12. Women Developers Summit 2022
    WHIのデザインチームでは
    どんなメンバーが働いているの？
    最近拡大しているってウワサ・・・
    

    View Slide

13. Women Developers Summit 2022
    7名のデザイナー
    元営業
    UX
    リサーチャー UI/UX
    Designer
    （開発経験あり）
    元開発
    元開発 カスタマー
    サクセス
    元QA
    色々なバックグラウンドをもったデザイナーで構成
    

    View Slide

14. Women Developers Summit 2022
    デザイナーが極端に少ない
    エンジニアの数とシステム規模に対して
    一体、どういう体制でUI/UXを設計しているの？
    

    View Slide

15. Women Developers Summit 2022
    Before
    UI/UX Team
    デザイナー
    製品B
    開発者
    製品A
    開発者
    開発
    体制図
    業務理解が追いつかない。スピーディに設計できない。
    

    View Slide

16. Women Developers Summit 2022
    After
    体制図
    U/UX Team
    On-site
    Designer(兼務)
    Central
    Designer
    製品B
    開発者
    On-site
    Designer
    製品A
    開発者
    On-site
    Designer
    開発
    ● 各製品の状況をオンタイムで把握できたので効率良く設計できるようになった
    ● UI/UXの問題を早期に発見しやすくなった
    

    View Slide

17. Women Developers Summit 2022
    COMPANY全体のUI/UX向上を目指して：
    ● デザインガイドラインの設計、整備
    ● On-site デザイナー がいない製品のUI/UX設計
    ● デザイナー同士が連携できる体制を構築
    Central デザイナー
    

    View Slide

18. Women Developers Summit 2022
    On-site デザイナー
    各担当製品を深く理解した上でエンジニアと協業：
    ● 製品のあるべき姿の追及
    ● 課題解決のためのUI/UX設計
    ● ナレッジを共有
    

    View Slide

19. Women Developers Summit 2022
    COMPANYって機能が充実しててすごい！
    けど、使い勝手が惜しい…
    

    View Slide

20. Women Developers Summit 2022
    “COMPANYをもっとよくしたい！
    その価値をお客様に届けたい！”
    

    View Slide

21. Women Developers Summit 2022
    Women Developers Summit 2022
    今日のテーマ
    1. WHIのUI/UXチームって？
    2. 歴史ある製品のデザイナー的難所
    3. UI/UXチームの”歴史”
    4. これからのUI/UXチーム
    

    View Slide

22. Women Developers Summit 2022
    その前に…
    COMPANYって
    どうやって作っているの？
    

    View Slide

23. Women Developers Summit 2022
    要件定義
    COMPANYの開発者は、ゼロから全部やる。
    実装 テスト
    いわゆる世の中の ”UI/UXデザイン領域” の一部はデザイナーではなく
    開発者が元々やってきている
    UI/UXデザイン領域
    基本設計 機能設計 詳細設計
    COMPANY開発者の担当領域
    

    View Slide

24. Women Developers Summit 2022
    COMPANY開発者は
    ゼロからモノづくりをする
    COMPANYの職人である！
    

    View Slide

25. Women Developers Summit 2022
    じゃあUI/UXデザイナーの仕事は？
    A. よりデザイン専門的な知識を持って
    開発者をサポートすること
    

    View Slide

26. Women Developers Summit 2022
    どんなやり方でサポートしている？
    この画面の課題を改善したいで
    す！デザインについて相談させ
    てください。
    1．開発から画面改善の相談依頼が来る
    確かにここはユーザにとって課題と
    感じるポイントだな。
    このように変更したら解決
    できそうです。
    この案は工数的
    に難しいかもし
    れないです
    4．開発と認識をあわせる
    この代替案は
    いかがでしょうか？
    5．必要に応じて修正案を用意 6．実装サポート
    ここはもう少しスペースを空けた
    いので、このCSSを入れると再現
    できます。
    いいですね、
    これで
    行きましょう！
    2．現在の画面、機能、業務シナリオ
    などをキャッチアップ
    3．デザイン案を作成、共有
    代替案
    検討します！
    開発者 デザイナー
    デザイナー
    デザイナー 開発者
    開発者 デザイナー デザイナー 開発者 開発者 デザイナー
    ここは構造上、
    変更が難しいか
    もしれません...
    

    View Slide

27. Women Developers Summit 2022
    実際On-site Designer
    やっていてどこが難しい？
    

    View Slide

28. Women Developers Summit 2022
    歴史あるパッケージシステムならではの苦悩…
    強みと弱みは紙一重…
    機能
    充実性
    設定の
    柔軟性
    共通化
    できない
    最適解が
    見つかりにくい
    多くの
    ユーザー
    容易に
    変更できない
    

    View Slide

29. Women Developers Summit 2022
    ズラッと縦に並んでいるボタン達...
    苦悩①
    UI/UXの概念がない時代の「ボタン」
    

    View Slide

30. Women Developers Summit 2022
    ラベルを変更するだけでも
    重大なミスに繋がることもあるのが業務システム…
    苦悩②
    UI/UXの概念がない時代の画面への
    「慣れ」
    

    View Slide

31. Women Developers Summit 2022
    どう乗り越えたか？
    

    View Slide

32. Women Developers Summit 2022
    ①改善前画面 と②改善後画面を用意して、
    段階的に移行してもらう
    

    View Slide

33. Women Developers Summit 2022
    開発者から見た
    デザイナーの活動ってどう？
    

    View Slide

34. Women Developers Summit 2022
    最終的な判断は開発に委ねた上で
    柔軟な選択肢を
    いくつも提案してくれるのがありがたい
    

    View Slide

35. Women Developers Summit 2022
    Women Developers Summit 2022
    今日のテーマ
    1. WHIのUI/UXチームって？
    2. 歴史ある製品のデザイナー的難所
    3. UI/UXチームの”歴史”
    4. これからのUI/UXチーム
    

    View Slide

36. Women Developers Summit 2022
    今はいい感じに進められているっぽいが…
    最初からデザイナーに理解がある状態だったの？
    UI/UXに対する意識、重視するマインドは元々高いの？
    

    View Slide

37. Women Developers Summit 2022
    最初は苦戦しました
    機能追加が
    最優先
    開発者は
    超多忙
    UI/UX概念が
    なかった
    苦戦ポイント① 苦戦ポイント② 苦戦ポイント③
    

    View Slide

38. Women Developers Summit 2022
    開発としても、工数負荷なく
    どうUI/UX観点を組み込めばいいか
    わからなかった
    

    View Slide

39. Women Developers Summit 2022
    文化的背景も逆風となり、マイナスからのスタート
    

    View Slide

40. Women Developers Summit 2022
    組織のマインドからアプローチ
    

    View Slide

41. Women Developers Summit 2022
    組織のマインドにアプローチ
    説得材料集めやプレゼン資料の作成
    

    View Slide

42. Women Developers Summit 2022
    設計者全員が良いUI/UXを実装できるよう、
    勉強会を開催
    「デザイン4大原則とは？」
    「UXライティングとは？」
    「デザインガイドラインとは？」
    「デザインハンドオフ資料とは？」
    「UI改善のケーススタディ」
    などなど
    

    View Slide

43. Women Developers Summit 2022
    いつでも質問を受け付ける体制へ
    

    View Slide

44. Women Developers Summit 2022
    最適な落としどころを、
    バッファーを付けた形で提案する
    

    View Slide

45. Women Developers Summit 2022
    しかし、
    既に実装されていて
    色や位置しか変更できない …
    ということもあった
    

    View Slide

46. Women Developers Summit 2022
    開発の上流工程から一緒に参加
    PO PO
    PO
    DEV DEV DEV DEV DEV
    PO PO PO PO PO
    DESI
    GNER
    DESI
    GNER
    DESIG
    NER
    DESI
    GNER
    DESI
    GNER
    NEW
    

    View Slide

47. Women Developers Summit 2022
    Women Developers Summit 2022
    今日のテーマ
    1. WHIのUI/UXチームって？
    2. 歴史ある製品のデザイナー的難所
    3. UI/UXチームの”歴史”
    4. これからのUI/UXチーム
    

    View Slide

48. Women Developers Summit 2022
    ・製品の設計からデザイナーが関わることができる体制
    ・開発者と同じ方向を向きながら
    COMPANYという製品の課題や未来の話ができるようになった
    やっと職人が振り向いてくれた
    

    View Slide

49. Women Developers Summit 2022
    でも、まだ”スタート地点に立った”だけ
    COMPANYのユーザー数
    大
    、機能数
    大
    我々デザイナーが関わり、
    製品のユーザービリティに影響を及ぼせている部分…小
    

    View Slide

50. Women Developers Summit 2022
    改めて
    私たちデザイナー共通のマインドは？
    

    View Slide

51. Women Developers Summit 2022
    “COMPANYをもっとよくしたい！
    その価値をお客様に届けたい！”
    

    View Slide

52. Women Developers Summit 2022
    実現には、職人=開発者の力が必要
    

    View Slide

53. Women Developers Summit 2022
    そのためにはまず
    職人＝開発者のことをよく知ること。
    

    View Slide

54. Women Developers Summit 2022
    WHIの開発者が置かれている状況
    製品のUI/UXの優先順位がどうしても下がってしまう
    共通化
    できない
    最適解が
    見つかりに
    くい
    容易に
    変更できない 納期に
    追われる
    日々
    歴史あるパッケージアプリの故の制約 開発者の宿命
    

    View Slide

55. Women Developers Summit 2022
    私たちデザイナーができることは？
    

    View Slide

56. Women Developers Summit 2022
    私たちデザイナーができること①
    デザイナーが開発プロセスに入ることによって生まれる
    あらゆるコミュニケーションコストを極限までなくす
    

    View Slide

57. Women Developers Summit 2022
    製品理解
    

    View Slide

58. Women Developers Summit 2022
    製品理解
    製品理解 現場理解
    この2つを通じてデザイナーが開発者と
    普段から足並みをそろえておく
    

    View Slide

59. Women Developers Summit 2022
    目指すところは、
    デザイナーが開発チームの一員である世界
    On-site Designerはそのための第一歩
    

    View Slide

60. Women Developers Summit 2022
    私たちデザイナーができること②
    デザイナーが入ることで
    開発者のアウトプットの質を最大化する
    

    View Slide

61. Women Developers Summit 2022
    職人に
    「自分が考えるよりも“早くて、より良い”」
    と思わせる
    デザイナー自身の実力が必要
    

    View Slide

62. Women Developers Summit 2022
    信頼されるUI/UXデザイナーとして
    UI/UXの
    “駆け込み寺”
    デザインシステムの
    構築
    オーナーシップ
    デザイナー個人のUI/UXデザインスキル
    

    View Slide

63. Women Developers Summit 2022
    歴史ある製品のデザイナー
    だからこそ
    できるべきことって？
    

    View Slide

64. Women Developers Summit 2022
    妥協点を探りながら最適解を見つけていく力、
    説明のできるデザインを常に提案し続けること、
    そして、これを楽しめること！
    

    View Slide

65. Women Developers Summit 2022
    「伝統（的なシステム開発）職人の
    良きパートナーになるため」には？
    

    View Slide

66. Women Developers Summit 2022
    職人の作る製品や、置かれている状況を
    デザイナーが職人と同じくらいよく理解すること。
    その上で、
    職人が製品を作りやすい環境を
    デザイナーが柔軟に作っていくこと。
    

    View Slide

67. Women Developers Summit 2022
    職人とデザイナーが強固な信頼関係を結ぶ未来
    

    View Slide

68. Women Developers Summit 2022
    COMPANYの魅力がさらに引き出されて
    成長速度は最大化するはず！
    そう信じて、日々模索中です。
    

    View Slide

69. Women Developers Summit 2022
    ご清聴ありがとうございました！
    デザイナーも開発者も大募集中です！☺
    ◇採用サイト
    https://www.career.works-hi.co.jp/
    

    View Slide

70. Women Developers Summit 2022
    

    View Slide