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: The complete set of design standards, documentation, and principles along with the toolkit (UI patterns and code components) to achieve those standards.
Farmnote
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
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
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.
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!
