Vayal Vimaani: Designing a Dual-App Agricultural Drone Spraying & Field Verification Ecosystem
“In field operations, interface clarity isn't just about aesthetics; it's how farmers verify crop work and operators stay accountable under the sun.”
Project Brief
Vayal Vimaani is a two-sided agricultural service platform connecting farmers with pesticide and drone spraying operators. This case study focuses on the dual-interface engineering across both the Farmer App and the Service Provider App, showing how a 6-collection Figma Variable architecture, mandatory photo-proof verification gates, and automated next-day task rollover states eliminate field disputes and missed bookings.
- Role
- Senior UI Designer
- Ecosystem
- Dual-App (Farmer + Service Provider)
- System
- 6-Collection Figma Variables (101 Primitives)
- Typography & Grid
- Inter Modular Scale
02 / Field Accountability
Engineering accountability into unpredictable field operations.
Agricultural pesticide spraying happens outdoors under tight weather windows. Standard gig-economy UI patterns fail when operators skip photo verification or leave partial acreage unfinished at sunset. Vayal Vimaani solves both operational bottlenecks directly at the interface layer.
Automated Next-Day Task Rollover
If a service provider can't finish an assigned spraying job within the day's window, the system moves the unfinished acreage into the next day's schedule, updating both the operator's queue and the farmer's live status tracker without manual re-booking.
Mandatory Photo-Proof Verification Gate
Operators can't mark a job 'Completed' with a single tap. The Service Provider UI requires a multi-photo field upload. Until live field images sync to the farmer's daily progress view, completion and payout (₹2,500 / ₹20,000) stay locked.
03 / 6-Collection Figma Variables
A single 6-tier token foundation powering two distinct applications.
To keep the Farmer and Service Provider apps visually consistent across outdoor light mode and dark surfaces, Vayal Vimaani is built on 6 Figma Variable collections.
1.
Primitives
101
2.
Color Tokens
42
3.
Size Tokens
31
4.
Typography
33
5.
Icon Size
3
6.
Border Size
8
Brand Green ramp
950
#0E1505
900
#1B2A09
800
#365313
700
#517D1C
600
#6CA626
500
#689F24
400
#9FD959
300
#B7E382
Neutral ramp
950
#000000
900
#121212
800
#212121
700
#424242
600
#616161
300
#EDEDED
100
#FAFAFA
50
#FFFFFF
Validation ramps
Red
Yellow
Blue
Semantic mapping (White / Dark)
- Text & Icon / primary→ Neutral/900 · Neutral/50
- Surface / default→ Neutral/50 · Neutral/900
- Border / subtle→ Neutral/300 · Neutral/800
- Action / primary→ Brand/500
04 / Atomic Component Matrix
6-part component library built for one-handed outdoor operation.
Booking & Task Action Bottom Sheets
Job cards surfacing farmer and operator profiles, crop acreage, location pins, price breakdowns, and high-contrast Accept / Decline / Complete triggers.
Photo-Proof Uploader & Weather Widgets
A multi-slot field photo grid required for task verification, paired with localized 27°C weather and wind-speed advisory cards.
Status & Rollover Alert Modals
Illustrated dialogs for decline reasons, time-window expiry and next-day auto-rollover (orange timer state), and verified payout completion.
Provider Earnings & Wallet Cards
High-contrast green gradient summary cards tracking Total Earnings (₹25,000) and per-job settlements (₹2,500).
05 / Dual-App Screens
Two synchronized interfaces, one verified field workflow.
01
Assigned Schedule & Incoming Requests
Operator views the daily spraying queue, field locations, and acreage details.
02
Active Spraying & Photo-Proof Gate
Operator uploads mandatory field photos on finishing; unfinished tasks flag and roll over to the next day's slot.
03
Instant Payout & Earnings Ledger
Verified completion unlocks the ₹2,500 job settlement and updates total wallet earnings.
06 / Design Reflection
Why systematic UI matters in AgriTech.
UI states enforce real-world trust
Making photo-proof uploads a hard UI dependency eliminates field disputes between farmers and operators.
Automated edge cases reduce drop-off
Designing next-day rollover into the schedule state keeps field delays from breaking the booking loop.
High contrast is non-negotiable outdoors
Pairing #FFFFFF surfaces with #121212 text and #689F24 actions keeps every screen readable in direct sunlight.
Want to explore the 101 primitives, semantic tokens, and dual-app flows in Figma?
Inspect the complete 6-collection variable architecture, component properties, and 80+ screens across the Farmer and Service Provider apps.
Open Live File in Figma