All projects

Scriptoplay / Generative AI / Creative workflow

AI storytelling, made controllable.

I led product and UX design for an AI-native storytelling platform that evolved from script assistance into a structured script-to-production workflow. The core challenge was giving creators enough structure, context, and control to use generative AI without losing authorship.

OwnedProduct architecture·Human-AI UX·Research synthesis·Design system·Technical delivery

Role

Product Designer & UX Lead

Period

Jun 2022 - May 2025

Engagement

Full-time

Industry

Film technology

Structure

Progressive creative workflow

Context

Persistent project intelligence

Control

Reviewable AI decisions

Generative AIUser ResearchHuman-AI InteractionJourney Mapping0-to-1 Design SystemsDesign-to-Code ParityCross-functional Leadership
Scriptoplay AI storytelling workflow artwork: the IP Studio dashboard and sidebar composited over a “Crafting Visual Stories for Storytelling” cover treatment
02 · The Product Problem

Define the product before the interface.

Creative work was being driven through open-ended chat and disconnected generation tools. Users could produce outputs, but they struggled to preserve story context, visual identity, and continuity as a project moved from script development into preproduction — and every generation choice traded off quality, consistency, latency, and cost.

Alternative considered

Open-ended chat canvas

Fast to prototype, but gave creators no visible path, no persistent context, and no sense of progress toward a finished script.

Real early Scriptoplay screenshot: Script-Space editor with an open-ended Script-Copilot chat panel — a freeform conversation, no staged workflow or visible progress

Direction taken

Defined, progressive stages

Logline through review, each stage inheriting the last — replacing the blank canvas with a visible path from story structure to visual production, architected from the start as a documented component system rather than one-off screens.

Real Scriptoplay screenshot: the Treatment phase, one step in the nine-phase sidebar (Concept, World Bible, Character Vault, Synopsis, Treatment, Outline, First Draft, Revision), each phase marked complete or current
03 · Research + Model Evolution

Built on a moving target.

AI video-generation capability shifted underneath the product three times over three years. Staying controllable for creators meant re-grounding the design in what the models could actually do, and in what creators told us they were afraid of losing.

Band A — Model evolution

2022

Script assistance

AI-assisted generation and research support.

2023–24

Visual generation

Script generation wired directly to text-to-video models.

2025

Production system

A context-aware, script-to-production studio.

Optional depth — what shifted each era
  • Era I · AI script assistant (2022) — Generation and chatbot research support, with blockchain-based IP minting and a script marketplace explored early — before focus narrowed back to the core writing workflow.
  • Era II · Prompt-to-video integration (2023–24) — Script generation wired directly to text-to-video models — but short, fixed-length clips and limited reference-image input constrained what a scene could actually become.
  • Era III · IP Studio (2025) — Reference-to-video models matured enough to hold character and scene continuity across longer generations, repositioning the product from a script-writing tool into a full script-to-production studio.
Real Scriptoplay screenshots stacked across three eras: the 2022 token-based dashboard, the 2023-24 seven-step production pipeline (Idea through Post-Production), and the 2025 IP Studio dashboard

Band B — Research translated into product

Control

Creators feared losing authorship

Review · lock · approve

Continuity

Context broke across tools

Persistent project context

Simulation

Creators needed to test ideas

Writers’ Room

Real research synthesis: 'How AI Solves Scriptwriters' Pain Points' — mapping Script Evaluation, Scripts Analysis, and the Scriptwriting Assistant against specific creator pain points

Who this was for

Interviews surfaced four recurring creator archetypes — a writer-director balancing vision against budget, a script consultant drowning in messy drafts, a film student who wants to know why something’s wrong, and a freelance screenwriter tired of submitting into a void. Alex Ramirez, the freelance screenwriter, became the primary persona the pipeline was designed around: someone who didn’t need another tutorial, but a creative partner who understood the story well enough to say what mattered.

Alex Ramirez

Freelance Screenwriter · Primary persona

“I don’t need another YouTube tutorial — I need a creative partner who gets my story.”

Optional depth — all four personas

Samira Belkacem

Writer-Director

“Vision is only power when it’s doable on a set.”

Frustrations

  • Rewriting scripts because they’re too expensive to shoot.
  • Lack of tools that understand both narrative and production.

Maya Daniels

Script Consultant

“Great stories hide in messy drafts — I just need to find them faster.”

Needs

  • Script scoring and rating assistance.
  • Pacing, tone, and structure evaluations at scale.
  • Collaborative comment tools that organize thoughts per scene.

Jordan Kim

Film & Television Student

“Tell me what’s wrong — but also tell me why and how to fix it.”

Needs

  • Clear, actionable advice on how to improve.
  • Educational insights tied to real-world examples.
  • Guidance on script structure and formatting.

Alex Ramirez

Freelance Screenwriter

“I don’t need another YouTube tutorial — I need a creative partner who gets my story.”

Frustrations

  • Getting ghosted after submitting scripts.
  • Time wasted revising without knowing what matters.

Featured persona

Alex Ramirez

Freelance Screenwriter

Alex transitioned into screenwriting after years in the advertising world. He’s written three feature-length scripts and several shorts, mostly working late nights and weekends. He’s passionate about telling character-driven stories with strong emotional arcs. He dreams of landing a script option with an indie studio but struggles to get consistent, high-quality feedback.

Age

34

Location

Austin, TX

Occupation

Freelance Screenwriter

Experience

5 yrs of screenwriting

“I don’t need another YouTube tutorial — I need a creative partner who gets my story.”

Needs

  • Honest, constructive feedback — fast
  • Script viability checks for indie producers
  • Automated formatting and error correction
  • Collaborative comment tools that organize thoughts per scene

Frustrations

  • Getting ghosted after submitting scripts
  • Time wasted revising without knowing what matters
  • Repeating the same structural notes to different writers
  • Sifting through 100+ pages just to realize a story doesn’t work
04 · Product Architecture

Nine phases, one continuous script.

Every script moves through the same nine phases, from a one-line spark to a locked final draft. The script itself stays the human-readable narrative artifact — a structured project context layer is what every downstream asset — image, voice, video — actually reads from, so nothing gets re-authored per surface.

Key message

“The script is the human-readable artifact. The structured context is the production infrastructure.”

Real Scriptoplay screenshot: all nine pipeline phases, and the locked Final Draft screen for The Lighthouse Signal

Three layers, one system

Creative development

The human-readable script and story.

Idea
Structure
Script

Structured project context

The infrastructure every downstream asset reads from.

Characters
Locations
Scenes
Beats
Visual identity
References

Production

Generated from context, not re-authored per surface.

Frames
Shots
Voice
Video
Continuity

“The script is the human-readable artifact. The structured context is the production infrastructure.”

Optional depth — same spine, different shape

A Feature, a Short, and a Series Episode aren’t the same writing job — same product architecture, different structural manifest.

Feature

Full long-form progression — all 9 phases.

Short

Compressed workflow, lighter footprint, same spine.

Series

Shared world + inherited episode context.

Real Scriptoplay screenshot: New Script wizard, step 2 of 7, choosing a format — Feature Film selected with target-length quick picks, Short Film alongside it
05 · The Journey

From idea to production.

The journey was mapped end to end — from a first idea through story development, structured assets, and scripting, to production — so continuity and control stay visible across every handoff, not just within the writing phase. The flow wasn’t shipped once and left alone: A/B testing, QA passes, and a continuous creator feedback loop kept it under active iteration.

Idea

Script Blender

Mixes genres and prompts to spark a concept.

Replaces the blank canvas with a starting structure.

Story Development

Writers’ Room

The Scene Simulator, Scenario Lab, and Specialist Advisors let creators rehearse and stress-test a story before committing to the page.

Gives creators a way to test a story, not just write it once and hope.

Structured Assets

World Bible · Character Vault

Characters, locations, and identity generated and locked as persistent project context.

Locks continuity before it can break across tools or surfaces.

Script

Nine-Phase Pipeline

The locked context carries the script from first draft to a locked final draft.

Keeps every downstream asset reading from one source, not re-authored per surface.

Current destination

Production

Promote to Production · Production Studio

A locked script and its structured context move into shot-by-shot planning, generation, and review.

Keeps generation reviewable and approvable, not automatic — the connected journey’s current destination.

Branches after production

Marketplace and IP monetizationFuture exploration were explored as a possible ecosystem extension — not part of the shipped or in-development product this case study describes.

Detailed flow — real journey map

Production Studio: in development / next major stage
Real Scriptoplay journey-map diagram: Landing & Access, Onboarding, Script Blender / Script Scan, the Nine-Phase Pipeline, Promote to Production, Production Studio, and Screening Room, with The Toolbox (Writers' Room, Story Reel, The Grail Notebook) open throughout

Validation notes

A/B testing — Flow variants compared against real usage before committing to one path.·QA passes — Structured checks against the flow before every release.·Feedback-loop iteration — Continuous refinement from creator feedback after launch — not a one-time research pass.

06 · Human-AI Control

AI output is never treated as final by default.

Six states — generate, inspect, compare, regenerate, approve, recover — were defined once as a reusable component spec, not redrawn per screen. Every generation passes through the same checkpoints creators can see and act on, so control isn’t something they have to ask for.

Generate
Inspect
Compare
Regenerate
Approve
Recover

Generate

Capture creative intent and constraints, then generate — busy is shown as busy, not stalled.

Inspect

Preview a result in context before committing to it.

Compare

Weigh multiple generations side by side instead of picking blind.

Regenerate

Retry with one variable changed — context stays intact.

Approve

Approved results become the project’s canonical state — the reference every later phase builds on.

Recover

A failed generation loses the attempt, never the project context.

One real interface — truthfully annotated

Real Scriptoplay screenshot: the Treatment phase in the nine-phase sidebar, each phase marked complete or current
01
02
01

Current phase stays visible

The active creative stage remains clearly anchored in the larger workflow.

02

Completed work remains accessible

Earlier phases stay visible instead of disappearing after completion.

07 · Representative feature: actionable evaluation

One bad category can’t hide behind a good average.

Alex Ramirez’s frustration wasn’t a lack of feedback — it was feedback with no way to act on it. The Script Analyzer scores a script across ten AI-judged categories against a written rubric.

Real Scriptoplay screenshot: Script Analyzer panel showing an 87/100 score, re-run and score-history tracking, and all ten category tiers — green dots for Length & Format Compliance, Structure, Character, Premise, Pacing, Tone, and Craft, amber dots with 'Open phase' links for Conflict, Logic, Dialogue, and Originality
01
02
03
01

Category scoring

Individual weaknesses stay visible instead of disappearing inside an average.

02

Evidence + fix

Flagged categories are grounded in specific script evidence, paired with a concrete fix.

03

Open phase + rerun

Creators jump straight to the relevant phase, revise, and re-run to verify the fix worked.

Quality gate: a severe Length & Format failure caps the overall score outright — bad caps it at 40, okay at 70 — so one catastrophic problem can’t hide behind a good average.

08 · Design System + Technical Delivery

A system that survives implementation.

One token system carries every theme and screen; the same system connected directly into the shipped codebase, so parity was checked in code, not assumed from a spec doc.

Part A · System

Light / dark

Real Scriptoplay screenshot: the same dashboard rendered in dark and light mode, split down the middle

Brand tokens

brand-primary
brand-ink

Phase-identity tokens

Concept
World Bible
Character Vault
Synopsis
Treatment
Outline
First Draft
Revision
Final Draft

Responsive layout

Desktop

Real Scriptoplay screenshot: dashboard at desktop width

Tablet

Real Scriptoplay screenshot: dashboard at tablet width

Mobile

Real Scriptoplay screenshot: dashboard at mobile width

SpotlightTour

A reusable onboarding pattern, not one-off walkthroughs built per feature — a small proof point, not the main story.

1 reusable interaction engine → 20+ onboarding tours across 3 surfaces

Part B · Delivery

Built in Figma, verified in Git.

Figma Variables
Style Dictionary
Next.js / Tailwind

Shared semantic values were validated against the implemented product rather than treated as a static handoff spec.

FigmaStyle DictionaryNext.jsTailwind CSSFirebaseGitHubMCP
09 · Outcome + Learning

What changed.

Product

Disconnected AI tools

a structured story-to-production system

Story development and visual production operate as one connected project instead of separate tools.

Creator

Open-ended generation

inspectable, controllable AI collaboration

Generation states, comparison, and approval give creators authorship over the outcome instead of asking them to accept whatever the model returns.

System

One-off interactions

reusable AI states and persistent context

Generate through recover are defined once as reusable specs, and context — characters, locations, identity — persists across the pipeline instead of being re-established per surface.

Delivery

Static handoff

code-aligned design system

Figma Variables ran through Style Dictionary into the same values the app consumed, checked against shipped CSS states, not assumed from a spec doc.

Learning

Generation cost is a UX constraint, not just an engineering constraint.

Model choice, reference count, retries, previews, and regeneration paths all affect both creator experience and operating cost.