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

Product development and design systems at Farmnote

Avatar for Kay Kay
August 05, 2019
Design
1
3.3k

Product development and design systems at Farmnote

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

Avatar for Kay

Kay

August 05, 2019
Tweet

Other Decks in Design

See All in Design
【MIXI MEETUP！ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏：デザイナーが語るプロダクト誕生秘話
Avatar for MIXI DESIGN mixi_design
PRO
0
160
「稼ぐ」だけでなく 「還す」ためのデザイン / Designship2025
Avatar for インクルーシブデザインスタジオCULUMU culumu
1
460
地理院地図をもっと楽しく！れきちず新機能のご紹介
Avatar for Hajime Kato hjmkth
1
190
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
660
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
280
mento Design Team Portfolio
Avatar for mento _official mento0fficial
1
980
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
120
デザイナーがはばたく未来の入り口『hatch』が描く、新しいデザイナー育成のカタチ
Avatar for Goodpatch Inc. goodpatch
3
2.3k
数理的アプローチで挑むスマホUIのデザイン改善：タップ成功率推定ツール「Tappy」の社内活用事例 / Improving Smartphone UI Design with a Mathematical Approach: In-house Use Case of the Tap Success Rate Estimation Tool "Tappy"
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
890
ユーザー体験は細部に宿る -ウィジェットQAの挑戦と気づき- / UX is in the details: Challenges and Learnings from Widget QA
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
110
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
Avatar for HIROYUKI SAITO crearedesign
0
350
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
330

Featured

See All Featured
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
161
23k
Understanding Cognitive Biases in Performance Measurement
Avatar for Philip Tellis bluesmoon
31
2.7k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.7k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
Balancing Empowerment & Direction
Avatar for Lara Hogan lara
5
710
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
658
61k
The Web Performance Landscape in 2024 [PerfNow 2024]
Avatar for Tammy Everts tammyeverts
10
900
It's Worth the Effort
Avatar for 3n 3n
187
28k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
140
7.2k

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. 牛群管理とプロダクト開発

  6. None

  7. 新プロダクト開発チーム • PM: 獣医師 • デザイナー / UX リサーチャー •

    デザイナー / フロントエンドエンジニア • デザイナー / アプリケーションエンジニア • バックエンドエンジニア

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

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

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

  11. 機能仕様 情報設計 / 画面 デザイン 画面設計 / デザイン システム 画面実装

    ユーザーリサーチ 開発 リサーチ

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

  13. 機能仕様 情報設計 / 画面 デザイン 画面設計 / デザイン システム 画面実装

    価値検証 ユーザーテスト 開発 リサーチ ユーザーリサーチ

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

  15. None
  16. None

  17. まとめ

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

    ◦ 職人芸のようなコンポーネントは作らない
  19. None

  20. ありがとうございました！