2Nong – Social Farming Ecosystem

Sep 2025

2Nong connects farmers, experts, and agricultural businesses enabling users to move seamlessly from problem discovery to solution and action within a single platform.

As a Lead Product Designer & Markup Engineer, I led the design and implementation of a scalable ecosystem that bridges community interaction, AI-powered tools, and commerce experiences.

My Contribution

Product Design
Component library for App + Website
Documentation & usage guidelines
Design-to-dev handoff and implementation alignment

Tools Used

Figma
Cursor
Adobe Creative Cloud
Design handoff specs

Overview

2Nong is a social farming ecosystem designed to support farmers through knowledge sharing, expert-driven community, and real-time agricultural insights.

The goal is to enable farmers to move from problem identification to actionable solutions seamlessly.

Ecosystem Vision

Community-driven knowledge sharing
Expert support for real farming problems
AI-powered crop diagnosis
Real-time market insights & pricing
End-to-end journey from problem → solution → action

Problem

Knowledge is fragmented across multiple sources

Farmers lack access to trusted experts

No centralized platform for learning and action

Low digital literacy creates usability barriers

Farmers don’t just need answers—they need guidance they can trust and act on immediately.

Solution

We designed an integrated ecosystem that combines community, AI, and market data into a unified experience.

Ask & share knowledge within community
Use AI to detect crop diseases instantly
Access expert-backed recommendations
Check real-time market prices

Design Approach

The design approach focused on building a scalable and user-centered ecosystem balancing simplicity, consistency, and long-term growth.

Unified System

Consistent design system across App and Website

Guided Experience

Simplified complex flows into step-by-step interactions

Visual-first UI

Designed for low-tech users with clear and intuitive visuals

Scalable Architecture

Built to support a multi-product ecosystem and future expansion

Design to Implementation

Bridged design and development by translating design systems into scalable front-end architecture—ensuring consistency, efficiency, and seamless execution across the product.

Tech Stack

React Next.js Bootstrap 5 Tailwind CSS

Component System

Developed a reusable, component-driven system to ensure scalability and consistency.

Design Tokens

Mapped design tokens to UI components for consistent styling across interfaces.

Ownership

Owned front-end implementation to reduce design–engineering gaps.

Efficiency

Accelerated development and improved maintainability through reusable patterns.

Design

Translated design specifications into reusable markup components, maintaining pixel-level accuracy and ensuring consistency across different product surfaces.

Implementation

Implemented design systems into scalable markup using ReactJS, NextJS, Bootstrap 5, and Tailwind CSS leveraging AI assisted tools to accelerate development, improve code quality, and ensure consistency between design and production.

Impact

The final product delivered measurable improvements in speed, accuracy, and user confidence helping farmers make faster and more informed decisions.

40%

Faster UI development through reusable components across App + Website

60%

Improved UI consistency using a unified design system and markup structure

80%

Reduced design–development gaps through direct implementation and alignment

Reflection

The final product delivered measurable improvements across the ecosystem helping farmers access knowledge, connect with the community, and make faster, more informed decisions.

Designing 2Nong was not about building a single product but about shaping an ecosystem.

System > Feature Consistency > Speed Trust > Complexity

Next Steps

Looking ahead, we focused on scaling the ecosystem and enhancing key product capabilities to better support farmers across learning, decision-making, and action: