Allan Corbett

Senior Product Designer

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.

Goals

  • "Simple things should be simple, complex things should be possible" – Alan Kay
  • Give people the best tools for growing crops, anywhere in the world
  • Surface useful information that helps people make decisions
  • Show people what they need to see, not everything we could show them
  • Work on any device - phone checks from home, tablets in the Towers, desktop deep-dives at work

Approach

  • Make the defaults sensible
  • Seek clarification from experts and novices
  • Iterate based on feedback
  • Reduce complexity where possible, but still allow minute adjustments
  • Design for occasional use as well as 9-5ers

Team

  • Sole designer working directly with 3 product owners
  • Collaborated with developers in product, data and research departments
  • Regular input from customer support - they hear the pain points first
  • Stakeholder alignment across engineering, sales, and operations

Role & Responsibility

  • Lead designer for all UI and UX decisions
  • Created and maintained Eco, the design system - from scratch, in code
  • Authored nearly half of the code for the frontend
  • Supported other teams across the business with design guidance

Charting & Data Visualisation

  • Used Plotly for basic in-app visualisations where needed
  • Deliberately avoided building complex charting - our users were scientists with their own analysis tools and workflows
  • Focused on data access: exports in multiple formats (CSV, etc.) so users could work in Excel, R, Python - whatever they preferred
  • The UX goal was to get out of their way
4 TowersGrowth JobsEnvironmentMinimapTower 1Capacity
W2
T5
F4
S1
S0
M5
T3
Tower 2Capacity
W0
T1
F1
S1
S0
M2
T1
Tower 3Capacity
W3
T0
F0
S5
S5
M3
T2
Tower 4Capacity
W2
T4
F1
S2
S2
M3
T4

Eco Component Tree

<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)