Allan Corbett

Senior Product Designer

The Problem

Design and build an operating system for vertical farms - a greenfield industry with hundreds of unknown unknowns. A technical prototype needed to become a production-ready system serving plant scientists, engineers, and farm staff across multiple countries and languages, all managing complex growing environments in real-time.

Two interconnected challenges emerged: GTMS (Growth Tower Management System) needed to surface critical operational data without overwhelming users, while Eco (our design system) needed to provide consistent, accessible components that could scale across the entire platform and adapt to diverse user needs.

My Approach

As the sole designer, I took a dual-track approach: building Eco as the design system foundation while simultaneously designing and implementing GTMS as its first major application. This allowed me to validate design decisions in real-world contexts and ensure the system solved actual problems.

  • Research & validation: Regular feedback sessions with plant scientists, farm operators, and engineers to understand workflows and pain points
  • Design system first: Built Eco from scratch using Stencil.js to create framework-agnostic web components usable across React, Angular, and vanilla JavaScript applications
  • Iterative development: Designed and coded components in tandem with GTMS features, refining based on usage
  • Progressive disclosure: Created information hierarchies that show what users need to see, when they need to see it - not everything we could show

My Role

  • Lead Product Designer - Sole designer responsible for all UI/UX decisions across the platform
  • Design System Architect - Created and maintained Eco from concept through implementation, documented in Storybook
  • Frontend Developer - Authored nearly 50% of the production frontend code, translating designs directly into functional interfaces
  • Cross-functional collaborator - Worked directly with 3 product owners and developers across product, data, and research teams

The Solution

The interactive demo below showcases the GTMS interface built with Eco components. The system provides three focused views:

  • Growth Jobs: Tower capacity, job state distribution (scheduled, running, harvestable, finished), and 7-day harvest forecasting
  • Environment: Real-time environmental parameters (EC, pH, temperature, humidity, CO₂) with delta indicators and tank level monitoring
  • Minimap: 54-slot tower visualization with color-coded states, progress indicators, and special markers for double-height/reserved slots

All components are built using Eco - from layout primitives (<eco-layout-body>, <eco-spacer>) to data visualization (<eco-stacked-bar>, <eco-progress>) to navigation (<eco-segments>). This demonstrates how the design system enables rapid, consistent interface development.

Impact & Results

  • Design System Adoption: Eco became the standard design system across Intelligent Growth Solutions, used by multiple teams and products
  • Development Velocity: Reusable components significantly reduced development time for new features - teams could build consistent interfaces without starting from scratch
  • User Satisfaction: GTMS successfully served plant scientists and farm operators across multiple countries, providing clear visibility into complex growing operations
  • Production Scale: System managed real vertical farming operations with 50+ towers, processing thousands of environmental readings and growth jobs daily
  • Accessibility & Consistency: Eco enforced consistent interaction patterns, color contrast ratios, and keyboard navigation across the entire platform
4 TowersGrowth JobsEnvironmentMinimapTower 1Capacity
W3
T3
F0
S1
S4
M0
T4
Tower 2Capacity
W0
T0
F4
S3
S1
M3
T4
Tower 3Capacity
W4
T1
F5
S5
S2
M4
T1
Tower 4Capacity
W1
T3
F4
S1
S5
M5
T4

Eco Component Tree

This visualization shows the hierarchy of Eco components used in the GTMS interface above. Each component is a reusable, framework-agnostic web component that can be composed together to build complex interfaces. This composability is a core strength of the design system.

<eco-layout-body>
├─ <eco-layout-nav> (Navigation)
├─ <eco-nav-link>× 6 (navigation menu items)
└─ <eco-spacer> (horizontal layout)
├─ <eco-nav-action> (search icon)
└─ <eco-user-badge> (user profile)
└─ <eco-spacer> (main content area)
├─ <eco-layout-header> (header with title and segmented controls)
└─ <eco-segments> (tab switcher)
├─ <eco-segment>Growth Jobs</eco-segment>
├─ <eco-segment>Environment</eco-segment>
└─ <eco-segment>Minimap</eco-segment>
└─ <eco-layout-blocks> (grid of tower cards)
└─ <eco-card>× N (one per tower)
├─ <eco-text-heading> (tower name header)
└─ <eco-spacer> (horizontal layout)
├─ <eco-generated-pattern-stripes> (pattern background)
└─ Tower name (text)
└─ Conditional content (based on segmentValue)
├─ Growth Jobs
└─ <eco-spacer> (container)
├─ <eco-input-wrapper> (capacity section)
│ │ ├─ <eco-text-label>
│ │ └─ <eco-progress> (capacity bar)
├─ <eco-stacked-bar> (job states chart)
└─ <eco-description> (harvest forecast)
├─ Environment
└─ <eco-spacer> (container)
├─ <eco-table> (parameter readings)
│ │ └─ HTML <table>
│ │ └─ <eco-spacer>× 5 (per parameter)
│ │ └─ <eco-icon> (delta status)
└─ <eco-spacer> (tank level section)
├─ <eco-text-label>
└─ <eco-level> (irrigation tank gauge)
└─ Minimap
└─ <div> (grid layout, no eco wrapper)
└─ <div>× 54 (one per slot)
├─ <eco-icon> (schedule icon if scheduled)
├─ <eco-progress> (circular progress if running)
├─ <eco-icon> (double-height indicator)
└─ <eco-icon> (reserved/locked indicator)