Portfolio·Works·SLATE

SLATE Prompt-to-Video

Concept · Self-initiated AI Product Design Design System

Prompt to video: I designed an AI video-generation product from scratch — the landing page, the app interface, the paywall and the upgrade popup, along with its own design system.

Role
Product Designer (self-initiated)
2026
Platform
Web · Responsive
Industry
AI / Creative Tools
My role

The whole process was solo: research, product decisions, flow, wireframes, UI kit and final screens.

01SCOPE & OUTPUT

From research to final screens, end to end.

0
Days
The whole process, from research to final screens.
0
Final Screens
Desktop and mobile landing, the app chain from empty state to last-video warning, the paywall and the upgrade popup.
0
Component Variants
37 component sets; every button, card and input on screen is an instance from this kit.

Self-initiated concept — figures describe design scope, not business results.

Landing App Paywall Upgrade popup UI Kit Desktop + Mobile
02PROBLEM

You pay for the videos you can't use.

In the research, users call these products “slot machines”: you roll, most rolls miss, and every roll costs money. I grouped the complaints into six themes and built the design on them.

Business Problem

The money comes from marketing teams, not consumers. Their problem isn't model quality, it's being able to defend the output. The product has to sell trust, not speed.

User Problem

Credit is spent at generation, not on acceptance or download. One usable clip needs several attempts, all of them paid, and no pricing screen says so. Failed renders burn credit too, and the error rarely says why.

Design Challenge

The problem isn't the quality ceiling, it's variance: the same effort gives a different result each time. The design's job isn't a better model. It's making cost, waiting and failure predictable.

03RESEARCH

I read the market and the complaints before I designed.

I ran the benchmark and desk research side by side. Every figure traces back to a source with a stated method. Vendor claims are flagged separately, and numbers I couldn't find stayed out.

SLATE — competitor product scan board
Competitor Product Scan
I read products with the same shape (landing, prompt interface and paywall) through their free tier, limit mechanics and visual language. Alongside the scan I read third-party revenue data and industry reports.
18 products · free tier · limit mechanics
SLATE — Awwwards and visual direction scan
Awwwards Visual Direction Scan
I stepped outside the category and looked for visual direction in editorial sites carried by typography.
Editorial · typography first
SLATE — complaint analysis board
Complaint Analysis
Trustpilot, G2, BBB files and official forums. I kept anecdote as anecdote and data as data.
Paying credits for output you can't use, Billing and cancellation, Variance rather than the quality ceiling, Wait times worst on the free tier, Prompts being ignored, Character and scene consistency
SLATE — moodboard and three visual direction candidates
Moodboard
I gathered references from inside and outside the category on one board, then narrowed them to three candidate visual directions before choosing.
References → three candidate directions
SLATE — happy path flow diagram
Flow Diagram
I mapped the happy path from landing to library and marked the one step that spends a video.
Happy path · one paid step
SLATE — critical question bank
Critical Question Bank
I wrote 24 critical questions and tied each one to the design decision it changes.
Product · user · commercial
The research, in numbers
18
Products Benchmarked
Video generators and the video tools around them, compared under the same headings.
7
Site Comparisons
Product sites read side by side, section by section.
6
Complaint Themes
Scattered complaints, reduced to themes that directly shape the design.
24
Critical Questions
Each question tied to a decision its answer would change.
Four findings my decisions rest on
04BUSINESS GOALS

Research produced two hard rules.

I didn't write the goals as nice-sounding principles. I wrote them as two rules every screen could be tested against. The first-draft positioning line sat on top of them: “AI video for teams who have to defend the result.” (first draft)

05USER TYPES

Three segments, one primary.

All three segments made sense: the marketer, the social media team and the content creator. But only one of them clearly pays at scale.

Marketer · Primary

The target and the wallet. In-house performance and product marketing teams at mid-sized brands. Their need isn't a model problem, it's a UX problem: consistency is solved by workflow design, not a better model.

→ A new player can't win on the model; it can win on the workflow.

Social Media Team · Secondary

The entry door, not the wallet. Small teams publishing daily across several platforms. They use it most often, and they sit in the same company as the primary buyer.

→ Designed for them, priced for the marketer above them.

Content Creator · Secondary

Distribution and reputation. Individual creators, the real residents of the free tier. Subscription economics are structurally weak for them.

→ They produce the social proof, tutorials and templates. So the free tier has to be genuinely usable.

06USER FLOW & INFORMATION ARCHITECTURE

One paid step: the final render.

I built the main flow on a single claim: everything up to the final render is free. People see the product before they pay or sign up.

01
Landing
Straight from the hero to a first preview; works without signing in.
02
Preview
A free, low-res rehearsal. It doesn't spend a video.
03
Sign up
Needed only for the final render, not for trying.
04
Empty state
Prompt, look (Fast · Balanced · Cinematic) and shot grammar.
05
Preview ↺
If it misses, back to the prompt for another try. Learning to prompt is free.
06
Render final ⚠
The only place a video is spent. The cost sits left of the button: “1 video”.
07
Rolling…
A card in the flow, not a blocking modal; people keep writing while they wait.
08
Result
Download · Extend · Vary · Share link.
09
Library
The videos you kept.
01

A video is spent at the final render; previews are free.

02

Sign-up comes after trying; the opposite of the “pay first, try later” trap.

03

Waiting doesn't break the flow.

the architecture serving this journey
SLATE
Landing · 11 sections
  • What you get
  • How you get it
  • Why you trust it
  • How much
App
  • Empty state → composer → prompt
  • Preview → Rolling… → result
  • Last-video warning
  • Error branch, splitting off Rolling
Money
  • Upgrade popup
  • Paywall
07DESIGN DECISIONS

Why I made these decisions.

Three decisions: what I let people choose, where I take the money, and what I count. I changed the third one along the way.

SLATE — prompt written, cost shown before render
01Letting people choose intent, not a model
Problem
The engines that turn a prompt into video are a market of their own; they differ in quality, speed, cost and capability. The marketer doesn't know which model to pick, and doesn't want to.
Alternatives
(A) Show them all: feels like a pro tool, but causes decision paralysis. (B) Let people choose intent. (C) Hide it completely: simple, but in a product sold to marketers the lack of control hurts trust.
Why this
(B): People pick the intent, not the engine: Fast · Balanced · Cinematic. Runway had reduced intent to a few words on its main screen. I went one step further and showed the intent's cost and duration on the same control.
Result
There's no model picker in the interface. The product picks the engine and states the cost before the render. On the landing it reads: “You don't pick the model. You pick the result.”
SLATE — error: the render did not cost a video
02Free previews, payment only at the final render
Problem
At competitors, credit drops the moment you generate; even learning to prompt goes on the meter.
Alternatives
(a) Spend the video on acceptance or download, (b) offer no previews but cheap generation, (c) free previews and payment only at the final render.
Why this
(c): I merged two fixes users proposed themselves in complaint forums (a low-res preview first, and spending only on the output you keep) into one flow. Previews are free on every plan; a video is spent only at the final render. A failed render never moves the counter.
Result
It's written on screen: “Previews never count against your daily videos.” On the error screen: “That render didn't land. It didn't cost you a video.” The free tier gives 3 videos a day; previews are free on every plan and never counted. Resolution opens up by tier: 720p on Free, 1080p on Starter, 4K on Studio.
SLATE — paywall
03The unit is a video, not a credit
Problem
Every competitor counts in credits. A credit describes the vendor's accounting, not what you're buying, and nobody shows what's left in the thing you actually get. Plans that say “unlimited” turn out to have a ceiling.
Alternatives
Keep credits and publish the conversion rate openly. Or use “take”, the unit from film sets that the name SLATE comes from — that was the first structure.
Why this one
Take worked as a brand but added a translation step at the counter; what people count is videos. I made the unit a video and the rehearsal a preview. The take language stayed in the name and in “Rolling…”.
Result
The counter shows what's left in videos, the paywall says “More videos.” “Unlimited” appears nowhere; “never counted” does. The amount charged is the largest number on screen: Starter $24/mo ($230 yearly · $19/mo), Studio $79/mo ($758 yearly · $63/mo).
08WIREFRAMES

From skeleton to final design.

With eight wireframes I solved what each screen does first, and how it looks later. Below, each wireframe sits next to its final counterpart.

SLATE — landing wireframe

Wireframe — Landing

SLATE — final landing page

Final — Landing

SLATE — empty state wireframe

Wireframe — Empty state

SLATE — app, empty state

Final — Empty state

SLATE — Rolling… wireframe

Wireframe — Rolling…

SLATE — Rolling… card while the video renders

Final — Rolling…

SLATE — error wireframe

Wireframe — Error

SLATE — error: the render did not cost a video

Final — Error

SLATE — paywall wireframe

Wireframe — Paywall

Wireframe stage — pricing was still placeholder.

SLATE — paywall

Final — Paywall

09DESIGN SYSTEM

One accent, three jobs.

A dark-only theme: base #0A0A0F, accent #7B6CFF. I used the accent for three jobs only: the primary action, the active or selected state, and the “free/included” affirmation. Never for decoration. That was also the strongest shared decision in the benchmark: the only saturated thing on screen should be the generated image.

Aa
Onest + Geist MonoOnest for interface and headings, Geist Mono for labels · 10 text styles, all even sizes · 16 color tokens
#0A0A0F
#17171F
#9A9AA8
#F4F4F7
#7B6CFF
COMPONENTS, GRID & STATES
Buttons
SLATE dark theme
Render final Download Preview — free Disabled
Accent only on the render action. Every button has default, hover, pressed and disabled states.
Chips & Cards
SLATE dark theme
9:161:116:91080p ▾Cinematic ▾
FREE
$0 forever
3 videos a day · 720p · watermarked
Previews never counted
STARTER
$24 per month
20 videos a day · 1080p · no watermark
Forms & States
SLATE dark theme
Describe the shot. “A rainy neon street, slow dolly in.” a matte bottle rotating on a white cyclorama, soft key Rolling… You can keep writing.
Default Focus Positive Error
Grid & Spacing
SLATE dark theme
48121624324864
12-column grid · a 16-step spacing scale from 4 to 160 · 5 radius values (4 · 8 · 12 · 20 · 999).
10RESPONSIVE STRATEGY

What's on desktop is on mobile.

The mobile landing carries the same 11 sections as desktop. Sections drop to a single column, and on mobile the composer gains a collapsible state. Type scales down through its own parallel mobile style set.

SLATE — mobile landing wireframe
SLATE — mobile landing, hero
SLATE — mobile landing, models
SLATE — mobile landing, pricing
Mobile wireframe and slices of the final mobile landing
11FINAL UI

The final screens.

SLATE — prompt written, cost shown before render
SLATE — result with Download, Extend, Vary and Share link
SLATE — upgrade popup
SLATE — final landing page
The full landing: 11 sections, scrollable inside the frame
12REFLECTION
"

Where I used AI, and where I didn't.

I decided up front where AI would come in, rather than reaching for it whenever things got tight.

01

I used it for scanning. Reading the pricing pages of dozens of products, the complaint forums, page after page of reviews, and sorting all of it into themes would have taken me days on my own. I used it for copy variations. And I used it to push the design system into Figma — tokens, variables, file structure; the work I don't enjoy but that everything falls apart without.

02

I wrote the question set myself. Twenty-four questions, each tied to the screen it would change. That's the backbone of the whole thing, and I wasn't going to hand it over. The suggested benchmark list felt narrow to me too, so I scanned the category myself, then went to Awwwards and out of the category entirely for visual direction. I'm glad I did — that's where the product's look came from.

03

The wireframes were the hardest part. The first structure was correct on paper, everything in its place, but it didn't work once I looked at it. I couldn't say why at first, it just felt wrong. In the end I described the structure I had in my head and had the second version built from that. You can't tell whether a screen works by describing it. You have to look at it.

04

I designed the whole interface myself. On the design decisions — the intent selector, where payment sits in the flow, what's big and what isn't — the help I got was limited. These don't come from a source, they come from a preference.

05

One thing I saw too late. I changed the unit from take to video while moving to the final screens. The brand was built on “take”, but what people actually count is videos. I should have caught it earlier. Next time I'd put the counter in at the wireframe stage, with the real copy, and look at it there.