Revisions stopped hurting
A new drawing issue used to mean starting the count again. Now it means swapping a PDF and re-checking the changes.
← All work
Case study · Digital transformation
From A1 prints to a half-day quote.
A family-run ductwork group ran on paper. Tender drawings were printed at A1 and measured with a scale ruler, and the website hadn't changed in years. We rebuilt how the company quotes and how it gets found: one internal tool and one public site.
- Client
- Lin Sing Asia & YuenFung
- We did
- Product, UX, build, brand & web
- Status
- In daily use on live projects
10–20×faster to price the same tender
2 → 1people needed per quote
361projects, now searchable online
0monthly hosting bills for the new website
Part one · Internal tool
DuctTake
The old way
Two people, one big table, seven days.
To price a ductwork tender, someone had to measure every duct run and count every fan coil, damper and grille on the drawings. That meant printing a stack of A1 sheets, spreading them on a table big enough to hold them, going over each one with a scale ruler and pen, then typing the numbers back into a computer.
Slow was only half of it. Every time the drawings were revised, the count started again from scratch. Tender windows are short, and for most of a week two staff could do nothing else.
Before 5–7 working days
- Print at A1A stack of sheets per tender, back and forth to the print shop. Revised drawings meant printing again.
- Spread on a tableOnly one person could work on one sheet at a time.
- Scale ruler & penEvery run measured by hand, every unit ticked off and written down.
- Type it in againPaper totals re-keyed for pricing. This is where things got missed and mistyped.
2 peopletied up for the week, starting over whenever the drawings changed
After Half a day to two days
- Drop in the PDFThe contract drawing as it arrives. No printing, no converting. Revised drawings? Swap the file.
- Auto-detectAround 80% of equipment is marked automatically on drawings with readable text. About half on drawings where the text is outlines only.
- Review what it isn't sure ofDuct runs snap to the centreline. Low-confidence items flag themselves for a person to check.
- One-click BOQSheet metal, insulation and fittings calculated separately, exported straight to Excel with a marked-up drawing for the file.
1 personone computer, never leaving the desk, never re-typing a number
What changed for the company
It isn't just a faster ruler.
One file holds the whole job
Drawings and markings save together in one .dtk project file, like a .psd. Handing a tender over or digging up an old one means opening a single file.
No IT project needed
The whole app is a single HTML file. No server, no install, no accounts. Client drawings never leave the machine. That's why a traditional firm could say yes on day one.
The interface, rebuilt
Three rows of controls became one toolbar.
By version four, the same four words appeared in three places: layer toggles, tool buttons and list tabs. So we redesigned the whole screen. Tools moved to a floating icon rail on the drawing. Page and zoom became a pill. The right panel now shows only data for the current tool. The interface below is built from the final design boards. Try it.
Hover the toolbar, switch tools, or press Review.
Floating layers stand out
The toolbar and page pill sit one step lighter, with a dark outer edge, so they still separate from a bright white drawing.
Selected = deep green
Deep green fill with bright green text, at 7.8:1 contrast. Near-white was 15:1 and pulled the eye away from the drawing.
One solid button
Only Export uses the solid brand colour. There's one top-priority action on the whole screen.
Data colours avoid green
Equipment colours are orange, blue, olive, purple, magenta and amber, so a green marker never looks “selected”.
| Before | After |
|---|---|
| 2 items low confidence · Go and have a look → | 2 need review · Review |
| Only show the ones to review | Needs review only |
| Cleared “only show to-review” so you can see your new stuff again | Filter cleared so new items stay visible |
| Centreline auto-centre (snap by duct size) | Snap to centreline (by duct size) |
| Split pipe run (click a point on the pipe) | Split a run (click a point on it) |
The copy was rewritten from casual Cantonese into plain, bilingual interface language. The “before” column is translated. Icons are drawn from the drawings themselves: a duct section with its centreline, a double-line bend, a fan with flanges.
How it grew
Four versions, each one born from hitting a wall.
None of these was on a roadmap. We use the tool ourselves, so the time between hitting a wall and fixing it was usually the same day.
- v1
Just measure ducts
Centreline snapping, curves for bends, live area totals.
Then we hitDucts got fast, but equipment was still counted by eye. That was the slowest part.
- v2
Auto-detect symbols
Find repeated shapes in the vector drawing and count a whole type at once.
Then we hitHatching, arrows and text strokes got picked up too. One run produced 142 meaningless black lines.
- v3
Manual marking + a symbol library
Confirm one at a time. Every confirmation saves a sample, and detection filters through the library.
Then we foundMonths of manual marking was already training data. 273 samples pulled from old tenders became the starting library.
- v4
Rebuild the interface
Three rows of controls became one. Confidence scores now decide what happens next instead of just being displayed.
BecauseBy the fourth round of features, even we couldn't find the buttons. Adding features until the tool is unusable is a design failure.
The hard part
Two symbols that look identical.
Accuracy fell from 84% to 70% when a second project was added. Of 83 errors, 46 were the same pair: FCU4 read as FCU6. They're the same symbol on the drawing. The only difference is a few letters inside the box, and in this PDF those letters are drawn as outlines, so text extraction returned zero characters. Matching shapes can never tell them apart, however well it's tuned.
So we split the job in two.
Layer 1 · on the machine
Find & group
Shape matching finds where the equipment is and which family it belongs to. Free, instant, and the drawing never leaves the office.
Layer 2 · vision model
Read only what's ambiguous
Confidence scores decide the route. High confidence fills in automatically, the middle band goes to the model to read, and low confidence goes to a person. Large tiles read at 94%.
US$79
a year for the most expensive model, at 50 tenders a year with 2,000 items each. That's less than half a day of a technician's time. Cost was never the constraint. Accuracy was, and we can measure it, because 273 samples already have the right answers.
A UX detail we care about
“There's a problem” and “here it is” are different things.
The sidebar used to say “2 items low confidence” while the drawing showed nothing. You had to hunt for them.
The rule now
If the interface says something is there, the drawing points at it with a pulsing ring. It also turns to that page, zooms in and jumps the list to that row. Press Review in the interface above to see it. A test counts the ring's pixels on the canvas to prove it was actually drawn.
Part two · Marketing site & brand
Lin Sing Asia
The old way
Thirty years of work, nowhere to see it.
Lin Sing has made ductwork and flanges in its own Huizhou factory since 1997. Its products are in hundreds of hospitals, stations and housing estates. The website didn't show any of that. Contact went through four mailboxes spread across hotmail, yahoo and qq. The project history was a 370-row spreadsheet nobody outside the office could read. And the brand red was used for seven different jobs on a cool grey background, so every highlight looked like an error message.
Home page opening
Est. 1997 · Ductwork & flanges
361 projects
built with Lin Sing ductwork
Public housing, hospitals, railway stations and airport facilities. All searchable by sector, district and year.
DW144DW/TM1 testedISO 9001J2 – J5
Project explorer
Projects361 projects
Filter by sector, district and year. Pick Hospitals and you get 23. The whole list is built from the cleaned spreadsheet, so adding a job means editing one row.
The brand fix
The red wasn't the problem. The grey under it was.
Warm red on cool grey is how every operating system draws an error state. We kept Lin Sing's exact red and changed only the ground, to a warm drawing-paper tone. Now it reads as a seal, not a warning.
Red went from seven jobs to two: the logo, and a short bar above each section heading. Technical content such as spec tables, QC steps and data moved to a steel blue. The identity draws on the factory's two core processes, folding and rolling.
Before · cool ground#CC3333 reads as: caution, error, stop
After · warm groundThe same #CC3333 reads as: seal, mark, brand
What changed for the company
A website that does sales work.
Enquiries with drawings, to one inbox
The contact form takes PDF and DWG attachments and delivers them to one sales@ address on the company's own domain. Four scattered personal mailboxes became one.
The track record became proof
We cleaned 370 rows of project history into 361 projects, searchable by sector, district and year, in Chinese and English.
Nothing to maintain
A static Astro site on Cloudflare Pages costs nothing a month. Updating the project list means exporting a spreadsheet, and changes go live in a minute or two.
What we took away
Traditional firms don't resist digital. They resist learning a new process.
Start from the existing workflow
DuctTake works the way an estimator already worked on paper: trace the duct, tick the unit. Nobody had to learn a new concept.
Keep the barrier low
A single file, running locally, with no accounts, and a website that costs nothing to run. No IT approval and no terms of service to negotiate.
Automation that admits doubt
Confidence scores let the tool say what it isn't sure about. A tool that owns its mistakes is a tool the team will trust with the rest.
More work