CreativeFlow AI
UX Case Study | GenAI project
This project aims at designing an AI-powered content assistant that transforms how creators produce video content - from script to final cut.
Overview
CreativeFlow AI is a concept design for an AI-powered video content creation platform that helps creators, marketers, and businesses produce professional video content faster. The platform integrates intelligent writing assistance, automated B-roll suggestions, and mood-based music matching—all powered by AI that understands creative intent.
Role: UX/Product Designer
Duration: 4 weeks
Tools: Figma, Figjam
Type: Concept Project
The Challenge
Video content creation is time-consuming and requires multiple tools. Creators spend 60% of their time on non-creative tasks like finding stock footage and music. How might we use AI to reduce friction in the creative workflow?
6
Core Screens
45+
Components
60%
Time Saved
AI possibilities
Understanding the Problem
User Research Insights: Through competitive analysis and secondary research of existing video creation tools, I identified key pain points in the current creator workflow.
😤
Tool Fragmentation
Creators use 5-7 different tools to produce a single video, leading to context switching and lost productivity.
🎯
Creative Block
Writers often struggle to optimize scripts for video format, missing engagement opportunities.
⏰
Time-Consuming Search
Finding the right B-roll footage and music takes 2-3 hours per video on average.
🔄
Iteration Friction
Making changes requires going back through multiple tools and re-doing work.
Target Users
The primary users are content creators, marketing teams, and small business owners who need to produce professional video content but lack the time or resources for a full production team.
Key Insight
Users don't want AI to replace their creativity—they want AI to handle the tedious parts so they can focus on what matters: telling their story.
Primary User Journey
🏠
Dashboard
Entry Point
📝
Script Input
Content Creation
✨
Script Output
AI Enhancement
🎬
B-roll Finder
Visual Assets
💬
AI Chat
Global Access
🎵
Music Matcher
Audio Selection
Design Process
User Research Insights: Through competitive analysis and secondary research of existing video creation tools, I identified key pain points in the current creator workflow.
1
Design Process
Analyzed competitor tools (Descript, Runway, Kapwing), studied AI interaction patterns, and mapped the video creation workflow to identify automation opportunities.
2
Information Architecture
Designed a workflow-based navigation that guides users through the creation process while allowing flexibility to jump between features. The AI assistant is globally accessible from any screen.
3
Low-Fidelity Wireframes
Sketched multiple layout options for the split-screen AI interface, testing different ratios and interaction patterns for the human-AI collaboration experience.
4
Design System Creation
Built a comprehensive design system with AI-specific components: processing indicators, confidence scores, suggestion chips, and animated feedback states.
5
High-Fidelity Design & Prototype
Created detailed screen designs with interactive prototype demonstrating the complete user journey from script input to final export.
Key Screens & Features
Dashboard: Entry Point
Design Decisions: The dashboard surfaces AI insights alongside project management. The "AI Insights" card uses gradient accents to differentiate AI-generated content from user-created elements. Stats cards show time saved and productivity gains to reinforce the value of AI assistance.
AI Powered Search
Design Decisions: AI suggestions appear as clickable chips extracted from the script, reducing manual search effort. Match percentage badges help users quickly evaluate relevance. Auto-preview on hover enables rapid browsing without clicks.
Script Output with AI Assistant
Design Decisions: The 60/40 split layout maintains focus on the script while keeping AI collaboration accessible. Yellow highlights show AI edits with hover-to-compare functionality. The chat panel uses conversational UI patterns with quick-action chips for common refinements.
Design System Highlights
A key challenge was creating a visual language that clearly communicates "AI-generated" vs "user-created" content without being distracting.
🎨
AI Gradient
Purple-to-cyan gradient used consistently for AI elements: buttons, badges, loading states, and the signature "sparkle" icon.
💬
Conversational UI
Chat bubbles with distinct styling for AI vs human, supporting rich responses like embedded cards and action buttons.
✨
Processing States
Animated borders and pulsing glow effects communicate AI activity without blocking the UI or causing anxiety.
📊
Confidence Indicators
Match percentages and confidence scores help users understand AI suggestions without eroding trust.
Key Learnings
1
AI needs transparency, not magic.
Users are more comfortable with AI when they understand what it's doing. The diff view and confidence scores build trust.
2
Preserve user agency.
Every AI suggestion must be easy to accept, modify, or reject. The undo functionality and edit controls ensure users remain in control.
3
Progressive disclosure for AI features.
Not all users are comfortable with AI. Starting with simple enhancements and revealing advanced features gradually reduces overwhelm.
4
Consistency across AI touchpoints.
Using the same visual language (gradients, sparkle icons, processing animations) across all AI features creates a learnable pattern.
5
System-level thinking matters.
The design system approach ensured that AI components work cohesively across all 6 screens and can scale to new features.
Impact & Next Steps
Projected Impact: Based on workflow analysis, CreativeFlow AI could reduce video production time by 60% by automating B-roll search, music matching, and script optimization, allowing creators to focus on storytelling rather than logistics.
🧪
User Testing
Conduct usability studies to validate AI interaction patterns and refine the split-screen experience.
🔗
Integration Points
Design handoff flows to popular video editors (Premiere, DaVinci) for seamless export.
📱
Mobile Experience
Adapt the AI assistant for mobile workflows, enabling on-the-go ideation and review.
🌍
Localization
Consider multi-language AI assistance and regional content libraries.