UX analysis
Design
Web App

OnTrack

2023

Twelve department tools turned into one agri-management platform — without forcing people to relearn how they work.

Scope of work

User experience (UX) research and audit, information architecture, creation of low- and high-fidelity prototypes, user interface (UI) design, a UI kit and brand book for OnTrack — a platform that the agricultural holding uses to manage its fields, equipment, and assets. The project was completed in 6 months from start to finish.

OnTrack: crop distribution on the map with a field card

The problem

OnTrack grew release by release, and each release answered one specific user request. Over the years that turned the product into a patchwork: every department lived in its own tool, data was scattered across modules, and each new patch added complexity instead of removing it.

The client had already tried fixing things one feature at a time, and it only made usability worse. What they needed was a redesign of the whole system, not another patch.

OnTrack logoOnTrack: machinery usage volume widget

Research

We started by listening: 18 interviews with the people who use OnTrack every day, plus a UX benchmark of leading agri platforms such as Cropio and AgriChain.

Two problems came up in almost every conversation. The product was fragmented, and moving around it took too much effort — people struggled to find the data they needed and then to make sense of it.

Over 750 different screens for the prototype

Key insight

The turning point came from the interviews. Users kept complaining about jumping between modules — yet nobody asked for a new way of working. They wanted to keep their routine, just without the friction.

The benchmark added a second clue: modern agri tools let people look at the same data in different visual forms. Together this shaped the concept — one modular product with a shared UX across all 12 modules, where every department can tailor the view to its own tasks and see data in the format that fits the question.

Design process

Each stage had one goal: get to a coherent, intuitive interface and validate it before scaling it to every module.

18
user interviews and a competitor UX benchmark to map real needs and pain points
56
low-fi screens in 12 days to lock navigation and the core structure
780+
hi-fi prototype screens in 4 months, with personal workspaces and layered data
530+
interface screens tailored to the needs of each module
UI kit
and a brandbook to keep one visual language across the platform
OnTrack: crop condition comparison, curtain mode OnTrack design system: colors, icons, spacing, typography, buttons OnTrack: zones of heterogeneity on satellite imagery

Solutions

Five decisions that turned a set of separate tools into one product.

01
One product instead of twelve

Fleet, assets, crop monitoring and nine more modules now live in one interface. Each department still gets its own data, but switching between functions no longer means leaving the product or losing context.

02
Personal workspaces (Presets)

Every user sets up a workspace around their daily job — the data views, tools and shortcuts they actually use. An agronomist and a fleet manager open the same product and land on two different starting points.

OnTrack: production table with the navigation menu
03
Any data, in the right format

Four core views — table, map, schedule and calendar — plus eight specialised ones, from dashboards and timelines to comparison matrices. People pick the format that answers their question instead of bending the question to a fixed layout.

04
Field and office in sync

Data entered in the field reaches the office in real time, and the other way round. Managers and field agents work from the same up-to-date picture, so plans can be adjusted on the spot instead of waiting for reports.

05
Advanced data layering

Users can overlay up to 12 data layers (such as crop conditions, equipment status, or resource allocation) in various formats. This flexibility enables in-depth, multidimensional analysis within a single interface, helping users gain comprehensive insights and make informed decisions on the spot.

OnTrack: sowing schedule by field and yearOnTrack: field card
OnTrack: machinery monitoring with tracks, legend and sensor charts

Beyond the core

Smaller features built around the reality of running a large farming operation.

  • Offline modeKey data stays available without a connection and syncs automatically once the device is back online.
  • Role-based accessEach role sees only what it needs — data stays protected and screens stay focused.
  • Geofencing on mapsZone-based alerts give tighter control over machinery and assets in the field.
  • Automated schedulingTasks are assigned with available resources and deadlines in mind, so planning takes less manual juggling.
  • In-app chatTeams talk inside the product, and notifications make sure important updates don't get lost.
  • Equipment logsUsage, performance and service history for every machine in one place — helping critical equipment last longer.
  • Weather and crop insightsForecasts and crop condition data back up decisions on when to sow and when to harvest.
OnTrack: agrochemical survey on the map

Impact

Six months from kickoff to a fully redesigned platform. OnTrack went from a set of disconnected tools to one system that unifies workflows across departments. Personal workspaces, live data and automated alerts help teams use machinery and resources more efficiently, while shared tools close the gap between office and field. Teams now see the whole picture at a glance — and make decisions faster.

12
modules unified into one platform
18
user interviews behind the concept
780+
hi-fi screens designed in 4 months
6
months from kickoff to a complete redesign

styleguide

This style guide page contains styles and components used through the website.
You can change any style from this page and it will be updated throughout the site.

I. Type faces & color palette

A. Typeface
The fonts used in this template are League Gothic and IBM Plex Sans.
Both are Google Fonts, so free to use on your commercial projects.
You can download Leagu Gothic here
You can download IBM Plex Sans here
B. color palette
Light Grey
#d3d3d3
Dark Grey
#212224

II. Text elements

A. headings

heading 1

desktop properties : 15em - 100%

heading 2

desktop properties : 10em - 100%

heading 3

desktop properties : 7,5em - 100%

heading 4

desktop properties : 5em - 100%
heading 5
desktop properties : 2.5em - 100%
heading 6
desktop properties : 2em - 100%
B. Rich text element

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil.

Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit ea laudantium autem et molestiae voluptatibus. In natus eveniet qui reiciendis sequi a dolorem accusantium!

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil.

Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit ea laudantium autem et molestiae voluptatibus. In natus eveniet qui reiciendis sequi a dolorem accusantium!

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil.

Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit ea laudantium autem et molestiae voluptatibus. In natus eveniet qui reiciendis sequi a dolorem accusantium!

Lorem ipsum sim dolor amet nec consegir

Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit
Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

  • Et molestias atque et repellat repellat
  • Et molestias atque et repellat repellat
  • Et molestias atque et repellat repellat
  • Et molestias atque et repellat repellat
Nam quaerat cumque et ipsa suscipit ea laudantium autem

Lorem ipsum dolor sit amet. Aut praesentium molestiae sit amet consectetur id consequuntur velit et enim asperiores aut molestias ratione sit molestias iste in galisum maiores! Sit quibusdam omnis cum perferendis officia et molestiae beatae hic dolores architecto. Sit sunt a beatae nemo qui assumenda itaque ex harum delectus ea magnam voluptatem. Hic error cumque aut reiciendis molestias ut voluptas consectetur et corrupti nihil. Et molestias atque et repellat repellat est quasi aliquid ut maiores sunt et eaque nihil et vero dolor rem ullam cumque. Nam quaerat cumque et ipsa suscipit

  1. Lorem ispum sim dolor amet nec consegir
  2. Lorem ispum sim dolor amet nec consegir
  3. Lorem ispum sim dolor amet nec consegir
  4. Lorem ispum sim dolor amet nec consegir
C. Useful text classes

Text Size Large - 1.25EM

Default paragraph - 1EM

Text Size Small - 0.875EM

Text Size XSmall - 0.75EM

Text Align Left

Text Align Center

Text Align Right

III. Interaction components

A. button
see all works
Primary Button
B. Form
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.