Product Website
A marketing site for a B2B SaaS product — built to explain a complex product to a sceptical buyer in under three minutes.
This is the Product Website sample project.
It demonstrates a digital design case study structured as Brief, Process, and Output — with layouts that emphasise the visual work.
On its own page, this artifact renders with the m/n/i layout — a 16:9 hero image at the top, then this prose, then a grid of icon-badged children below. Adding or removing an icon, an image, or children on this artifact (or on its siblings) changes which layout the system picks.
Replace this prose with your own web project, or delete this project from Site Manager. Replace the hero image with a browser screenshot or device mockup of the finished site.
A site that converts a sceptical visitor into a product trial — without a sales call.
This is the Brief section of the Product Website project.
It exists to frame the conversion goal before showing the design — the specific outcome the site had to achieve and the audience it had to persuade.
On its own page, this artifact renders with the i/n/t layout — an icon badge above the title, then this prose, then a grid of text-only children below. Adding or removing an icon, an image, or children on this artifact (or on its siblings) changes which layout the system picks.
Replace this prose with two or three sentences on the conversion goal. Then update the two sub-items with the audience and the constraint.
Engineering managers at mid-market manufacturing companies — high autonomy, low patience for sales process.
No product screenshots — the UI was still in private beta when the site launched.
Information architecture, wireframes, visual design, and a two-week handoff sprint with the engineering team.
This is the Process section of the Product Website project.
It exists to show the stages of the work — from structure through to visual execution and the handoff.
On its own page, this artifact renders with the i/1/m layout — an icon badge above the title, then this prose, with a single child image floated alongside. Adding or removing an icon, an image, or children on this artifact (or on its siblings) changes which layout the system picks.
Replace this prose with two or three sentences on how you worked. Replace the sub-item image with a real wireframe board, component audit, or design system screenshot.
Twelve page templates mapped to the conversion funnel before any visual decisions were made.
This is the Wireframes sub-item in the Process of the Product Website project.
It exists to show that structure came before aesthetics — and that the conversion logic was designed before colour, type, or imagery.
On its own page, this artifact renders with the m/0 layout — a full-bleed hero image with the title and this prose layered over it; no children render below. Adding or removing an icon, an image, or children on this artifact (or on its siblings) changes which layout the system picks.
Replace this prose with one paragraph on your IA and wireframe approach. Replace the image with a screenshot of your real wireframe board or a sitemap diagram.
A live marketing site — eight pages, one design system, and a 38% improvement in trial sign-up rate.
Trial sign-up rate improved from 2.1% to 2.9% in the first 60 days after launch.
This is the Output section of the Product Website project.
It exists to close with the result — what launched, and whether it worked.
On its own page, this artifact renders with the i/1/t layout — an icon badge above the title, then this prose, with a single text-only child floated to the side. Adding or removing an icon, an image, or children on this artifact (or on its siblings) changes which layout the system picks.
Replace this prose with two or three sentences on what shipped. Then update the sub-item with the measurable outcome — conversion rate, time on site, or whatever metric the client used to define success.
Disciplines
The design fields we practise — branding, digital, print, and motion. Each links to the projects that came from it.
Websites, products, and digital experiences — designed to work and built to ship.
This is the Disciplines root of your site — the first section visitors see after the hero.
It tells visitors what kinds of design you make before they look at any project. Disciplines are linked to projects via mappings, so each discipline page below automatically lists every project you have tagged with it.
On its own page, this artifact renders with the i/n/i layout — an icon badge above the title, then this prose, then a grid of icon-badged children below. Adding or removing an icon, an image, or children on this artifact (or on its siblings) changes which layout the system picks.
Replace this prose and the tagline with a sentence that frames how you think about your practice. The discipline cards below are children — replace or delete them in Site Manager.