Product
Motion Labs
The website, client portal and AI ad system for an AI-native video agency in Dubai, designed and built solo.
Company
Motion Labs, Dubai
Role
Founding product designer · design and build, solo
Duration
4 months · 2026
Toolkit
Framer, React + TypeScript, Supabase, Claude, Google Apps Script, Figma, ChatGPT, Gemini, Photoshop
At a glance
The problem
An agency that sells content people can’t scroll past had a template site with a form for a hero, and every order ran through calls and email.
What I made
A site that captures a lead on the first click, a self-serve client portal the team uses as its CRM, a 236-post blog system and a rulebook that keeps AI ads on brand.
40+ custom code components
14-screen client portal
236 blog posts, one system
Context
Motion Labs is an AI-native content and video agency in Business Bay, Dubai. It makes reels, shorts, explainers, launch films and ads for startups, and promises most social content in under 24 hours.
I didn’t join through a portfolio review. Motion Labs sent a 20-question taste test for a Creative Designer role, due the same day. The first question asked for a brutal audit of their website. The last asked for an ad with no brief and no call, built around their line “Being AVERAGE was never an option.”
I answered as if I was already on the team. The agency already had AI for output. What it was hiring for was the human layer: taste, and someone who checks the work before it ships. That idea shaped everything I built after, as the founding product designer and the only person designing and building it.
The problem
Three problems, in the order a client meets them.
The site had to do the job it sells. The old site opened on an inquiry form and ran on a free Framer subdomain. For an agency that promises content people can’t scroll past, that lost the argument before anyone read a word.
Ordering had to be self-serve. A subscription agency that promises next-day delivery can’t put a discovery call in front of every order. Clients needed to brief, price and book work on their own, and the team needed one place to see all of it.
Output had to stay on brand at AI speed. The team publishes blog posts and ads in volume, much of it made with AI. Without rules, every image drifts toward what the model likes: warm orange light, logos nobody asked for, a new style every week.
What success looked like
A lead from the first interaction, not the last section.
The offer explained as a funnel, because that’s how founders already think about marketing.
A client can go from landing page to paid order without talking to anyone.
The team sees orders, clients and money in one admin view.
Anyone on the team can generate an on-brand image.
The hero is a single field. Paste a URL and the investigation begins.
A website that does the job it sells
I built the whole site from scratch, with no templates and no marketplace components: more than 40 code components and 20 smart components, and one teal, #01D9A8, carrying everything from the buttons to the funnel panel.
The first interaction is a form field
Most agency sites save the form for the footer. Here the hero is a single input: “Paste your URL. Your website’s been keeping secrets.” Paste it and the next field asks for an email while the copy switches to “Case opened. The investigation begins.”
The detective framing gives visitors a reason to hand over their site: curiosity about what’s wrong with it. It gives the team a lead with a URL attached before the visitor has scrolled once.
The offer, told as a funnel
A large green panel opens with “People can’t scroll by”, animated letter by letter, then splits the offer into three stages:
Top of funnel: launch films. The job is awareness; nobody is selling yet.
Mid funnel: product demos that make a complicated product easy to follow.
Bottom of funnel: case studies and testimonials that remove the last objections.
Each stage carries a real video card, so the section shows the work while it explains it.
A word search instead of a service grid
“Everything your brand needs” is a word search. Reels, Shorts, Podcasts, Testimonials, Explainers, Documentaries, Trailers and Vlogs hide in a grid of random letters, each with one line of copy. Eight formats in a list are easy to skim past. A puzzle asks to be read.
The cost argument and the proof
A comparison prices the alternative: social, writing, ads, PR, a website and branding bought separately come to $14,000 or more a month, split by situation so a founder finds themselves before they find the number. Testimonials are screenshots of real client messages under “Real Screenshots. Real Clients. No Retakes.” The FAQ reads like a lab log, IN and OUT, which suits a brand whose logo is a flask.
The offer told as a funnel: launch films, product demos, then proof.
A client portal inside the website
The rule I set: a founder should be able to land on the site, order a video, pay and track it without a call. I built the portal inside the same Framer project, so the marketing pages and the product share one domain and one design system, with Supabase behind it. I wrote the code with Claude as my pair programmer.
Framer is a website builder. Teams that need a CRM bolt on a SaaS tool and pay hundreds of dollars a month for it. I couldn’t find anyone who had built a complete CRM inside Framer itself, so as far as I know this was a first: accounts, orders, payments and an admin view, living in the same project as the marketing site, with no CRM subscription.
It has 14 screens: sign-up, login, email verification, password reset, dashboard, order, plans, wallet, invoices, reviews, affiliate and admin.
Start a project in four steps
Services. Pick the formats, then any add-ons. The price updates with every choice, so nobody reaches checkout surprised.
Brief. What the work is for, attached to the order instead of buried in an email.
Delivery. The earliest date comes from the team’s real capacity. If the queue is full, the date moves. The agency’s headline claim is speed, so the date a client sees has to be one the team can keep.
Review. Everything on one screen before payment.
Guests first, accounts later
The decision I’d defend hardest: visitors can build a whole order as a guest, and the draft is saved. Sign-up comes when they’re ready to pay, and the order is waiting for them. Asking for an account before someone has seen a price asks for commitment before giving anything back.
The dashboard is the CRM
Signed-in clients get tabs for orders, wallet and tokens, plans, invoices, affiliate and reviews. Motion Labs runs on a subscription you can scale or pause, so clients hold a balance and spend it on work. Staff sign in to an admin view of the same data, and that view is the agency’s CRM.
The first dashboard lived in one code file. As tabs piled up, a change in one could break another, so I rebuilt it as a multi-file component split by tab.
Four steps from services to review, with the price updating on every choice.
The systems around it
Lead capture without a chatbot
The “Need help?” button opens a chat widget with no text box. Visitors choose from buttons, and every path ends in a website or email lead sent straight to a Google Apps Script webhook. Free text brings spam, half sentences and the expectation of a live reply. Buttons give the team a sorted lead every time.
A blog system for 236 posts
The blog is the agency’s search play: 236 posts today, from AI video guides to city pages, plus nine service pages. At that volume you can’t ask writers to fill a separate FAQ field for every post, so I built an accordion that reads the post’s text, finds the question and answer pairs, and renders them on its own. Writers write the way they always have, and the FAQ shows up.
A rulebook for AI-generated ads
Each ad pairs one AI image with one blunt line, like a tap pouring money into a cracked bucket under “Don’t pay Fortune to be FORGETTABLE.” AI makes the first image fast. The tenth is the problem: the teal turns orange, a logo appears, a fix to one hand redraws the background. So I wrote a rulebook anyone can paste into Gemini or ChatGPT with the reference images:
Colour: teal replaces every warm light source, from flames to spotlights to cave walls.
Edits: every revision lists numbered fixes to “the currently generated image” and ends with “Do not change anything else.”
Styles: a library of nine, from risograph grain to ink wash.
Fixes: a table of known failures and the exact sentence that fixes each.
It also tracks 14 recurring concepts so the feed reads as one campaign. The rulebook doesn’t replace taste. It removes the boring failures, so review time goes to the only question that matters: is the idea any good?
Decisions and trade-offs
The portal inside Framer, not a separate app or a paid CRM. One project and one design system, no monthly SaaS bill, and marketing edits pages without touching the product. The cost: Framer isn’t built for apps, which led to the multi-file rebuild.
A URL field as the hero. A lead on the first interaction. The cost: it’s a form first, so the copy has to make it feel like an offer, not a gate.
Guest drafts before sign-up. Commitment comes after value. The cost: extra logic to attach a draft to a new account.
Delivery dates from real capacity. Promise only what the team can keep. The cost: some dates look later than a competitor’s fixed claim.
Buttons-only chat. Sorted, spam-free leads. The cost: unusual questions get routed to email.
One AI image, one blunt line, one teal. The rulebook keeps the feed consistent.
What shipped
A 271-URL site: the marketing pages, 9 service pages and 236 blog posts
A 14-screen client portal with a 4-step order flow and an admin CRM
40+ code components and 20+ smart components, all built from scratch
An ad rulebook with 9 styles and 14 recurring concepts
These are output numbers. The ones that matter more, like leads from the URL field, orders placed without a call and organic traffic to the blog, belong to the business. I’ll add them once Motion Labs clears them for sharing.
What I’d change next
Put names and company logos on the testimonial screenshots. The messages carry the proof on their own; a name would double it.
Track the URL field end to end, from paste to email to booked call, so the hero gets judged on numbers instead of taste.
Pick one location story. The company sits in Dubai, the homepage targets San Francisco and the blog covers Indian cities. The homepage should say plainly where the agency stands.
Move the reach numbers on the About page up to the homepage, where a founder decides whether to keep reading.
What I learned
AI made the volume possible. Written rules made it usable. A team that generates fast needs more standards, not fewer.
Building the backend changed how I design. Once I had to work out a delivery date from team capacity, I stopped drawing date pickers that promise things the business can’t keep.
The best lead form asks for something the visitor already wants to give.
Next case study