The gap
A homeowner can see 58 melamine colours. They still can't see their kitchen.
The current site does the catalogue job well. Swatches are browsable, filterable by edging and sheet size, and there's a working sample cart. What it can't do is compose.
A renovating homeowner is not choosing a melamine colour. They're choosing a combination: cabinetry, benchtop, splashback, flooring and wall, all at once, across four or five different Prime ranges that each live on their own page. Today that comparison happens in their head, or in a shoebox of samples on the bench, or not at all — which is when they defer to whatever their kitchen maker already has in the van.
Prime Studio closes that gap. It is one screen where the whole room exists, every surface is one tap from being swapped, and the ranges are unified — Melamine, Veneer, Laminate, Stone and Porcelain sitting side by side because that's how they'll be installed.
The commercial job
Every board must end in a sample order. Samples are the point at which a browsing homeowner becomes a lead — and the point at which colour accuracy stops being the website's problem. The whole flow is designed to funnel there without ever feeling like it's selling.
Design principles
Six rules the interface has to obey
Start from a look, not a SKU
Nobody arrives wanting Devon Oak. They arrive wanting "warm, light, not too busy". Every entry point accepts that vagueness and resolves it into products.
Never show a surface alone
A swatch out of context is a decision the user can't make. Products appear against the rest of the board, always.
One tap to change, one tap to undo
Exploration only happens when it's cheap. No modals, no confirm dialogs, no losing your place.
The board is the artefact
It gets a name, a link and a PDF. It survives the session, the device and the conversation with their partner.
Guidance, never gatekeeping
Suggest, sort and nudge. Never block a combination because an algorithm disapproves — bad taste is allowed and often turns out to be good taste.
What's shown is orderable
If a finish or size isn't stocked, it isn't in the drawer. The tool must never invent a product the fabricator can't buy.
Four ways in
People arrive with wildly different amounts of certainty
One entry point will lose most of them. Four, all landing in the same builder, means the tool meets the user where they are. Each is a card on the tool's landing screen and each is also reachable from elsewhere on the site.
| Entry point | For someone who… | Lands on | Placement |
|---|---|---|---|
| Help me choose | Has no idea where to start | 5 visual questions → 3 ranked colour ways | Tool landing, homepage hero |
| Start from a look | Knows the vibe, not the products | Colour way gallery, filterable by room and tone | Tool landing, inspiration nav |
| Start from a room | Wants to play, no guidance needed | Empty room template, all slots unset | Tool landing |
| See it in a room | Is already looking at one product | Builder pre-loaded with that product in its slot | Every product & swatch page |
The fourth is the highest-leverage one and the cheapest to add: a single button on every existing swatch detail page that drops the product into a board. It converts the catalogue traffic Prime already has.
Rooms at launch
Kitchen — the flagship, and the room with the most surfaces in play. Bathroom & laundry — fewer slots, faster to complete, high sample intent. Living & dining — joinery, shelving and wall panelling; the room where Prime Veneer and Adorno wall panels earn their place.
The style questions
Five questions, all visual, all skippable
The quiz exists to produce a starting board, not a personality verdict. It should take under 45 seconds, never require typing, and show a persistent "Skip — just show me everything" out. Answers are stored on the board so the user can retake or adjust from inside the builder.
- Q1Which room are you working on?Kitchen · Bathroom & laundry · Living & diningRequired. Determines the slot set and the template. Everything else is optional.
- Q2Which of these rooms feels most like yours?Four photographs, no style names shown · multi-select allowedThe single most informative question. Labels ("Coastal", "Warm minimal", "Dark & moody", "Classic timber") are revealed only after answering, so people respond to the image instead of to a word they think they're supposed to like.
- Q3Light or dark cabinetry?Light · Mid · Dark · Show me bothMaps directly to the tone value on every product. "Show me both" returns a light and a dark version of the same colour way — a genuinely useful comparison rather than a dodge.
- Q4How much timber do you want?None · A touch · Timber-ledControls how many woodgrain and veneer surfaces appear in the result. The clearest differentiator across Prime's range and the one homeowners have the strongest opinion about.
- Q5What should the benchtop look like?Stone look · Solid colour · Timber look · Not sure yetSteers material family — Prime Stone and Porcelain for genuine stone, Prime Laminate for stone-look at a different price. Pair with an optional, softly-worded budget question rather than asking about money directly.
Don't ask about budget. Ask about the benchtop.
"What's your budget?" makes people defensive and produces bad data. The benchtop choice already sorts users across the price spectrum — engineered stone, porcelain, HPL and solid surface land in very different places — and it does so while feeling like a design question.
Pick as many as you like
What the quiz returns
Three colour ways, ranked, each shown as a hero room photo with its product line-up beneath. Framed as "Three starting points" — not "your result". Each has Open in builder as its primary action and Not quite as a secondary, which refines the ranking and reshuffles rather than restarting the quiz.
Colour ways
Curated sets are the product, not a feature
A colour way is a named, hand-authored combination of four to seven products that the Prime design team has confirmed works — with a hero image, a one-line reason and a set of relatives. It is the difference between a tool that overwhelms and a tool that reassures.
Anatomy of a colour way
Content
- Name drawn from the range's own vocabulary — Nordic Ash, Gully Green, Charred Walnut, Triple Duck Egg
- Hero image — a real install where possible, a render where not
- Product line-up — one product per slot, with range and finish
- Why this works — one sentence, written by a designer, not generated
Relationships
- Lighter / darker version of the same idea
- Warmer / cooler sibling
- Same look, different budget — swaps stone for a stone-look laminate
- Tags — room, tone, warmth, timber level, material tier
Ship with twenty to thirty, and give them an owner
Fewer than about twenty and the gallery looks thin; more than forty and the curation stops reading as curation. They need a named owner inside Prime who reviews them each time the range changes — a colour way pointing at a discontinued SKU is worse than no colour way at all. This is the plan's most under-estimated ongoing cost.
Related products
Separate from colour ways, and more granular: each product carries authored pairs well with links. Sitting on Devon Oak, the drawer surfaces the four benchtops the design team would actually put with it. These links do double duty — they seed the gallery and they power the "goes with your board" sort inside the builder.
The board builder
One screen, five parts
Everything above funnels here. The builder is the only screen that really matters, so it earns the detail.
Toggle: Room view / Flat board view
Corner: camera angle ▾ · full screen ⤢
Surface slots by room
Slots are fixed per room and each declares which ranges are eligible. This is what keeps the product drawer short and stops the tool offering a benchtop material as a wall panel.
| Room | Slots | Eligible ranges |
|---|---|---|
| Kitchen | Overhead cabinetry · Base cabinetry & island · Benchtop · Splashback · Edge tape · Flooring · Wall colour | Melamine, Veneer, Ultraglaze, Dezignatek (doors) Stone, Porcelain, Laminate, Durasein (benchtop) Kopine (flooring) |
| Bathroom & laundry | Vanity / joinery · Vanity top · Wall panel · Splashback · Flooring · Wall colour | Melamine, Ultraglaze, Dezignatek (vanity) Stone, Porcelain, Durasein (top) Adorno wall panels |
| Living & dining | Wall panelling · Media & storage joinery · Shelving · Feature wall · Flooring · Wall colour | Veneer, Melamine, Adorno Kopine (flooring) |
Two slots that aren't Prime products — and should stay
Wall colour and flooring aren't sales opportunities, but leaving them out makes every board look wrong. Offer a small curated set of neutral wall colours and floor tones purely as context. They're set dressing, they're clearly marked as "not a Prime product", and they're excluded from the sample cart.
Swap mechanics
Changing a surface has to be almost free
Exploration is the entire value of the tool, and exploration dies the moment a change costs three taps and a page load. The interaction spec:
- 01
Open the drawer from either direction
Tap the surface in the room, or the slot in the rail. Both open the same product drawer, filtered to that slot's eligible ranges.
tap zonetap slotkeyboard: arrow + enter - 02
Preview before committing
Hovering (desktop) or pressing and holding (touch) a swatch applies it live to the canvas without closing the drawer. Release without lifting to revert. Users can rip through twenty options in ten seconds.
- 03
Sort by what already works
Drawer default order is Goes with your board — driven by the authored pairing links and the tag rules below. Alternatives: Popular, Newest, Lightest→darkest, A–Z. Filters mirror the existing catalogue (finish, edging, sheet size) so behaviour is consistent site-wide.
- 04
Lock what you love, shuffle the rest
The feature that makes the tool feel alive. Pin the cabinetry you've settled on, hit shuffle, and every other slot re-rolls to a compatible option. It turns a paralysing 250-product catalogue into a slot machine with good taste.
- 05
Undo, redo, compare
Unlimited undo. Compare snapshots the current board and shows two versions side by side — the way people actually decide. Cap it at two; three-way comparison helps nobody.
- 06
Carry the real product detail
Each chip shows name, range and finish, plus a matched-edge-tape flag where one exists. Tapping through opens the full product page in a panel — technical data, warranty, sheet sizes — without losing the board.
Pairing logic
How "goes with your board" actually works
No machine learning, no black box. Every product gets four tags at catalogue time, and a short set of rules ranks the drawer. It's explainable, it's editable by the design team, and it degrades gracefully.
| Tag | Values | What it does |
|---|---|---|
| Tone | 1 – 5 (light → dark) | Drives contrast rules and the light/dark quiz answer |
| Warmth | Cool · Neutral · Warm | Stops a cool grey cabinet landing under a honey oak benchtop |
| Pattern energy | Plain · Subtle · Figured · Statement | Enforces the one-hero-surface rule |
| Material family | Solid · Woodgrain · Stone-look · Textured | Feeds the timber-level question and the budget-tier swap |
The ranking rules
- One statement surface per board. Once a Figured or Statement product is placed, other slots demote theirs.
- Warmth stays within one step. Cool and warm on the same board rank last, not never.
- Cabinetry and benchtop want tone separation of 2+ — or a deliberate tonal match, which is a distinct authored look rather than an accident.
- Authored links win. Any explicit "pairs well with" from the design team outranks every calculated score.
Rank, never block
The rules only reorder the drawer. Everything remains selectable, nothing is greyed out, and there is no "this doesn't go" warning. A tool that tells a homeowner their taste is wrong is a tool they close.
Library imagery
Every finished job becomes an entry point
Real installs outperform renders for inspiration, and Prime already generates them continuously through fabricators and specifiers. The plan turns that photography from marketing decoration into navigable product data.
Tag on ingest
Every library image records the actual products used, by slot. A photo with no product tags doesn't get published.
Image → board
Use these products on any gallery image opens a builder pre-loaded with that exact line-up, ready to be adjusted.
Product → image
Product pages gain "seen in 7 projects". The catalogue and the gallery reinforce each other instead of sitting in separate silos.
Gallery filters mirror the quiz — room, tone, timber level — so a user who abandons the quiz can browse to the same place by hand.
Saving & handoff
Three exits, one of which pays for the project
01 · Order samples
The primary action, always. The board hands its products to the existing sample cart in one tap, de-duplicating and respecting whatever per-order limits already apply. Free samples framed as the natural next step, not a form.
02 · Save & share
Every board gets a short code — PRIME-4K9X — and a link, with no account required. Email capture is offered afterwards, as a way to find it again. A shared link opens read-only with "make my own copy".
03 · PDF spec sheet
A single page: the board image, then a schedule table with product name, range, finish, code, edge tape and sheet size. Designed to be printed and put on the bench in front of a kitchen maker.
Phase 2: send it to someone who can build it
"Send to a fabricator" turns a board into a genuine lead — the board, the room and the user's region routed to a stockist or kitchen maker for quoting. Worth building only once boards and sample orders show real volume, and only with the merchant network's agreement on how enquiries get handled.
Visual fidelity
How real does the room need to look?
This single decision drives most of the budget, most of the timeline and almost all of the asset work. Three viable approaches:
| A · Composed board | B · Layered photo masking | C · Real-time 3D | |
|---|---|---|---|
| How it works | Swatch tiles and product photography arranged on a canvas. No room. | Pre-shot room photos with a mask per surface. The product texture tiles into the mask under a lighting overlay. | WebGL room scenes with true PBR materials and lighting. |
| Build effort | 3–5 weeks | 8–14 weeks | 5–9 months |
| Asset burden | Existing swatch images. Essentially none. | 3–6 scenes per room, a mask per surface, plus a seamless tileable texture at known mm scale for every SKU (~250). | Full PBR map sets per SKU (albedo, normal, roughness), scene modelling, ongoing 3D capability in-house. |
| Realism | Low — but honest. Reads as a designer's sample board. | High on matte flat surfaces; weak on gloss, reflection and large-scale stone veining. | Highest. Handles gloss, reflection and lighting properly. |
| Per-new-SKU cost | Nil | One texture capture and scale check | A full map set — a real ongoing tax on the range |
| Mobile performance | Trivial | Fine | Needs care |
| Main risk | Feels underwhelming next to competitors' visualisers. | The texture pipeline is the project. Underestimate it and the tool ships with 40 SKUs. | Cost only pays back if you're also selling configured product online. |
| Verdict | Ship first | Then add | Not now |
The recommendation: B, staged through A
Build the composed board first and ship it. It delivers the actual job-to-be-done — confidence in a combination — and it de-risks everything expensive: the taxonomy, the colour ways, the sample handoff and the save/share plumbing all get proven against real traffic before a single room is photographed.
Then add room visualisation as a layer on the same board, one room type at a time, starting with the kitchen. Cabinetry and wall panels are matte and flat — exactly where masking looks best — so the incremental realism is at its highest there. The flat board never goes away; it stays as the toggle, and it remains the export format for any product without a texture yet.
One asset rule that will bite if it's missed
Tiling works for melamine and woodgrain because the pattern repeats at sheet scale. It does not work for Prime Stone and Porcelain, where a Calacatta vein runs metres across a slab — tile it and you get an obviously fake chequerboard. Those SKUs need full-slab imagery scaled and cropped to the surface, not a repeating tile. Budget for that separately and confirm it with the stone supplier before committing to option B.
Option C stays on the table for a later trade-facing configurator, where a joiner is specifying a real job and gloss accuracy matters commercially. It's the wrong first investment for a homeowner deciding whether they like oak.
Data model
What the CMS has to hold
Nothing here is exotic, but every field below is load-bearing. Getting the schema right before the build starts is what keeps phase 2 from being a rewrite.
| Entity | Fields |
|---|---|
| Product | id · sku · name · range · finish (Velvet / Embossed / Woodgrain / Timberland / Gloss / Soft-matt) · sheet sizes · edge tape options · tone 1–5 · warmth · pattern energy · material family · eligible slots[] · swatch image · tileable texture + mm scale · full-slab image (stone) · pairs-well-with[] · sample available · status |
| Colour way | id · name · room · hero image · slots{slot → product} · rationale · related[] (lighter / darker / warmer / cooler / different budget) · tags[] · published |
| Room template | id · room · scene image · camera angles[] · slots[] · mask per slot · lighting overlay per slot · surface scale (mm per pixel) |
| Board | id · short code · name · room · template · slots{slot → product} · quiz answers · locked slots[] · created / updated · owner (nullable) · version history |
| Project image | id · image · room · products{slot → product} · location · fabricator credit · tags[] · published |
The four bold fields are the whole project
Tone, warmth, pattern energy and material family have to be applied to roughly 250 SKUs by someone with a designer's eye, working from physical samples under consistent light. It is a few weeks of unglamorous work, it cannot be automated from swatch images, and every intelligent behaviour in the tool depends on it. Start it now, in parallel with design.
Access & performance
Non-negotiables
Accessibility
- Never colour alone — every swatch carries its name, and the board strip is a labelled list, not a row of unlabelled squares
- Full keyboard path: slot rail → drawer → swatch → apply, with visible focus throughout
- Canvas surface zones exposed as named buttons for screen readers, with a text list of the current board as a fallback
- Preview-on-hover has a tap-equivalent; no interaction is pointer-only
prefers-reduced-motionrespected on every transition
Performance
- Mobile first — most of this traffic is a phone on a building site or a couch. The builder must be one-thumb operable
- Drawer swatches lazy-load; textures load only for the visible slot
- AVIF/WebP with sensible fallbacks; swatch thumbs under 15 KB
- Board state in the URL so it survives a refresh and can be shared before saving
- Room compositing done client-side on canvas — no server render round-trip per swap
Say plainly that screens lie
A persistent, unmissable note — on the board, in the PDF, and beside the sample button — that on-screen colour is indicative only and a physical sample should be checked before ordering. This protects Prime commercially, and it makes ordering samples feel like the sensible thing to do rather than an upsell.
Roadmap
Content first, then the tool, then the room
Catalogue & content groundwork
4–6 weeks · runs in parallel with design- Tag all ~250 SKUs with tone, warmth, pattern energy and material family, from physical samples
- Define slots per room and map eligible ranges to each
- Author 20–30 colour ways with rationales and relationships; assign an ongoing owner
- Audit existing project photography for product-tagging viability
- Build the CMS schema above
Prime Studio v1 — the composed board
6–8 weeks- Style questions, colour way gallery, all four entry points
- Flat board builder: slots, drawer, swap, lock, shuffle, undo, compare
- Save with short code, share links, PDF spec sheet
- Sample cart handoff into the existing system
- "See it in a room" button on every product page
Room visualisation
8–12 weeks · kitchen first- Texture capture pipeline at consistent mm scale; full-slab treatment for stone and porcelain
- Kitchen scenes shot and masked, 2–3 camera angles
- Canvas compositing with lighting overlay; room/flat toggle
- Bathroom, then living & dining, once the kitchen proves the pipeline
Leads & trade
scoped after v1 data- Send board to a fabricator or stockist for quoting
- Saved boards dashboard and light accounts
- Trade mode: schedules, quantities, spec sheet exports, bulk sample ordering
- Library image reverse lookup across the whole catalogue
The critical path is content, not code
Phase 1 cannot start well until phase 0's tagging is underway, and phase 2 is gated entirely on texture assets. If the schedule slips, it will slip here — so resource the tagging and colour way authoring as a real workstream with a named owner, not as something the design team fits around their day job.
Success measures
What to instrument from day one
Also worth logging: which slot users fill first (likely cabinetry, but verify — it should be the default focus), which colour ways get opened versus which get edited, and which products get swapped out most often.
Open questions
Answer these before build starts
- Swatch imagery. Do consistent, colour-accurate, high-resolution captures exist for every current SKU, shot under the same lighting at a known scale? If not, that photography is phase 0 work and it's the long pole.
- Colour way ownership. Who inside Prime authors and maintains them, and how does the process hook into range changes and discontinuations?
- Sample cart constraints. Are there per-order quantity, size or freight limits that would cap board size or force a "choose your top five" step?
- Door profiles. Dezignatek thermoform doors change a kitchen's look as much as colour does. Are profiles in scope for v1, or is the board colour-only to start?
- Brand scope. Prime-only, or the full NZ Panels Group stack — Bestwood, Durasein, Wilsonart, Mercer, Ultraglaze, Kopine? A board that can specify a sink and a benchtop together is far more useful, but it's a bigger catalogue and a wider governance problem.
- Trade users. Same tool with a mode switch, or a separate specifier experience? This plan is built for homeowners; retrofitting trade later is easier than serving both badly now.
- Platform. What's the new site built on, and can it hold the schema above natively — or does the tool need its own service alongside it?