Jianing | Product Designer

AI Cast Video Creation

Redesigned AI Cast creation feature for TikTok users, with early user testing showing task completion rate improved by 40% points.

Concept

Redesign

B2C

Mobile

AI Prototyping

Sole Designer

Home

Resume

AI Cast Video Creation

Redesigned AI Cast creation feature for TikTok users, with early user testing showing task completion rate improved by 40% points.

Concept

Redesign

B2C

Mobile

AI Prototyping

Sole Designer

Home

Resume

AI Cast Video Creation

Redesigned AI Cast creation feature for TikTok users, with early user testing showing task completion rate improved by 40% points.

Concept

Redesign

B2C

Mobile

AI Prototyping

Sole Designer

Home

Resume

Overview

I developed this concept as the final project for a vibe coding course I audited. Over 1 week, I researched the existing TikTok’s AI Cast experience, redesigned the creation flow that helps creators find inspiration, shape their stories, follow the generation and modify videos, and built an interactive prototype with AI coding tools.

Team

Researcher & Designer

Front-end Developer

Timeline

April 2026 · 1 Week

At a Glance

The Problem

AI Cast left creators unsure how to start and unable to shape what happens next.

The existing flow asked users to write a prompt and wait 8–12 minutes without intermediate feedback. Interviews with 5 local classmates revealed unclear expectations, limited control, and hesitation about posting the result.

The Problem

AI Cast left creators unsure how to start and unable to shape what happens next.

The Solution

I designed a guided creation flow that connects community inspiration with personal choices.

The redesigned AI Cast brings together community templates, 4 guided setup steps, previews during generation, and a path to modify earlier choices.

The Outcome

Early testing showed stronger follow-through and confidence.

I created a prototype using AI coding tools and tested it with 5 classmates, including 4 returning participants. More returned to check the result and expected to like the output; willingness to post remains to be tested with personalized videos.

Task completion

+40%

Percentage points

Confidence while waiting

+80%

Percentage points

Continue for the full case study

User Research

In Pew’s study, the most active 25% of U.S. adult TikTok users produced 98% of public videos. This made me curious: what might help more people move from watching to creating?

I explored TikTok’s mobile creation tools with 5 classmates to understand where the experience became difficult.

Source: PEW Research Center data on U.S. TikTok users: https://www.pewresearch.org/search/tiktok

I explored TikTok’s mobile creation tools with 5 classmates to understand where the experience became difficult.

Source: PEW Research Center data on U.S. TikTok users: https://www.pewresearch.org/search/tiktok

I explored TikTok’s mobile creation tools with 5 classmates to understand where the experience became difficult.

Source: PEW Research Center data on U.S. TikTok users: https://www.pewresearch.org/search/tiktok

5 interviews revealed uncertainty about what AI Cast would create and little control over the result.

I interviewed 5 American classmates who posted on TikTok from their phones and asked them to walk through the AI powered creation tools.

AI Cast stood out as the most confusing, while other AI tools gave them a clearer sense of what to expect.

I interviewed 5 American classmates who posted on TikTok from their phones and asked them to walk through the AI powered creation tools.

AI Cast stood out as the most confusing, while other AI tools gave them a clearer sense of what to expect.

Little guidance

A sample prompt offered little guidance on what AI Cast could produce.

An unclear wait

Generation took 8–12 minutes, with text updates but no preview of the emerging video.

Limited revision

Changing the result meant revising the prompt and waiting for 8-12 min again, still uncertain in the process.

Limited revision

Changing the result meant revising the prompt and waiting for 8-12 min again, still uncertain in the process.

Define

I focused on 2 gaps:

A disconnected starting point

AI Cast offered little connection to the community examples that inspire creation on TikTok.

Limited involvement and visibility

Creators had few ways to shape the story or see how it was developing during generation.

Design Solution

I redesigned AI Cast as a guided journey from community inspiration to a story creators can make their own.

Community-connected

A feed of community templates gives creators examples to explore and a starting point for their own stories.

Solving

Problem 01

A disconnected starting point

Participatory

Guided checkpoints let creators confirm or adjust key choices as they shape their stories.

Transparent

Visual previews show how the video is taking shape during generation.

Solving

Problem 02

Limited involvement and visibility

I connected community discovery, guided choices, previews, and revision in 1 flow.

Prototyping with AI

I turned the redesigned flow into an interactive prototype for testing.

On days 5 & 6 of the project, I documented the flow, key interactions, and visual references in a prototyping brief.

I refined the brief with Claude Chat, then used Claude Code to build the 1st prototype, referencing 5 screens from the existing AI Cast experience.

On days 5 & 6 of the project, I documented the flow, key interactions, and visual references in a prototyping brief.

I refined the brief with Claude Chat, then used Claude Code to build the 1st prototype, referencing 5 screens from the existing AI Cast experience.

1st Prototype

I refined the 1st prototype in Figma to bring it closer to TikTok’s visual language.

The initial prototype’s typography, colors, and components differed from TikTok’s interface. Using Figma MCP, I brought the local prototype into Figma as editable layers, then refined the type, spacing, colors, and components.

Builder.io’s HTML/CSS export gave me a closer visual match in the prototype.

Rebuilding from screenshots left discrepancies in spacing and icons. I compared 2 ways to pass the refined Home screen to Claude Code: Builder.io’s HTML/CSS export and Figma’s CSS export for all layers.

Approach 1

Builder.io HTML/CSS export

I exported the Home screen through the Builder.io Figma plugin and passed the export to Claude Code.

Approach 2

Figma - Copy as code - CSS (all layers)

I copied the Home screen’s all-layer CSS into Claude Code.

Final Prototype

Find inspiration in the community

Make the story your own

See the video take shape

Revisit a choice without starting over

I deployed the final prototype to a public URL for testing.

Early Validation

Early testing feedback showed stronger follow-through and confidence.

I tested the prototype with 5 classmates: 4 returning participants and 1 new participant.

Compared with the original-flow sessions, more returned to check the result and expected a satisfying output.

I tested the prototype with 5 classmates: 4 returning participants and 1 new participant.

Compared with the original-flow sessions, more returned to check the result and expected a satisfying output.

Task completion

4/5 participants returned to check the result during the test, linking their interest to the choices they had made.

Confidence while waiting

5/5 expected a satisfying result after choosing a template they liked.

Willingness to post

The prototype followed one scripted scenario and did not generate personalized videos, so it could not meaningfully test willingness to post.

These early results supported further testing of the concept. Testing with personalized outputs would help determine whether the experience also encourages creators to post.

Reflection

Creators need a process they can understand and influence.

Community examples set expectations; checkpoints and previews create ways to stay involved. Early feedback encouraged me to test whether that involvement can build a stronger sense of ownership and willingness to post.

AI worked best when I made my design decisions explicit.

AI helped me build an initial prototype from the flow, then implement the remaining screens from a refined Figma reference. Moving between code and design still required my judgment about visual consistency and interaction details.

Next, I would test the experience with personalized outputs.

I would evaluate willingness to post with videos that reflect each creator’s choices, explore templates informed by community trends, and test whether optional body information improves likeness and adoption. Further work would address privacy protections for facial data and safeguards for generated content.