Redesign →

03 — Product

The app, used end to end

The logged-in app, used end to end with one real brief — rows A to F follow the product surfaces, G collects what shows up everywhere.

30 screens · 35 issues · 17 things that work · app.keyframe.art, 6 Oct 2026

Personal details (name, email, referral link) are blurred in these captures.

03.A — Quick Start

Idea → style → storyboard → film#

The core flow, run once with a real brief. It produced a coherent four-shot, 15-second film in about three minutes. The storyboard step is the best idea in the product; spend disclosure is the weakest point.

A01Quick Start — home/
  1. Issue · High

    'Free credits' opens a referral form

    The green button beside the balance opens 'Give $20, get $20'. People expecting free credits get an invite link. Call it 'Invite & earn'.

  2. Works

    Starter chips write a fill-in-the-blanks brief

    One click fills the prompt with editable slots: character, goal, setting, style.

  3. Issue · Low

    Two front doors, no guidance

    Quick Start and Canvas are both offered, but nothing says when to pick which.

Redesigned inC·01 Films library
A02Add a reference/ (+ menu)
  1. Works

    References from anywhere

    Upload, audio, generate or search the web — good breadth for a brief.

  2. Issue · Low

    Web images need a rights note

    Pulling web images into commercial films needs a short usage disclaimer.

A03Starter brief/ (starter chip)
  1. Works

    Slots teach a good brief

    Structure without a form. Keep it, and add chips for duration and audience.

A04Choose a visual style/quickstart/:id
  1. Works

    Same subject in every style

    Rendering one scene in nine styles makes the comparison honest.

  2. Issue · Low

    Nine tiles, one orphan

    The last row holds a single tile; a 3×3 or 5×2 grid would read as complete.

Redesigned inK·01 Pick a look
A05Storyboard — before render/quickstart/:id
  1. Works

    The best screen in Keyframe

    Characters, sets and a prop become reusable references before any video renders. Linked names in each shot show what carries over.

  2. Issue · High

    Drafting silently spent 68 credits

    The balance went 5,000 → 4,932 while the agent generated references and frames. Nothing asked first or said it would cost credits.

  3. Issue · Medium

    Copy bug: 'the The Potter'

    Entity names already include 'The', so shots read 'the The Potter' and 'The The Woman'.

  4. Issue · High

    One click spends 529 credits

    No confirmation step. The estimate appears only in a hover tooltip (see A06).

A06The cost lives in a tooltip/quickstart/:id (hover)
  1. Issue · High

    Put the price on the button

    'Generate video · 529' on the button itself, a confirm step above a threshold, and the remaining balance after the run.

A07Film ready/quickstart/:id
  1. Works

    Progress you can trust

    While rendering it showed time remaining (~2 min) and a percentage; the film arrived in about three minutes.

  2. Issue · Medium

    The payoff is the smallest thing on screen

    A narrow 9:16 player inside a 1440 layout. Give the film a large preview with shot-by-shot scrubbing and per-shot redo.

  3. Issue · Medium

    Download is the only exit

    No share or review link, aspect-ratio variants or export settings.

A08What came outoutput · 1080×1920 · 15 s
  1. Works

    Consistency holds across shots

    Same potter, same mug, same woman from shot to shot. Four shots plus audio in about three minutes for 597 credits — roughly $7 at the referral rate of 834 credits = $10.

03.B — Canvas

The node graph for control#

Powerful, and the Quick Start hand-off is the best bridge in the category. New users meet an empty grid with no starting points, and the finished film never reaches the timeline.

B01Canvas — list/canvas
  1. Issue · Medium

    One film, two homes

    Quick Start keeps the conversation; Canvas keeps 'Made for Quiet Canvas'. Recents differ per section, so a project has no single place to live.

  2. Issue · Low

    New canvases start as 'Untitled'

    With a black thumbnail and only a date. Name them from the first prompt, as Quick Start does.

Redesigned inC·01 Films library
B02New canvas, still connecting/canvas/:id (first seconds)
  1. Issue · Medium

    'This shared canvas is empty'

    Shown on a private, brand-new canvas. Offer three starts instead: add a node, start from a template, or describe the film to the agent.

  2. Issue · Low

    No 'Add' until the connection lands

    While 'Connecting…' shows, the toolbar renders without its Add button.

B03Add a node/canvas/:id (Add)
  1. Works

    Searchable, grouped node menu

    Core / Generate / Enhance / Misc is a solid structure.

  2. Issue · Low

    A joke node sits in the production menu

    'Mosquito — add one tiny mosquito to an image' is listed between Video Analysis and Voice Generator. 26 node types and no recents or favourites.

Redesigned inC·04 Add from port
B04Canvas agent/canvas/:id (⌘K)
  1. Issue · Low

    Generic suggestions on an empty canvas

    Offer 'Turn a script into a storyboard' or 'Start from a template' when there is nothing to build on yet.

B05The graph Quick Start built/canvas/:id (from Quick Start)
  1. Works

    The hand-off is excellent

    Every reference, shot and clip becomes an editable node with its own model and cost.

  2. Issue · Medium

    Unreadable at fit-to-screen

    A tall column of text-heavy nodes, with no scene grouping, shot numbers or minimap.

  3. Issue · High

    'Run' fires every generation node

    The button says only 'Run', next to the balance, with no estimate of what a full re-run costs.

B06Timeline/canvas/:id (Timeline)
  1. Issue · Medium

    The finished film isn't on the timeline

    Even in the canvas Quick Start built, the timeline opens empty ('Drop media'). The cut Quick Start already made should be laid out here.

03.C — Playground

Single generations, image and video#

A guided tutorial teaches the consistency idea in two steps. The model list, mode switch and cost display need decision help.

C01Playground with tutorial/playground
  1. Works

    A tutorial that teaches the core idea

    Create a character, then reuse it as a reference — consistency in two steps.

  2. Issue · Medium

    Your result is the smallest image on screen

    The tutorial's sample image dominates while the user's own generation is a small thumbnail in the corner.

  3. Issue · Low

    Mode switch is two tiny icons

    Switching image → video silently swaps the model, duration, resolution and audio controls.

C02Model picker/playground (model menu)
  1. Issue · Medium

    A model list without decision help

    Provider and modality, but no price, speed or 'best for'. An upscaler and a matte tool are listed as image models.

Redesigned inP·04 Model picker
C03Cost on hover only/playground (hover)
  1. Issue · Medium

    'Generate · 7 credits' appears only on hover

    The button itself is an unlabeled arrow. Show the cost on it at all times.

03.D — Fashion Studio

Product photos → fashion film#

The clearest pricing in the app, inside what feels like a separate product.

D01Fashion Studio — home/fashion
  1. Works

    Price on every card

    The clearest cost communication in the app. Copy this pattern everywhere else.

  2. Issue · Low

    A different app inside the app

    Its own hero, tabs and type scale make it feel bolted on rather than part of Keyframe.

D02Fit Check — step 1/templates/:id?flow=model-picker-v1
  1. Works

    Product-link import

    A strong shortcut for e-commerce teams.

  2. Issue · Low

    Logged-out copy shown to a signed-in user

  3. Issue · Low

    A third title style

    Condensed caps here and in Templates, a serif in Quick Start, sentence-case Inter elsewhere.

03.E — Templates

Community workflows#

Use-case collections are the right idea. Cards need cost and time, and the copy needs a proofread.

E01Templates — collection/templates
  1. Issue · Medium

    Raw markdown in card copy

    '**Screen Escape Hook** —' renders literally.

  2. Issue · Low

    No cost or time on the cards

    The detail page shows ~6 min · 945 credits; put that on the grid, and add search and input-type filters.

E02Template detail/templates/:id
  1. Works

    Time and price before you run

    '~6 min · 945 credits' is exactly right.

  2. Issue · Medium

    Internal field names

    'Image Input-1' and 'Text Input-1' should read 'Your photo' and 'What should they say?'.

03.F — Account, billing & history

Credits, workspaces, keys#

Solid foundations for teams and developers. Money is shown in two currencies, and one heading promises plans that are not there.

F01What “Free credits” opens/ ('Free credits')
  1. Issue · High

    A referral program behind a “Free credits” label

    Rename the button 'Invite & earn', or open a real free-credit offer.

Redesigned inC·01 Films library
F02Quick Start history/quickstart/history
  1. Issue · Low

    One thing, four names

    'Quick Start' in the nav, 'Quickstarts' in labels, 'storyboard chat' in the empty state, 'New storyboard' on the button.

F04Workspaces/account#workspaces
  1. Works

    Team-ready billing

    Per-workspace credits, transfers and invites already exist.

F05Refer a friend/account#referrals
  1. Issue · Medium

    The only place credits meet dollars

    834 credits = $10. Use this rate on Generate buttons and on the pricing page.

F06Connected apps (MCP)/account#connected-apps
  1. Works

    MCP with an honest warning

    Competitors market agent / MCP support on their homepages; Keyframe's site never mentions it.

F07Developer — API keys/account#developer
  1. Works

    Scoped, expiring API keys

F08Credits/account#credits
  1. Issue · Medium

    Two currencies and false precision

    Packs are shown in approximate rupees with paise ('~₹2,891.41'); auto-reload and referrals are in USD.

  2. Issue · Medium

    'Subscription plans' lists no plans

    Only auto-reload sits under this heading.

F09Credit activity/account#usage
  1. Works

    A real ledger

    Filters, a running balance and refunds — this builds trust.

F10Generation defaults/account#defaults
  1. Issue · Low

    27 video models in a native select

    Including legacy and preview entries, with no guidance on which to choose.

Redesigned inP·04 Model picker

03.G — Across the app

System-level issues#

Problems that show up on every screen and are cheaper to fix once, as a system.

  1. Issue · G1Three typographic voicesCondensed caps (FASHION STUDIO, TEMPLATES), a serif display (Made for Quiet, Create your character, Screen Escape Hook) and sentence-case Inter (Canvas, Playground, Account). Pick one display face.
  2. Issue · G2Cost is shown five waysA hover tooltip (Quick Start), an accessible label only (Playground), card text (Fashion), a detail panel (Templates) and per-node buttons (Canvas). Use one pattern: the price on the button.
  3. Issue · G3Names collide“Templates” is both the community page and your saved canvas templates. Quick Start, Quickstart and storyboard all name the same thing.
  4. Issue · G4AccessibilitySix icon-only buttons on the canvas have no accessible name. Small grey meta text such as “4s · Medium · Slow Push in” is hard to read on the dark panels.
  5. Issue · G5A support bubble in the wayThe floating help widget sits on the right edge, over canvas controls and the timeline’s close button.

03.H — How others solve it · via Mobbin

Cost, models, empty states, results#

Reference screens for the biggest product gaps. Each card names the Keyframe screens and markers it answers.