Product development and design systems at Farmnote

ファームノートにおけるプロダクト開発とデザインシステム

Transcript

1. ファームノートにおける プロダクト開発とデザインシステム BtoB DESIGNERS LT勉強会 #1 - 山岸慧
2. Kay • UI Designer / Frontend Engineer • 新プロダクト開発 (旧海外事業) 部 • 帯広←福岡←バンクーバー←東京 • Twitter @kay_ya Designer / Engineer at Farmnote
3. 前提知識: デザインシステム
4. “デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパ ターンやコンポーネントなどのツールキットをすべて備えたもの。” UX MILK - デザインシステムの定義と作成方法、導入事例
5. 牛群管理とプロダクト開発
7. 新プロダクト開発チーム • PM: 獣医師 • デザイナー / UX リサーチャー • デザイナー / フロントエンドエンジニア • デザイナー / アプリケーションエンジニア • バックエンドエンジニア
8. 牛群管理とドメイン知識 牛個体 畜産業界 牧場形態 現場のワークフロー 海外事情 ユーザーのリテラシー 等々
9. • 牛群管理に関わるドメイン知識が膨大 • 同じ牧場内でも使われる状況が異なる • 牧場作業者にとっての一般的な UI とは？
10. 試行錯誤を増やし最適解を見つける
11. 機能仕様 情報設計 / 画面 デザイン 画面設計 / デザイン システム 画面実装 ユーザーリサーチ 開発 リサーチ
12. 開発サイクルの中でのデザインシステム
13. 機能仕様 情報設計 / 画面 デザイン 画面設計 / デザイン システム 画面実装 価値検証 ユーザーテスト 開発 リサーチ ユーザーリサーチ
14. • フィードバックを適用し改善していく • 改善したコンポーネントでさらにデザイン・実装 • 最初から凝りすぎない
17. まとめ
18. • 最初から凝りすぎない ◦ マテリアルデザインベースからスタート • 3人のデザイナー間で気兼ねなくフィードバック ◦ 心理的安全性の高さ • 他の人が使うことを前提に ◦ 職人芸のようなコンポーネントは作らない
20. ありがとうございました！