Product Development and Design System at Farmnote
Tags: Figma, Design Systems, Design, Product Development, UX

This article is translated from my original post in Japanese at friend’s request.

What is Design Systems

According to Create Component-Based Websites with Design Systems…

Design system structure from Create Component-Based Websites with Design Systems

Design System: The complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.

Farmnote

Farmnote products

Farmnote, the company I’m working for, is an IT startup providing a herd management system for the dairy and livestock industry. The domain knowledge is quite broad and deep, which makes our workflow unique.

Why We Need Design System

Prior to the new design system, Farmnote already built design systems for a current web-based product before I joined, however, the reasons for creating the new one are

Optimized design and experience for the targeted platform, smartphone/tablet

The existing system was too elaborated from the start and had less room to be exposed to the discussion

Tackling the Complexity in the Industry (as it’s the old story for B2B product)

On understanding customers and developing a product, we need to tackle both the vastness of related players (like livestock industry, biological aspects of cattle, and farm management) and profoundness of each issue which often can be academic topics.

In order to make the development process well, our team consists of following members in order to increase a trial-and-error approach and find a better solution through research and prototyping.

Veterinarian as a Domain Expert

Designer / UX Researcher

Designer / Frontend Developer

Designer / Application Developer

Backend Developer

Also, this approach is to make use of past product development experience that just having functionalities based on user’s request led to bloated and complicated product.

Design System in the Development Cycle

Development Process

In our workflow, the design system is not center or start of the development, rather it would be getting improved and sophisticated by applying feedbacks in the process of dev/research cycle.

We set a fundamental design rule, of course, but basically it opens to anyone and is the place to share and discuss each opinion among designers without hesitation.

Design System in Details

We adapt to use

Figma: design and collaboration tool

Atomic Design: granularity of component

Material Design: overall base to start from

Colors in the design system

Components in the design system

The reason to have dark mode is, we anticipated it to become mainstream of app UI and decided to design it from the beginning. Now we found it one of the great decision (Get Ready for Dark Mode.)

Another thing to have taken care of is to avoid adding several states to a component in Figma based design because the system is assumed to be used by non-designers, and it needs to be crystal clear for other members. Thus, I separated the states into another component.

Swap instance in Figma

Naming Convention in Figma

Giving the naming convention to a component as in below can keep the unity and make instance easier to swap.

ComponentName/#D/@state (#D and #L stand for Dark and Light respectively)

Recap

Our approaches to a design system are

Start from simple, Material Design base

Make it open to feedback as shared or same language

Avoid the complexity of component for even non-designer use

Farmnote is tackling to fill the gap between design and development, and trying to find a better solution on product and user. Feel free to give feedback or have a discussion!