← CASE STUDIES
CASE STUDY · DESIGNER'S RETROSPECTIVE
Scanat Volume Measurement - From Interaction Design to 3D Visualization
From a discarded polygon-projection approach to a shipped reference-plane tool — testing five visualization styles along the way.
3d-designresearch3d-visualizationcollaborationprototypingai-workflow
Scanat Volume Measurement - From Interaction Design to 3D Visualization
ROLE
UI/UX Design · Prototyping
PROJECT TYPE
Feature Expansion
PLATFORM
Web App · Mobile App · iPad App
USERS
Architecture and civil engineering professionals working with earthwork planning
TEAM
5 people: Designer ×1, PM ×2, Web Developer ×1, App Developer ×1
TIMELINE
2026.01 – 2026.06
STATUS
First version launched June 2026
MY CONTRIBUTION
  1. Designed two interaction approaches and built working prototypes for both.
  2. Explored and defined the final volume visualization.
↔ THIS CASE STUDY IS ABOUT
Scanat
A 3D scanning and measurement platform for architecture and interior design.
VIEW PRODUCT →
[ TL;DR ]

Earthwork volume is often needed in construction, for example when filling a pit or removing a pile of soil. This is usually estimated manually or measured with specialized software.

The request came from a construction company that wanted to calculate volume directly from Scanat's scanned models. After review, the team decided to build it as a regular product feature.

CORE HIGHLIGHTS
  1. Interaction approach: The first version used polygon drawing and projection, with a full design and working Demo. Because of development cost and schedule, the team reviewed the client's short-term use cases and decided to launch a simpler reference-plane approach first. The polygon approach remains a future direction.
  2. Volume visualization: I tested five visual approaches in a real 3D environment. We chose an enhanced transparent polyhedron. After internal testing, I added a gradient to make the top and bottom easier to read.
[ 02 · PROBLEM ]
Core Problems
  • Domain knowledge: My earlier work focused more on indoor scenarios, so earthwork calculation, reference planes, and common visual conventions in civil engineering were new to me.
  • Interaction: At first, I did not know how professional volume measurement was usually done. My first idea was closer to manipulating objects in general 3D software.
  • Visualization: There was no obvious answer for how to make the volume readable on real terrain while still showing its 3D form.
Research

Before designing, I reviewed several professional tools to understand three things:

  1. Cut, fill, volume difference, and common visual conventions;
  2. The difference between a drawn plane and a reference plane, and how they are calculated;
  3. Different volume calculation and interaction methods.
[ 03 · APPROACH ]

The project went through six stages. Static design and working Demos were used together:

  1. Designed the first polygon measurement approach in Figma;
  2. Built the first Demo with Antigravity to test interaction and early visual ideas;
  3. After the requirement changed, designed the second reference-plane approach;
  4. Built the second Demo with Codex and tested the new interaction details;
  5. Tuned the visual effect in the Demo and delivered design parameters;
  6. Continued adjusting based on the development build and testing feedback.
[ 04 · DESIGN DECISIONS ]
01
Polygon Projection

The user needed to define an area on a 3D terrain model, calculate the earthwork volume, and distinguish cut from fill.

Main decisions:

  • Show area, cut volume, fill volume, and the difference between them;
  • Use blue-purple for fill and orange-red for cut;
  • The user draws a polygon, and the system generates the reference plane used for calculation. Areas below the plane are fill, and areas above it are cut;
  • The user can change the reference plane height, and the volume is recalculated.

What the prototype helped test:

  1. Real-time feedback: Show the area while the user places points, instead of waiting until the polygon is closed;
  2. Drawn plane vs. reference plane: Use cut / fill colors for the drawn plane and transparent white for the reference plane so users do not confuse them;
  3. Height edge case: Even if the reference plane is floating above the model, calculate using the target height entered by the user. In real work, the target ground level may not exist in the current model.
02
Simpler Reference-Plane Approach

Why it changed: Development estimated that polygon projection would take too long and had too many edge cases for the current schedule.

Simplified approach: After checking the short-term scenario with the client again, the team found that one model usually measured one pit or one pile. We decided to launch a simpler method based on a selected reference-plane height, while keeping polygon measurement as a later direction.

Main decisions:

  • Use a horizontal plane based on the model bounding box as the reference plane. The user only needs to change its height;
  • Adjust the height with a Slider or input field, then generate the volume;
  • In the first version, users do not need to understand cut / fill. The system determines it automatically and uses the existing measurement color system.

What the prototype helped test: The second prototype confirmed the reference-plane flow and real-time area feedback. It also showed one clear problem: if several volume measurements exist in one model, the reference planes overlap heavily because they have the same size and only different heights.

We handled this in two steps:

  1. Unselected measurements only show the plane-model intersection line and the value, not the full volume;
  2. When the polygon approach is added later, users can choose a method based on the scene.
03
Volume and Reference-Plane Visualization

The volume needed to stay clear from the terrain, show enough 3D form, work on uneven surfaces, and still fit Scanat's existing measurement colors.

I tested different visual approaches directly in the prototype. After reviewing them with product and QA, we chose the enhanced transparent polyhedron. It keeps the spatial relationship with the reference plane clear and follows irregular terrain.

Five visual approaches tested

ApproachResult
Solid cylinderToo visually heavy. It blocks the model and has little depth.
Transparent cylinderThe model is visible through it, but the cylinder edges are still too strong, so the result looks like many tubes stacked together.
Accumulated-volume surface overlayIt follows the terrain, but feels more like a surface layer than a volume. The boundary and sense of mass are both weak.
Transparent polyhedronClose to the target. It has a clearer sense of volume and avoids the stacked-cylinder look, but the boundary is too weak and the color is too light.
Enhanced transparent polyhedronFinal approach. Stronger boundaries and color contrast improved readability while keeping the sense of volume.

During internal testing, a single color made it hard to tell the top from the bottom of the volume. I continued tuning the development Demo and added a gradient: the color becomes lighter closer to the reference plane.

[ 05 · WALKTHROUGH ]
01Create the Reference PlaneThe user places points on the terrain model and sees the area and plane preview in real time.
02Reference Plane BoundaryThe connected points form the reference plane used for the volume calculation.
03Volume VisualizationThe final result uses a transparent polyhedron with a gradient, keeping the relationship between the volume and terrain clear.
04Uneven TerrainThe volume remains readable on uneven terrain.
[ 06 · OUTCOME ]

Launch: The first version launched in June 2026.

Internal feedback: Customer Success, Sales, and Marketing gave positive feedback. Sales also reported that many customers were interested in the feature.

Marketing use: At construction-tech events, the marketing team used the volume measurement feature to collect more leads from construction and public-service sectors.

Usage signal: After launch, we saw more scanned models of pits and soil piles on the platform, which suggested that the feature was being used in real projects.

Data note: We only have qualitative feedback. There are no usage-rate, retention, or conversion numbers available for this feature.

[ 07 · REFLECTION ]
  1. Product: The simplified approach removed the usual cut / fill / volume-difference presentation. I had doubts about this at first. After launch, customer feedback showed that for a product like Scanat, which serves a wider range of users, making the feature easier to understand can be more useful than copying every convention from professional tools.
  2. Prototyping: 3D interaction and visual effects are hard to judge from static design files. Working prototypes helped me test interaction feel, edge cases, and rendering earlier, and reduced the gap between the design and the final build.
↔ THE PRODUCT
Scanat
A 3D scanning and measurement platform for architecture and interior design.
VIEW PRODUCT →
OTHER CASE STUDIES
012026.01
Why review feedback keeps dying in group chatsA recurring annoyance became a data model, then a shipped plugin — the full trail from problem discovery to the decision that shaped it.READ CASE STUDY →
022025.01
The handoff doc nobody reads — so I made it executableDesigning a CLI as a design deliverable: what changes when the spec is something engineers run instead of skim.READ CASE STUDY →