ANODA Discuss your product

Vineyard mapping, from the office to the vine

VineView turns aerial imagery into crop data on a map for vineyard teams.We designed new features for the desk and the field.

VineView Manual Plan Creation for Block G: the list of sampling points on the left, the optimized path drawn through the block on the aerial map, and a notice that the route is ready; VineView route navigation on a phone: Block G sampling, the path to Row 28, Vine 92 on the aerial map, the next turn, and the finish time with 4 of 14 points done
150+
screens and states, desktop and mobile
4
features yield, history, paths and polygons
Web + mobile
planning at the desk, work in the rows

VineView is a precision-viticulture platform: aerial imagery of a vineyard and the crop data behind it, on a map used at a desk and in the rows. Over one continuing relationship we designed new features into the existing product, as desktop web app design for planning and mobile field screens for the work itself, with components for the new scope .

What the product holds

One chain, from the picture taken above the vineyard to a sample taken in it:

  1. Property

    • Fields
    • Blocks
    • Rows and vines

  2. Imagery

    • Aerial layers
    • Vine counts
    • Crop zones

  3. Yield

    • Productive vines
    • Yield data
    • Adjustments

  4. History

    • Earlier estimates
    • Uploaded data
    • Reuse

  5. Sampling

    • Plans
    • Points
    • Paths

  6. Field

    • Route
    • Data entry
    • Polygons
Known New
New tools in the look and logic viticulturists already use.
Desk Row
Planned on a big screen, carried out on a phone with one free hand.
Calculated Understood
The route and its time come from VineView; the screens explain the order and the time.

The next vine, read at a glance

Found
In the rows a collector has one hand free and a few seconds per look, and a map full of points doesn’t say where to walk next.
Decided
One screen read top to bottom: which plan, the target vine on the map, the next turn, then the finish time and what’s left.
For the user
A collector knows where to go and how much is left without opening the list.
VineView route navigation: Block G sampling with the Map and List switch, the path to Row 28, Vine 92 on the aerial map, the next turn in 50 m, and a panel with the finish time, 4 of 14 points done, 1 h 10 min, 1.4 km and Auto-complete
After: route navigation inside a sampling plan; all figures are example data

  1. Which plan

    The plan’s name, and the switch between map and list.

  2. The next vine

    The target named on the map, the path drawn to it.

  3. The next turn

    How far, and what to do there.

  4. What’s left

    Finish time, points done, time and distance.

How the work progressed

Feature by feature: the domain and the requirements first, then flows and wireframes, then final screens and the handoff.

  1. Discovery

    How growers estimate a harvest, sample a block and walk it, and where the existing product got in the way

    Artifact A UX audit, requirements questions and a competitor review

  2. User Flow

    Every branch of yield estimation, from choosing blocks to adjusting the result

    Artifact User flows and the information architecture

    Part of the yield estimation flow: from the map with selected blocks, the question whether to use imagery, then manual entry or VineView’s vine-by-vine count, into an editable number of productive vines

  3. Wireframes

    The estimation steps, tested on real aerial maps before any styling

    Artifact Desktop and mobile wireframes

    Two greyscale yield estimation wireframes on an aerial map: block selection with filters and a list of blocks, then the list of estimation steps

  4. UI

    Paths, polygons and the field route in the platform’s own look

    Artifact Final desktop and mobile screens, their states and components

  5. Delivery

    What VineView’s developers needed for each feature

    Artifact Screen maps, a clickable prototype and handoff files

Three paths, from the desk to the row

Found
Planning happens on a desktop and the work happens on a phone, and every feature added its own branch to a product people already knew.
Decided
Each feature’s flow was mapped before its screens: the office path to an optimized route, the field path from a plan to the last sample, and drawing a polygon with its errors.

  1. At the desk: from a plan to a route

    Pick a block, see its points, optimize the path, adjust the start and end.

    Open the full map
    Web app flow fragment: Sampling Plans, selecting a block, the manual plan for the block, then the Optimize Your Path pop-up and the path shown on the map

  2. In the row: walking the route

    Start the route, follow it, pause, get back on track, finish.

    Open the full map
    Mobile app flow fragment: a check for planned routes, the map with the optimal path, the route on track with its off-route and lost-connection errors, and the completion pop-up

  3. In the row: drawing a polygon

    Points come from the field device; the app shows the shape and stops a broken one.

    Open the full map
    Polygon flow fragment for the mobile app: creation mode, editing the name, points collected with the field device’s button, live feedback on the shape, preview and confirmation
The Map and List tabs component with its active and default tab states

One switch between the map and the list

Every field screen, a plan, a route or a polygon, opens on the map and turns into a list with the same switch.

  • Information architecture
  • User flows
  • Screen maps
  • Clickable prototype

Eight jobs, from the forecast to the row

The desk first: the yield forecast and the sampling plan. Then the field: the route, the samples and the polygons. Every figure on these screens is example data.

A yield forecast as steps

Found
A harvest forecast needs blocks, productive vines, yield data and adjustments, and growers have different parts of it at hand.
Decided
A step list beside the aerial map, each step with its status: vines counted by hand or taken from the imagery, yield data entered, uploaded or reused. Designed to wireframes.
Greyscale wireframe: a block outlined on the aerial map, and the Define the number of productive vines step open with fields per block
Greyscale wireframe: the Yield data step open with options to use a previous estimation, upload a spreadsheet, enter data manually or use a sampling plan

Earlier work, reused

Found
Last season’s estimates and sampling plans already hold much of what a new forecast needs, and typing them in again invites mistakes.
Decided
Earlier estimates and sampling data offered as a source right inside the step, next to manual entry and uploads.
Greyscale wireframe: the Yield data step with Use Previously Calculated Yield Estimation selected for a block

Sampling plans and their blocks

Found
A sampling plan covers several blocks, and a table of names doesn’t show where the work is or how far along it is.
Decided
Plans in one table with their form, blocks, samples and status; a plan opens onto the map with its blocks outlined and each block’s progress.
VineView Sampling Plans table: name, date, form, blocks, samples, last update and status for six plans, with a New Sampling button
Sampling Plan A: the plan’s address, form and dates, a list of blocks with their samples, and the blocks outlined on the aerial map

A path through the block

Found
Collectors lose time walking a block in the wrong order, and a route drawn by the system means nothing if nobody can see why it goes that way.
Decided
Pick a block, then optimize: the best-fit path with its walking time, start and end points to change, and a way back to the default.
Sampling 1 details: the list of blocks with their samples, Block G selected, and the block highlighted on the aerial map
Optimize Your Path pop-up for Block G: estimated walking time, start and end points with a changed start, Reset to Default and Save Custom Path, over the block map

The plan, on the phone

Found
Collectors start from the plan made in the office, and rebuilding it on a phone in the field is where mistakes creep in.
Decided
The phone opens the same plans with their progress, the plan’s blocks on the aerial map, and the route ready to start.
Sampling Collector: Block E sampling completed with 12 of 12, Block G sampling in progress with 4 of 24
Block G sampling on the map: blocks Pro-1 and Pro-2 outlined, sampling points and crop zones shown on the aerial image
Map with the route drawn through Block G and a Start button, the finish time and 4 of 14 points done

Samples taken on the spot

Found
At each point the collector records what they see, and a long form with gloves on is how data gets skipped.
Decided
At the point, a short form: disease detected or not, its type, a severity scale; the plan’s blocks list progress; the end shows planned against actual time.
Enter Sampling Data pop-up: disease detected yes or no, type (downy mildew, powdery mildew, grey mould), a severity scale from 1 to 4, Confirm and Back to Route
Block G sampling list: Pro-1 at 28% with 4 of 14 samples, Pro-2 at 0 of 10
Sampling Plan Completed pop-up for Block G sampling: planned time 1 h 10 min, actual 1 h 29 min, points and samples visited, distance 1.4 km

When the field gets in the way

Found
Collectors wander off the path, lose signal, stop for a break or leave early, and a route that just breaks loses the work done so far.
Decided
Each case has its own state: a warning off the route, an offline notice while it reconnects, a paused route, and a confirmation before leaving with samples left.
Block G route with a warning that the collector is 50 meters off the planned route, the finish time and Pause Route
Block G route with a notice that the phone is offline and the app is trying to reconnect
Paused route in Block G: estimated time 56 min, 2 of 9 completed, Report and Continue Route
Confirm Exit pop-up over the route list: 10 samples left, Confirm and Back to Route

A polygon drawn in the field

Found
Irregular areas are traced point by point on the ground, and a shape whose lines cross is useless data that nobody notices until later.
Decided
Creation mode on the map: each point from the field device appears as it’s taken, crossing lines turn red with a message, and the points are also listed in order.
Polygon creation mode: three points on the aerial map and the shape between them
Polygon creation with crossing lines drawn in red and a message that the polygon lines intersect
Polygon 1 saved: the finished shape on the aerial map and a success notice
Polygon creation in list view: points 1 to 3, each with a locate and a delete action

Polygons kept in order

Found
Polygons pile up across projects, and one that can’t be renamed, exported or moved ends up redrawn.
Decided
A polygon’s menu holds export, move and delete; export offers Shapefile or GeoJSON; moving picks a project from a searchable list.
Polygon 1 on the map with its menu open: Export, Move and Delete
Export Polygon pop-up with Shapefile (.shp) and GeoJSON (.geojson)
Move to: a searchable list of projects with their polygon counts, Oxalis Ranch open and selected, and a Move button
The polygon on the map after the move, with a notice that it moved successfully

Components for the new features

Found
The new features needed parts the platform didn’t have, such as map points, pop-ups, folders and field lists, and each had to sit in the platform’s own look.
Decided
A component set for the delivered scope, each part drawn with its states, then reused across the desktop and the phone instead of drawn again.

One error, shown where the user is

Crossing lines are flagged in the list with what to do next, and on the map where they cross.

  • Polygon Lines Intersect pop-up over the list of points: delete the last point, change their order or add a new line, and View on the Map
    List: A pop-up with the ways to fix it.
  • The polygon on the map with the intersecting part filled red and an error notice
    Map: The crossing, in red.

One list of points, three filters

All points with the walk to the next one, only the pending ones, only the ones done.

  • Points in Pro-1, All: four done, your location, a four-minute walk to Row 28, Plant 92, then the pending points
    All
  • Points in Pro-1, Pending: the walk to Row 28, Plant 92, then Rows 56 and 63
    Pending
  • Points in Pro-1, Completed: Rows 11, 34, 50 and 42, each ticked
    Completed

Where the product ended up

Four features designed into VineView’s existing product: a yield forecast in steps, earlier data reused, sampling paths planned at the desk and walked on a phone, and polygons drawn and kept in the field.

Each was delivered with flows, screen maps, a clickable prototype, components and handoff files. Development was not part of our work.

screens and states across desktop and mobile
150+
features: yield, history, paths and polygons
4

In the client's words

The design work helped organise the vineyard information into a consistent interface direction. We appreciated the attention to how imagery, field context and proposed actions appear together, so the team could review the product through specific workflows.

Richard van der Put CEO, VineView

5.0

Afraid new features will break what your experts know?

In VineView, yield estimation, sampling paths and polygons went into a platform viticulturists already used, in its own look and logic. Show us yours, and we’ll tell you where new work fits.

Discuss your product Explore more case studies

What we brought to VineView

The product

The work