Year

2026

Role

Product Design, independent

Industry

Industrial equipment · B2B

ROI Calculator

An industrial equipment company's ROI calculator returned wrong numbers. In my test run, R$ −1,108,800 in savings. The math was right. The sign was inverted.

The brief I was handed: rebuild the calculator.

The brief I shipped: where the lead gets lost, and what to build there.

−R$1.1M →
+R$1.1M

same math, sign fixed

15 of 27

left on the first screen

4 → 3 → 2

steps to the result

ROI Calculator cover: the current calculator's result on a phone, next to a card showing the old figure, R$ −1.108.800

The Problem

The tool was arguing against the sale.

The calculator existed to show savings. It showed wrong numbers, sometimes a loss. Sales knew it was broken. Nobody knew what it was costing them, because nothing was measured.

Before

Before: the answer at the bottom of the page.

Original calculator: five empty input fields and a Calculate button
Original calculator: output fields further down the page, ending with total cost savings

Original interface in Portuguese.

Five inputs, a Calculate button, then twelve output fields. The savings figure came last, and came out negative.

Recreated from the diagnosis. The figure the old calculator showed.

Diagnosis

I audited the whole site, not just the tool.

With access to their WordPress, I sent them what to fix. Two things came out of it: the calculator built outside WordPress, and analytics where there were none.

39

plugins, functions duplicated

0

backups

0

pages with a search title

0

events measured

01
Searches Google
A technical problem.
02
Evaluates
Reads the blog, runs the calculator.
Lost here
03
Asks for a quote
04
Decides and refers

System

Their brandbook, turned into tokens.

Guideline values and my interface additions kept in separate layers, packaged as a Claude skill. The brand blue failed AA for small text, so a darker shade took over there.

Design system sheet: color, type, spacing and radius tokens

Guideline on the left, my extensions on the right.

Build

Flow first. Screens after.

01
Flow
Five versions in FigJam before any screen. The form stopped being a new screen and became part of the result.
02
Figma Make
Exploration only.
03
Figma + Claude Code
Built side by side through the Figma MCP. Result, form and inputs from Figma. Steps from code.
04
Zero monthly fee
The client's rule. Netlify instead of Vercel, leads in a Google Sheet. No server, no database.
05
One account, theirs
They run on Microsoft, so we created a Google account just for this. Sheet, GA4 and deploy in one place, independent of their host. Three step-by-step docs so they run it without me.
Five versions of the calculator flow side by side in FigJam, from entry point to quote request

Five versions of the flow, left to right. Click to open full size.

Figma version, step 3: contact form on the left, estimated savings and breakdown on the right

The Figma side. Its result panel and form made it into the final version.

Iteration

Measure first. Then cut.

The first version opened with a sector picker, so results could start from typical values. In the first review, we cut it. Every extra choice was one more reason to leave before seeing the number.

First version, step 1 of 4: a grid of industry sectors to pick from
First version, step 3 of 4: cost inputs with sliders next to a live estimated result

First version: four steps, starting with the sector.

The analytics from the diagnosis made this possible: GA4 through GTM, my own event names.

Then I measured. Of the first 27 people who opened it, 15 left on the first screen, before seeing any number. On mobile, 10 of 15. So I moved the result up front and the form after. Three steps became two.

First weeks live. Small sample, real numbers.

Old order · 3 steps Operation→ Costs→ Result
New order · 2 steps Inputs + live result→ Form
Current calculator, step 1: inputs on the left, estimated annual savings updating live on the right
Current calculator, step 2: the savings stay visible next to a short contact form
Current calculator on mobile, step 1, with the savings pinned to the bottom of the screen
Current calculator on mobile, step 2: savings first, form below

The calculator today: two steps, desktop and mobile. Brand removed, shown in grayscale.

What Happened

The page mattered more than the tool.

The client moved the calculator off the homepage, into a Tools link next to another tool they built. Later they added a quote request to their WordPress site, with another vendor.

Two months after launch, the calculator sits in a menu and gets almost no visits. There's no after-number for the new flow because there's no traffic to measure. A tool only sells if it's part of how the company sells.

The Real Deliverable

The brief that outlived the tool.

01
Capture
The calculator and a catalog become entry points.
02
Organize
One place for every lead.
03
Follow up
Nothing depends on someone remembering.

I was asked for a calculator. I proposed a way to ask for a quote.
That's what the client added next.

All work Next: E-commerce Platform