Prepared: 27 Aug 2026 Scope: homepage. Findings apply site-wide where noted. Deliverable alongside this doc: four working HTML concepts in this folder, plus index.html to view them side by side.
Novatec's problem is not that the homepage is ugly. It is that the homepage argues the wrong thing.
Today it argues "we make four categories of equipment, and they are the most advanced." That is a taxonomy plus a superlative. It is the single least defensible claim available to you, because every competitor makes the same one, and your audience — 35–60, decades on the floor, allergic to marketing — discounts superlatives on sight.
The claim you actually own is structural and nobody else can copy it:
Resin is 55–75% of what a processor spends. We make everything that carries it, from the railcar to the press. Nothing more, nothing less.
That is a scope claim, not a quality claim. It is verifiable, it reframes the purchase from "equipment cost" to "protecting the largest line on the P&L," and it converts your breadth — currently presented as a boring product list — into the reason to call you.
The design's whole job is to make that claim land before the first scroll, then spend the rest of the page proving it. Everything in these notes serves that.
Rendered at 1440px and 390px, 27 Aug 2026.
B1 · The hero makes an unprovable claim in the smallest type on the page. "The Most Advanced Drying & Conveying Equipment, And Systems…Period!" — set at roughly 30px inside a 430px-tall hero, with the sub-line ("Over 75 Years of Industry Leading Innovation & Mastery") at ~17px. Two superlatives and no evidence. The "…Period!" is defensive posturing; it reads as a company that feels contradicted, which is the exact opposite of the brief's "nothing to prove but everything to show." The most valuable 430 pixels on the site are spent on a sentence a skeptical plant manager discounts in under a second.
B2 · The four-quadrant grid is the entire product story, and it is a taxonomy. Drying / Conveying / Blending / Systems as four equal boxes tells a visitor how Novatec is organised internally, not what happens to their resin. Leadership has already called this out — "I would not do the four categories… you just start segmenting this in a vertical fashion." Equal weight also means no priority: nothing tells a first-time visitor where to start, and the four-box layout actively contradicts the "one partner for the whole path" message you want to make.
B3 · Eight competing calls-to-action above the fold-and-a-half. Every one of the four boxes carries both Learn More and Contact Us. Combined with the hero's Contact Us / Watch Video, a visitor meets ten CTAs in the first two screens, of which six say some version of "talk to sales." For an audience explicitly described as researching digitally before engaging a rep, there is no low-commitment next step — no sizing guide, no spec download, no comparison, no "which dryer do I need."
B4 · The Knowledge Center — your single strongest differentiator — is buried and illustrated with stock. It appears fifth, below the fold, in one band, at the same visual weight as Parts & Service, fronted by a stock photograph of a man in a sweater vest holding a pointer. You run one of the most robust technical libraries in the industry and the page gives no evidence of it: no article titles, no volume, no topics, no recency. A thought leader shows the work.
M1 · Equipment photography reads as clip art. Product groups sit on pale-grey cards with hard drop shadows, at inconsistent scales, with no floor, no context, and no size reference. Real machines look like renders. The brief's silhouette rule (cutouts floating directly on the ground, no boxes) fixes this and you already have optimised transparent PNGs for it.
M2 · No material path anywhere on the page. The strongest asset in your argument — the railcar-to-press journey — does not appear. A visitor cannot tell from the homepage that Novatec covers unloading, storage, conveying, receiving, dust, blending, drying and controls as one continuous line.
M3 · Type system is inconsistent and body copy is too small. Body sits around 14–15px against 16px minimum for this age demographic, with mid-sentence bolding scattered through paragraphs ("A.I.-Drying", "blenders and feeders", "Maguire Products"). It reads as SEO keyword bolding rather than emphasis, and it breaks reading rhythm on every paragraph.
M4 · Two stacked bars consume ~100px before the hero starts. The promo strip and the nav compete; on mobile the promo text ("Packed with Useful Guides, Videos, Articles, & More!") runs underneath the hamburger icon and collides with it.
M5 · The cookie banner is a persistent modal over content, bottom-left on desktop and a full-width block on mobile that covers the Systems card entirely.
logo's own sun mark.
trust anchors for this audience.
is used decoratively rather than as the action colour, so the palette carries no hierarchy.
The live site says "A.I.-Drying," "A.I.+E.V. Smart Conveying," "A.I.-Powered Smart Systems," "AI-powered technologies." The approved Round 5 guardrails ban all of it — no "AI drying," no "SmartConveying," no unreleased-capability language. Your own context brief, meanwhile, lists "AI-enabled SmartConveying" as a differentiator.
These cannot both be true on the same page. The four concepts follow the guardrails, because those are the more recent, explicitly approved instruction — so none of them mention AI. If leadership wants the AI story back, it needs an explicit release decision and approved language, and it should be a named section rather than adjectives sprinkled into product copy. Flagging this as the one open decision that blocks a final build.
One change drives everything else:
BEFORE AFTER
───────────────────────────── ─────────────────────────────
Hero: "most advanced…Period!" Hero: the scope claim (railcar → press)
Four category boxes The nine-stage material path — proof, in the first fold
"Whole material path" section Eight product sections, one per stage, in path order
Knowledge Center (band, 5th) Knowledge Center promoted, with real articles
Parts & Service Systems as the connective tissue
About Why Novatec, carrying the resin-spend argumentThe page becomes claim → proof → the parts of the proof. Nothing restates the claim. Today three separate sections make the same "we handle everything" point at three different altitudes, and two of them disagree on the count (four categories vs. a multi-stage path).
The nine-stage path is the hinge. It sits immediately under the hero, breaking the first fold, with no headline of its own — because it is not a section, it is the hero's evidence. Each stage anchors to its product section below, so the graphic doubles as the page's navigation. This is also what converts breadth from a list into a story: a visitor scrolling the product sections is walking their own resin through their own plant.
Ordering note worth defending to stakeholders: Drying sits eighth, after Blending and immediately before the press. That is deliberate and technically correct — blended material must not sit and regain ambient moisture. Anyone in the audience who knows the process will read that ordering as a signal that the site was built by people who know it too. It is a small detail that does more credibility work than any superlative.
Colour. Keep amber #FFC20E / orange #F68B1F as the identity, but give it a job: orange means "live / active / this is the part that is running." Everything else is structure. That single rule does more for hierarchy than any palette expansion, and it makes the path graphic's ignition legible without explanation.
| role | dark ground | light ground |
|---|---|---|
| base | #0B0C0E | #F4F2EE |
| panel | #14161B | #FFFFFF |
| text | #EDEEF0 | #17181C |
| dim | #9BA1A8 | #4B4D53 |
| hairline | rgba(255,255,255,.08) | rgba(23,24,28,.12) |
| accent | #FFC20E | #C56A10 — the deeper orange, for contrast |
| structure | steel #3A424C | navy #1B3A66 |
Orange on cream must drop to #C56A10. #F68B1F on #F4F2EE is ~2.3:1 and fails.
Rhythm. Alternate dark and light sections. Dark is the identity; light is what lets the dark land. A page that is dark end-to-end goes flat by the fourth screen.
Type. Body at 17–19px minimum — this audience is 35–60 and often reading on a plant floor tablet. Measure capped at 62–72 characters. One display face, one text face, one mono for labels and numbers. Eyebrows are letter-spaced sentence case, never all-caps (guardrail). Kill the mid-sentence keyword bolding entirely.
Photography. Two treatments only:
CTA hierarchy. Exactly one primary action per section. Add a research-tier CTA that is not "contact us" — Find your local rep, Explore the Knowledge Center, Learn more — so the 60% of visitors who are still researching have somewhere to go that isn't a sales form.
Each is a complete homepage, same approved copy, same assets, same structure. They differ in what they argue with.
| V1 · Cinematic Dark | V2 · Technical Blueprint | V3 · Editorial Path | V4 · Plant Floor | |
|---|---|---|---|---|
| Argues with | Scale and craft | Engineering rigour | Expertise and restraint | Physicality and confidence |
| Feels like | A film title sequence for a factory | The best equipment manual ever printed | An industry journal that happens to sell equipment | The trade-show booth and the shop floor |
| Ground | Near-black, alternating cream | Warm paper on an engineering grid | Paper, dark only as punctuation | Charcoal with amber wedges |
| Signature move | The travelling starburst sweep; words ignite as it passes | Leader-line callouts on real equipment; the path as a P&ID | The path collapses into a sticky rail that tracks your reading | Hard state flips; stage marquee; stencil plate numbers |
| Best for | Continuity — this is Round 5 resolved | The younger engineer researching before a call | Positioning Novatec as the thought leader | Trade shows, print carry-over, distributor reps |
| Risk | Dark sites can read as "tech company," not manufacturer | Restraint can read as cold if photography is weak | Serif display may test as "law firm" with veterans | Loud enough to fatigue on a long page |
Recommendation. If one has to ship, V1 carries the least stakeholder risk — it is the approved direction, resolved. But V2 is the strongest strategic answer to the brief you wrote: "a company that has nothing to prove but everything to show" is literally a drawing, and it is the direction that most clearly separates you from every competitor running a dark hero with an orange gradient.
The likely real answer is a hybrid: V1's hero and material-path drama, V2's product sections and P&ID logic, V3's Knowledge Center. Worth deciding that explicitly rather than by accretion.
decoration — it is the resin moving through the plant, and the ignition tells you which stages are Novatec's scope. The stages that stay grey (Resin Delivery, the press body) are doing argument work: honesty about where your responsibility begins and ends is more persuasive than claiming everything.
IntersectionObserver, neverre-run. Loops become wallpaper by the second screen.
class. If the script fails, the page is a good static page.
prefers-reduced-motion is a real state, not a fallback. Every "lit" word rendersalready lit, every mark parks at its rest position, the path renders fully ignited. The reduced-motion visitor gets the finished frame, never an empty one.
headline and the path. Word illumination stays page-wide. A signature used everywhere stops being one.
photography**, which is where it currently fails.
<button> / <a>, visible :focus-visible ring, full keyboard path through the nav,the FAQ accordion, and every path stage.
alt on all equipment photography — "Novatec RCU railcar unloading unit," not"product."
<h1>.source assets exceed 11MB — compress before production; the staged assets/ folder here uses the optimised set (18MB total, still ~3× more than it should be for production).
it must be preloaded and served as AVIF/WebP at multiple widths.