AgroScout's web app and app serves as a comprehensive platform for farmers to access real-time data on their crops, including growth patterns, soil health, and weather forecasts. This information empowers farmers to make informed decisions about irrigation, fertilization, and pest control, leading to more sustainable and profitable farming practices.
The mobile app complements the web platform by allowing farmers to monitor their fields on the go. With just a few taps on their smartphones, they can receive alerts about potential pest infestations or adverse weather conditions, enabling timely interventions to safeguard their crops. AgroScout's mobile app truly puts the power of precision agriculture in the palm of farmers' hands.
Moreover, the flight app integrates drone technology, enabling aerial surveillance of fields. Drones equipped with advanced sensors and cameras collect high-resolution imagery, which is then processed and analyzed by AgroScout's algorithms. This aerial perspective offers farmers invaluable insights into the health and vigor of their crops, enabling early detection of issues and precise pest management strategies.
About AgroScout
The AgroScout Web Design System was a necessary undertaking, initiated five years after the startup was founded. It was crucial to establish a design system with reusable components accessible to any designer or front-end developer joining the team. Our primary goal was to create a concise design system due to limited resources, without making it overly complex, so as not to stifle the creativity of our designers.
About AgroScout Web
Design System
As a designer and developer, it's important to have a design system, even if it's a small one that doesn't cover all possible component scenarios. This is essential in order to provide support for addressing the following problems:
-
Efficiency
Before we had a design system, we used to waste a significant amount of time in both the design and development processes when building components. It was a challenging and time-consuming.
-
Errors
Fixing errors on the development components used to be a laborious task that required manual intervention each time. This manual approach, unfortunately, increased the likelihood of design or functionality inconsistencies cropping up in our projects.
-
Inconsistencies
The presence of numerous instances of inconsistent components across our system was a significant issue that adversely affected the user experience for our users. These inconsistencies manifested in various ways, such as differing color schemes, font choices, spacing, and more, which collectively created confusion and frustration among our users.
Problems
We've made two important groups of colors. The Main UI Colors are meant for the most important things you see and interact with, like buttons and menus. On the other hand, the Greyscale palette is mostly used for backgrounds and words you read on the screen.
Colors
We have a main font in our brand guide called "Montserrat." We've tried to create various options within this font for our system and grouped similar text size together to keep the text sizes consistent and not too varied.
Font, Text Types
We created a consistent shadows and spacers in our system because we noticed some inconsistency. We developed three different shadow sizes and a variety of spacer options between elements to accommodate all possible use cases.
Shadows and Spacers
We've designed four types of buttons in our system: Buttons, Main Buttons, Main Buttons with Icons, Icon Buttons, and Button Groups. We've made these options to cover all the possibilities we might encounter in our web app.
Buttons
We build radio buttons and checkboxes with empty, hover, and selected states. Additionally, we've incorporated toggles for both on and off states. To cover various tooltip use cases, we've developed tooltips with positions for up, down, left, and right, ensuring comprehensive support for all tooltip scenarios.
Selection, Toggle
and Tooltips
We build various field variations into our system, including text fields, dropdowns with and without errors, dropdowns with multi-select functionality, and search fields. By covering all these field types, we ensure support for all the use cases currently present in our system.
Fields, Dropdowns, Search
We build two versions of pop-ups and a consistent overlay to accompany them. We created these two versions to cater to various use cases within our system. The pop-up maintains a fixed size and does not rely on auto-layout, ensuring its dimensions remain constant. In situations where there is an abundance of data, a scroll bar is provided inside the pop-up to support it.
Popup and Overlay
We build two menu versions. One version is designed for users who prefer an open menu, offering easy access to various options and features. The other version is tailored to those who prefer a closed menu, providing a more streamlined and compact interface. This flexibility ensures that all users can navigate and interact with our system according to their individual preferences and needs.
Navigation Menu
We build three versions of icons to accommodate all the use cases within our web app. The first version is an outline style, which is used for our primary icons in the system. The second version consists of fill icons designed for secondary elements. The third version is tailored for small popup icons, incorporating animations and colors to enhance their visual appeal and functionality.
Icons
We have illustrations for our larger pop-ups and aimed to establish a more consistent illustration style. Additionally, we've created various versions of illustrations to ensure support for all use cases within our web platform. Our goal was to build a cohesive illustration family that maintains uniform colors and style as closely as possible. These illustrations were developed by our product design team without relying on external resources or the need for an art illustrator, showcasing our commitment to self-sufficiency in the design process.
Illustrations
Handoff
During the handoff phase, we collaborated closely with the development team, providing detailed explanations of the design components and ensuring a comprehensive understanding of the project requirements. This efficient communication streamlined the transfer of responsibilities and reduced the chances of overlooking crucial elements during development.
We held weekly meetings to construct the design system within Storybook, which proved to be an amazing process. Throughout this collaborative effort, we learned many valuable insights together.
We had one big issue that is crucial to acknowledge we encountered a notable gap in essential components, for example tables and toast messages and more. These are valuable elements for a design system, but due to the constraints of time and resources, we had to make strategic choices about what to include and prioritize.
While we may not have been able to encompass every design component we envisioned, the selections we made were made with careful consideration of their importance and immediate relevance to our projects. This pragmatic approach allowed us to move forward efficiently while ensuring that the most critical components were addressed.
As I transition to a new role in another company, I wish my former team the best of luck. I hope that the pursuit of the "one source of truth" we aimed for will be successfully realized.
Handoff Phase and Design Review
My Role and Challenges
Role - Product designer
As a Product Designer I held main design-ownership over the design system. Me and the other designer encompassed the entire building of the design system on Figma, from ideation to build the components, user interface design, animation, illustration. I took on full responsibility for ensuring that the design system met the high standards set by AgroScout, delivering a best to our customers even with low resources.
Challenges
-
How can a design system be effectively developed with just two designers and a small development team while managing resource constraints?
-
What strategies and processes can be implemented to maintain design consistency across a product when resources are limited?
-
How can a design system be scaled to accommodate the growth of a product or platform, especially when there are limitations in the size of the design and development team?
-
What are the best practices for fostering effective communication and collaboration between designers and developers in a small team environment during a design system project?
-
What strategies can be employed to address the challenge of encountering significant gaps in essential design components, like tables and toast messages etc.., within a design system when time and resources are limited?
Despite the challenges posed by the design system project, we were able to overcome them through effective communication between us, the design, product team, and the development team.