As the only UX/UI designer in biobot.farm, I had a lot of things to do. I was my own senior, but I also had de responsibility to take the shots regarding design for the private and the public view of the company. Watching the lack of consistency, huge amounts of development and graphic design time, I took the task of creating a Design System.
Challenge
How can I create a Design System that is scalable, compatible with multiple brands and compatible with the technologies used by the Development Team?
discovery
The main pain point I encountered designing in biobot.farm was the inconsistency of the App design, the marketing ads, and the presentation and brochures for investors and possible clients. I designed this system for the team to have consistent assets for digital, web and printed products.
Research
This was the first time designing a design system and I was thrilled on learning how it works because I love the idea of using technology to solve complex problems. With my engineering background, I understood clearly how it needs to work looking on inspiration and started making my research on the main components.
Research & Planning
I took inspiration on Material Design by Google to make a baseline of colors, components and text styles so then we can customize them for biobot.farm needs. We decided this because the Framework to use was Flutter, which has some components code-ready in Dart.
Colour
First thing to consider was the colours for the whole interface. I used the Primary biobot color to make a color palette with values from 0 (darker) to 100 (lighter) and generate a secondary, tertiary and surface colours. All the colours used for the System were assigned Semantic Tokens independent of each other for better usability and colour updating in the future. Figma Styles were used to store every Semantic Colour, with Dark/Light mode styles for every colour.
Components
Custom components were made based on this colour system and taking into consideration usability throughout the App and multiple variables of the component. Some components were used from Material 3 Components, but customized into biobot.farms guidelines and styles.
Development & Implementation
Once the colours, text styles and components were testes in some concepts, all the assets were exported to the code project. Using the Material Figma Plugin, the colours were converted into dart language for declaration in the system, along with text styles. The components were created into code and then tested and modified in code for them to be pixel-perfect and usable.
Testing & Optimization
I conducted concept testing across various devices to ensure compatibility, performance and accessibility of the System.
Results
Implementing the Design System was a really big project, but at the end the results were pretty remarkable for the development of the app and the team's time.
Code size
Implementing the Biobot.Farm design system reduced code size by 40-50%, significantly improving app performance and efficiency. By reusing standardized components, the system minimized redundancy and streamlined the overall codebase.
Consistency
The updated Biobot.Farm app now has a much more cohesive and consistent design language. This has made the interface more intuitive, improving user experience by making the app easier to navigate and understand.
Development Time
Adopting a design system from the start allowed the Biobot.Farm team to develop components based on atomic design principles—focusing on color, typography, elements, and icons. This approach not only accelerated the development process but also prevented design debt, ensuring new features could be implemented quickly and with lasting consistency.
