All work

Company website, 2026

Kaaliber: one idea, three products

The website for a company building an autonomous growth engine. It explains one big idea to advertisers, then introduces three products: Graviiity, Photonplus and Orbiiit.

Role
Product designer, design and front end
Platform
Website
Year
2026
Scope
Story, layout, motion, product film, careers page
  1. Step 1Research and define
  2. Step 2Ideate and structure
  3. Step 3Design and build
Kaaliber website hero: A machine that thinks like the best growth team
  • 3Products explained as one system
  • 2Problems, answered by 3 solutions
  • 1Interactive product film, exported as 1080p video
01

Step 1

Research and define

Work out what a visitor must believe by the end of the page, and in what order.

Understand the problem

Kaaliber makes a big claim: an autonomous engine that cuts out the ad-tech middle layer, buys media direct and gets paid on results. The company is new, and its three products are each a full dashboard. A visitor has to grasp the idea in seconds and then see how the products fit together, without a wall of feature lists.

Problem statement

Who: founders, lean teams and in-house growth teams who spend on ads but cannot see where the money goes.

Pain: agency fees, markups and fraud eat the budget, and the smallest real performance-marketing team costs about $300K a year.

Why fix it: a new category is only believed when the problem is felt first. The page has to make the leak obvious before it asks anyone to trust a machine.

Design principles

  • Problem before product. Open with the idea, then the leak, then the answer.
  • One number per card. 45¢ of every dollar. $300K a year. Big type does the explaining.
  • Show real product. Each product appears as its real dashboard, not an icon and a promise.
  • Be honest about the claims. Example conversations are labelled as illustrative, and the roadmap to autonomy is stated as a goal, not a promise.
02

Step 2

Ideate and structure

Turn the argument into a page that reads top to bottom as one story.

Mapping the story

The page is a single argument. Each section answers the question the previous one raises, and the navigation mirrors it: Problem, Solutions, Products, Channels, FAQs and Join us.

The argument
Ideaa machine that thinks like a growth team
→
Problemthe leak and the shift
→
Proof of credibilityplatforms and operators
→
Solutionbuy direct, optimise payback, paid on results
The product
Two ways to use ithand it the whole job, or plug it into your team
→
Chat demotell it what you want
→
Three toolsacquire, create, retain
→
Channels
The close
FAQsix core questions
→
Call to action
→
Careersseparate page

Structure decisions

  • Two audiences, one page. Offerings split into running the whole job for lean teams and plugging into an in-house team, so neither has to translate.
  • A closed loop, not a feature list. The three products are numbered Acquire, Create, Retain and drawn as one connected path.
  • Trim what does not help. The FAQ was cut to six core questions, and sections that were not earning attention were hidden.
  • Hiring lives on its own page. The same site that explains the product also lists open roles.
03

Step 3

Design and build

Give the argument a voice in type, charts and motion, then build it as a fast static site.

The problem, in two cards

Two cards carry the whole problem. The light one shows the leak: of every dollar routed through the middle layer, only 45¢ buys a real user. The dark one shows the shift: 90% of businesses are small and cannot hire a growth marketer, with a grid of dots showing the ones locked out.

Problem section with two cards: the leak, 45 cents of every dollar, and the shift, $300K a year for the smallest performance marketing team
The leak and the shift: one big number on each card.

The solution, as three small diagrams

Each answer has its own drawing. Buy direct shows a dollar skipping agency, reseller and network to reach the publisher. Optimise payback shows creative and retention running in one loop around LTV:CAC and ROAS. Get paid on results shows the brand's return and Kaaliber's share rising together.

Solution section with three diagrams: buy direct, optimise payback and get paid on results
Buy direct, optimise payback, get paid on results.

Three products, one loop

Graviiity finds and buys customers, Photonplus makes the ads and swaps them before they go stale, and Orbiiit brings customers back. They appear as real dashboards connected by a drawn path, so the loop reads as one engine. A chat demo above them shows the plain-English promise: describe a campaign and the agents set it up.

Capabilities section showing the Photonplus and Orbiiit dashboards joined by a dashed path
Photonplus and Orbiiit, connected as steps two and three of the loop.

Product film

Beyond the page, I built a showreel at /showreel: one user grows one app through Graviiity, Photonplus and Orbiiit. Every frame is a pure function of a single clock, so the film plays by scrolling, plays in real time with a generated score, and renders frame by frame to a 1920×1080 MP4.

How it was built

A Next.js and React site with Tailwind, exported as static files for speed. Framer Motion drives the reveals and the connecting paths, Swiper and Lottie handle product carousels and small animations, and the showreel runs on its own timeline engine.

Next case study QuantumQuake Studio website, 2026

Hiring for a product that has to get it right?

Bring me your most complex platform. I'll bring 10+ years of product design, the leadership to align a room, and the skills to build the first version myself.

  • Product design and design leadership roles
  • Enterprise SaaS, marketplaces, fintech and AI products
  • Remote, hybrid or relocation