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
- 3Products explained as one system
- 2Problems, answered by 3 solutions
- 1Interactive product film, exported as 1080p video
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.
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.
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.
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.

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.

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.

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.