Product development and design systems at Farmnote

by Kay

Slide 1

Slide 1 text

ファームノートにおけるプロダクト開発とデザインシステム BtoB DESIGNERS LT勉強会 #1 - 山岸慧

Slide 2

Slide 2 text

Kay ● UI Designer / Frontend Engineer ● 新プロダクト開発 (旧海外事業) 部 ● 帯広←福岡←バンクーバー←東京 ● Twitter @kay_ya Designer / Engineer at Farmnote

Slide 3

Slide 3 text

前提知識: デザインシステム

Slide 4

Slide 4 text

“デザインの基準やドキュメント、原則に加えて、基準を達成するためのUIパターンやコンポーネントなどのツールキットをすべて備えたもの。” UX MILK - デザインシステムの定義と作成方法、導入事例

Slide 5

Slide 5 text

牛群管理とプロダクト開発

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

新プロダクト開発チーム ● PM: 獣医師 ● デザイナー / UX リサーチャー ● デザイナー / フロントエンドエンジニア ● デザイナー / アプリケーションエンジニア ● バックエンドエンジニア

Slide 8

Slide 8 text

牛群管理とドメイン知識牛個体畜産業界牧場形態現場のワークフロー海外事情ユーザーのリテラシー等々

Slide 9

Slide 9 text

● 牛群管理に関わるドメイン知識が膨大 ● 同じ牧場内でも使われる状況が異なる ● 牧場作業者にとっての一般的な UI とは？

Slide 10

Slide 10 text

試行錯誤を増やし最適解を見つける

Slide 11

Slide 11 text

機能仕様情報設計 / 画面デザイン画面設計 / デザインシステム画面実装ユーザーリサーチ開発リサーチ

Slide 12

Slide 12 text

開発サイクルの中でのデザインシステム

Slide 13

Slide 13 text

機能仕様情報設計 / 画面デザイン画面設計 / デザインシステム画面実装価値検証ユーザーテスト開発リサーチユーザーリサーチ

Slide 14

Slide 14 text

● フィードバックを適用し改善していく ● 改善したコンポーネントでさらにデザイン・実装 ● 最初から凝りすぎない

Slide 15

Slide 15 text

No content

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

まとめ

Slide 18

Slide 18 text

● 最初から凝りすぎない ○ マテリアルデザインベースからスタート ● 3人のデザイナー間で気兼ねなくフィードバック ○ 心理的安全性の高さ ● 他の人が使うことを前提に ○ 職人芸のようなコンポーネントは作らない

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Slide 3

Slide 3 text

Slide 4

Slide 4 text

Slide 5

Slide 5 text

Slide 6

Slide 6 text

Slide 7

Slide 7 text

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

Slide 11

Slide 11 text

Slide 12

Slide 12 text

Slide 13

Slide 13 text

Slide 14

Slide 14 text

Slide 15

Slide 15 text

Slide 16

Slide 16 text

Slide 17

Slide 17 text

Slide 18

Slide 18 text

Slide 19

Slide 19 text

Slide 20

Slide 20 text