Real-Time Collaboration & Faster Production By Modular Flows

Real-Time Collaboration & Faster Production By Modular Flows

Background : ASPO an AI-driven platform designed to simplify the early stages of media production — from script writing to video generation — all in a collaborative space.

Challenge : How might we simplify creative workflows with AI-driven production and seamless team collaboration?

Challenge : How might we simplify creative workflows with AI-driven production and seamless team collaboration?

Impact:

Collaboration speed up by 50%

Faster content production by 40%

MVP in 2 weeks

Role: Product Designer

Team: 1 Designer (me), 1 Developer, Client (Product Owner)

Timeline: 2 weeks (MVP design sprint)

Full Story

Full Story

A professional production studio commissioned the design of ASPO, an AI-driven MVP intended to unify the early stages of media creation. The studio's teams were struggling with fragmented workflows—jumping between tools like Freepik for visuals and separate apps for scripting—while managing feedback through messy email threads.

Design Goals

Design Goals

1.Unify all creative stages in one app

1.Unify all creative stages in one app

2.Enable seamless collaboration, real-time feedback

2.Enable seamless collaboration, real-time feedback

3.Reduce technical overwhelm

3.Reduce technical overwhelm

How I defined the design goals

How I defined the design goals

Design goal 1 : Unify All Creative Stages In One App

Design goal 1 : Unify All Creative Stages In One App

Modular flow = One stage at a time

Modular flow = One stage at a time

I designed the workflow so each step focuses on a single task while keeping everything connected in one workspace.

This approach creates a smooth, natural progression from ideation → scripting → storyboarding → early video creation, helping users move forward confidently without getting overwhelmed. It reduces confusion, keeps work organized, and ensures the team can see progress clearly at every stage.

Design goal 2 : Enable Seamless Collaboration, Real-time Feedback

Design goal 2 : Enable Seamless Collaboration, Real-time Feedback

Two Ways to Edit at Every Stage

Two Ways to Edit at Every Stage

Users can make changes directly or collaborate through comments, keeping work flexible and organized.

For example, when editing scripts, they can highlight text, comment inline, and apply feedback without leaving the workspace—making it easy to collaborate in context and create updated versions quickly.

Storyboard Panel Refinement (Two Paths)

Storyboard Panel Refinement (Two Paths)

Users can update panels in two flexible ways:

  1. Direct edits – adjust the description and settings, refine the panel, and generate a new version.

  2. Collaborative edits – add comments, select feedback, refine the panel, and generate a new version.

This approach keeps the workflow flexible, efficient, and collaboration-friendly, making it easy to improve panels quickly without losing context.

Frame-Accurate Feedback

Frame-Accurate Feedback

Users can pause the video, add time-specific comments, and then refine the video based on that feedback to create a new version.

This approach makes giving and applying feedback precise, fast, and easy, ensuring the team can improve videos efficiently without confusion or repeated guesswork.

Design goal 3 : Reduce Technical Overwhelm

Design goal 3:Reduce technical overwhelm

One Script = One Scene (MVP)

One Script = One Scene (MVP)

Unlike traditional script apps that can feel overwhelming with multiple scenes and complex branching, this system keeps each script to a single scene.

This creates a clear, linear workflow: Script → Storyboard → Panels → Video, letting users move smoothly from idea to finished video without confusion or extra steps. It’s simpler, faster, and more focused than typical multi-scene tools.

Default Auto-Generated Storyboard

Default Auto-Generated Storyboard

When creating a storyboard, the system automatically generated 5 panels, giving users a ready-to-start structure.

Users could easily add or remove panels, removing the guesswork about how many panels were needed and helping them focus on the story, not the setup.

Hidden AI Complexity

Hidden AI Complexity

With a single “Refine Panel” button, users could save changes, generate new text, create a new image, and track version history all at once.

This made a complex process feel simple, letting users focus on creativity while the system handled the heavy lifting in the background.

Smart Prompt Auto-Update

Smart Prompt Auto-Update

Every time a user edits settings, reorders panels, or refines comments, the system automatically updates everything behind the scenes—including shot order, durations, transitions, and effects—while keeping full version history.

This means users never have to rewrite technical prompts manually, making iterations faster, cleaner, and less error-prone.

Design Challenges

Design Challenges

2-week MVP with 1 designer + 1 developer

2-week MVP with 1 designer + 1 developer

Solution:

• Prioritized core flows
• Used a modular structure: Script → Storyboard → Video

Understanding User Needs Despite Ambiguous Retirements

Understanding User Needs Despite Ambiguous Retirements

Solution:

  • Ran quick research

  • Observed real tool usage

Low-fi wireframes confused non-technical stakeholders

Low-fi wireframes confused non-technical stakeholders

Solution:

  • Used higher-fidelity wireframes

  • Enabled faster understanding and approvals

Creative flexibility vs. AI API limitations

Creative flexibility vs. AI API limitations

Solution:

  • Designed modular flows (Script → Storyboard → Video)
    • Collaborated closely with the developer

Create a free website with Framer, the website builder loved by startups, designers and agencies.