Flowscale: Streamlining AI Workflow Collaboration
Flowscale: Streamlining AI Workflow Collaboration
Flowscale: Streamlining AI Workflow Collaboration
A collaborative platform that helps teams build, version, and deploy ComfyUI workflows, without endless file swapping or technical bottlenecks.
A collaborative platform that helps teams build, version, and deploy ComfyUI workflows, without endless file swapping or technical bottlenecks.
A collaborative platform that helps teams build, version, and deploy ComfyUI workflows, without endless file swapping or technical bottlenecks.
Client
Client
Client
Flowscale AI
Flowscale AI
Flowscale AI
Date
Date
Date
March 2024 - June 2024
March 2024 - June 2024
March 2024 - June 2024
Team
Team
Team
1 project manager, 1 product manager, 2 developers
1 project manager, 1 product manager, 2 developers
1 project manager, 1 product manager, 2 developers
Role and Contribution
Role and Contribution
Role and Contribution
User interviews, user flows, wireframing, prototyping, branding, visual design, usability testing
User interviews, user flows, wireframing, prototyping, branding, visual design, usability testing
User interviews, user flows, wireframing, prototyping, branding, visual design, usability testing
Key Outcomes
Key Outcomes
Key Outcomes
Turning Design Decisions Into Results
Turning Design Decisions Into Results
Turning Design Decisions Into Results
Turning Design Decisions Into Results
70%
70%
70%
70%
Reduction in file-sharing overhead
Reduction in file-sharing overhead
Reduction in file-sharing overhead
50%
50%
50%
50%
Faster workflow handoffs in teams
Faster workflow handoffs in teams
Faster workflow handoffs in teams
40%
40%
40%
40%
Decrease in time for deployment
Decrease in time for deployment
Decrease in time for deployment
Problem
Problem
Problem
Teams Spent More Time Sharing Files Than Shipping Workflows
Teams Spent More Time Sharing Files Than Shipping Workflows
Teams Spent More Time Sharing Files Than Shipping Workflows
Teams Spent More Time Sharing Files Than Shipping Workflows
Many creative and technical teams use ComfyUI, a visual tool that helps them build Stable Diffusion pipelines, the systems behind AI-generated images, videos, and other media.
In ComfyUI, users connect blocks (called nodes) to design workflows without writing much code.
Many creative and technical teams use ComfyUI, a visual tool that helps them build Stable Diffusion pipelines, the systems behind AI-generated images, videos, and other media.
In ComfyUI, users connect blocks (called nodes) to design workflows without writing much code.
Many creative and technical teams use ComfyUI, a visual tool that helps them build Stable Diffusion pipelines, the systems behind AI-generated images, videos, and other media.
In ComfyUI, users connect blocks (called nodes) to design workflows without writing much code.
Many creative and technical teams use ComfyUI, a visual tool that helps them build Stable Diffusion pipelines, the systems behind AI-generated images, videos, and other media.
In ComfyUI, users connect blocks (called nodes) to design workflows without writing much code.
Many creative and technical teams use ComfyUI, a visual tool that helps them build Stable Diffusion pipelines, the systems behind AI-generated images, videos, and other media.
In ComfyUI, users connect blocks (called nodes) to design workflows without writing much code.
But when more than one person needed to collaborate, problems emerged. This friction slowed progress and made scaling nearly impossible.
But when more than one person needed to collaborate, problems emerged. This friction slowed progress and made scaling nearly impossible.
But when more than one person needed to collaborate, problems emerged. This friction slowed progress and made scaling nearly impossible.
Collaboration Issues
Collaboration Issues
Collaboration Issues
Teams couldn’t see who changed what or when changes were made.
Teams couldn’t see who changed what or when changes were made.
Teams couldn’t see who changed what or when changes were made.
Teams couldn’t see who changed what or when changes were made.
Limited Local Resources
Limited Local Resources
Limited Local Resources
Heavy workflows crashed local machines, and cloud setup was complex and slow.
Heavy workflows crashed local machines, and cloud setup was complex and slow.
Heavy workflows crashed local machines, and cloud setup was complex and slow.
Frequent Breakages
Frequent Breakages
Frequent Breakages
Different environments caused workflows to fail unpredictably.
Different environments caused workflows to fail unpredictably.
Different environments caused workflows to fail unpredictably.
Deployment Bottlenecks
Deployment Bottlenecks
Deployment Bottlenecks
Non-developers relied on engineers to publish their work.
Non-developers relied on engineers to publish their work.
Non-developers relied on engineers to publish their work.
Non-developers relied on engineers to publish their work.
Core challenge
Core challenge
Core challenge
The challenge was to help teams build, version, and deploy AI workflows without manual file sharing or technical friction.
The challenge was to help teams build, version, and deploy AI workflows without manual file sharing or technical friction.
The challenge was to help teams build, version, and deploy AI workflows without manual file sharing or technical friction.
The challenge was to help teams build, version, and deploy AI workflows without manual file sharing or technical friction.
Solution
Solution
Solution
A Clear, Unified Solution for Workflow Collaboration
A Clear, Unified Solution for Workflow Collaboration
A Clear, Unified Solution for Workflow Collaboration
A Clear, Unified Solution for Workflow Collaboration
Version Control Without the Overhead
Version Control Without the Overhead
Version Control Without the Overhead
Save changes locally and sync to a shared cloud repository
Connect repositories to GitHub for code visibility
Upload new folders or files directly from the dashboard
Save changes locally and sync to a shared cloud repository
Connect repositories to GitHub for code visibility
Upload new folders or files directly from the dashboard
Save changes locally and sync to a shared cloud repository
Connect repositories to GitHub for code visibility
Upload new folders or files directly from the dashboard
Real-Time Collaboration for Teams
Real-Time Collaboration for Teams
Real-Time Collaboration for Teams
Commit and synchronize edits with one click
View a Change Log showing who made changes and when
Reduce confusion and delays across the team
Commit and synchronize edits with one click
View a Change Log showing who made changes and when
Reduce confusion and delays across the team
Commit and synchronize edits with one click
View a Change Log showing who made changes and when
Reduce confusion and delays across the team
One-Click Deployment Pipelines
One-Click Deployment Pipelines
One-Click Deployment Pipelines
Deploy workflows instantly with a shareable UI and API docs
Use ready-made templates or create custom deployment setups
Schedule tasks for individuals or teams without developer help
Deploy workflows instantly with a shareable UI and API docs
Use ready-made templates or create custom deployment setups
Schedule tasks for individuals or teams without developer help
Deploy workflows instantly with a shareable UI and API docs
Use ready-made templates or create custom deployment setups
Schedule tasks for individuals or teams without developer help
Insights
Insights
Insights
Research Confirmed that Complexity Deterred Both Developers and Designers
Research Confirmed that Complexity Deterred Both Developers and Designers
Research Confirmed that Complexity Deterred Both Developers and Designers
Research Confirmed that Complexity Deterred Both Developers and Designers
We interviewed six professionals: developers, 3D designers, and motion designers, to learn how they work and why collaboration fails.
We interviewed six professionals: developers, 3D designers, and motion designers, to learn how they work and why collaboration fails.
We interviewed six professionals: developers, 3D designers, and motion designers, to learn how they work and why collaboration fails.
Fast Adoption for Some
Fast Adoption for Some
Fast Adoption for Some
Designers used to Blender learned ComfyUI quickly, while non-developers struggled to keep up.
Designers used to Blender learned ComfyUI quickly, while non-developers struggled to keep up.
Designers used to Blender learned ComfyUI quickly, while non-developers struggled to keep up.
Designers used to Blender learned ComfyUI quickly, while non-developers struggled to keep up.
Poor Documentation
Poor Documentation
Poor Documentation
A lack of tutorials and documentation made it hard for non-developers to fully utilize the platform.
A lack of tutorials and documentation made it hard for non-developers to fully utilize the platform.
A lack of tutorials and documentation made it hard for non-developers to fully utilize the platform.
Deployment Barriers
Deployment Barriers
Deployment Barriers
Non-developers had difficulty deploying without coding knowledge, relying on developers for help.
Non-developers had difficulty deploying without coding knowledge, relying on developers for help.
Non-developers had difficulty deploying without coding knowledge, relying on developers for help.
Slow Manual Sharing
Slow Manual Sharing
Slow Manual Sharing
Using WhatsApp, Notion, and Loom for collaboration was slow and repetitive.
Using WhatsApp, Notion, and Loom for collaboration was slow and repetitive.
Using WhatsApp, Notion, and Loom for collaboration was slow and repetitive.
Technical Stability Issues
Technical Stability Issues
Technical Stability Issues
Frequent node import failures and system instability caused frustration for daily users.
Frequent node import failures and system instability caused frustration for daily users.
Frequent node import failures and system instability caused frustration for daily users.
Goal
Goal
Goal
Building a Seamless Workflow from Versioning to Deployment
Building a Seamless Workflow from Versioning to Deployment
Building a Seamless Workflow from Versioning to Deployment
Building a Seamless Workflow from Versioning to Deployment
From these findings, we set clear objectives:
Centralize collaboration with automatic versioning and rollback
Integrate cloud GPUs to handle heavy workflows
Create one-click deployment accessible to everyone
From these findings, we set clear objectives:
Centralize collaboration with automatic versioning and rollback
Integrate cloud GPUs to handle heavy workflows
Create one-click deployment accessible to everyone
From these findings, we set clear objectives:
Centralize collaboration with automatic versioning and rollback
Integrate cloud GPUs to handle heavy workflows
Create one-click deployment accessible to everyone
Solution
Solution
Solution
The First Designs We Put in Front of Users
The First Designs We Put in Front of Users
The First Designs We Put in Front of Users
The First Designs We Put in Front of Users
These changes would move the Canvas page from passive storage to an interactive, adaptive tool.
These changes would move the Canvas page from passive storage to an interactive, adaptive tool.
These changes would move the Canvas page from passive storage to an interactive, adaptive tool.
Usability Testing
Usability Testing
Usability Testing
Familiar Interfaces Still Confused and Frustrated Users
Familiar Interfaces Still Confused and Frustrated Users
Familiar Interfaces Still Confused and Frustrated Users
Familiar Interfaces Still Confused and Frustrated Users
Usability tests with five participants revealed unexpected friction:
Usability tests with five participants revealed unexpected friction:
Usability tests with five participants revealed unexpected friction:
Disconnected Dashboard
Disconnected Dashboard
Disconnected Dashboard
Users didn’t realize the dashboard was part of the same product, making it feel separate and confusing.
Users didn’t realize the dashboard was part of the same product, making it feel separate and confusing.
Users didn’t realize the dashboard was part of the same product, making it feel separate and confusing.
Limited File Management
Limited File Management
Limited File Management
They were frustrated by only being able to open one file at a time and by the lack of state saving.
They were frustrated by only being able to open one file at a time and by the lack of state saving.
They were frustrated by only being able to open one file at a time and by the lack of state saving.
They were frustrated by only being able to open one file at a time and by the lack of state saving.
They were frustrated by only being able to open one file at a time and by the lack of state saving.
Unclear “Dev-Mode” Labels
Unclear “Dev-Mode” Labels
Unclear “Dev-Mode” Labels
The “dev-mode” option at the bottom wasn’t self-explanatory, leaving users unsure of its purpose.
The “dev-mode” option at the bottom wasn’t self-explanatory, leaving users unsure of its purpose.
The “dev-mode” option at the bottom wasn’t self-explanatory, leaving users unsure of its purpose.
The “dev-mode” option at the bottom wasn’t self-explanatory, leaving users unsure of its purpose.
Commit Textbox Confusion
Commit Textbox Confusion
Commit Textbox Confusion
The commit field looked like VS Code, which intimidated non-developers unfamiliar with coding workflows.
The commit field looked like VS Code, which intimidated non-developers unfamiliar with coding workflows.
The commit field looked like VS Code, which intimidated non-developers unfamiliar with coding workflows.
Deployment Felt Abstract
Deployment Felt Abstract
Deployment Felt Abstract
Users couldn’t see how their workflows would actually get published or shared, making the process feel incomplete.
Users couldn’t see how their workflows would actually get published or shared, making the process feel incomplete.
Users couldn’t see how their workflows would actually get published or shared, making the process feel incomplete.
Wireframing
Wireframing
Wireframing
Wireframes Mapped How Users Would Move from Creation to Deployment
Wireframes Mapped How Users Would Move from Creation to Deployment
Wireframes Mapped How Users Would Move from Creation to Deployment
Wireframes Mapped How Users Would Move from Creation to Deployment
Local Installation
Local Installation
Local Installation
Clean folder structures and clear commit workflows
Visual cues for saved vs running work
Clean folder structures and clear commit workflows
Visual cues for saved vs running work
Clean folder structures and clear commit workflows
Visual cues for saved vs running work
Dashboard
Dashboard
Dashboard
Simple navigation for deployments, runs, and settings
Workspaces to organize related projects
Real-time ComfyUI embedding postponed due to technical constraints
Simple navigation for deployments, runs, and settings
Workspaces to organize related projects
Real-time ComfyUI embedding postponed due to technical constraints
Simple navigation for deployments, runs, and settings
Workspaces to organize related projects
Real-time ComfyUI embedding postponed due to technical constraints
Prototype
Prototype
Prototype
The Final Product Helped Teams Build and Ship with Confidence
The Final Product Helped Teams Build and Ship with Confidence
The Final Product Helped Teams Build and Ship with Confidence
The Final Product Helped Teams Build and Ship with Confidence
At launch, FlowScale AI delivered:
Local-first workflow building connected to cloud repositories
Automatic versioning and real-time collaboration
One-click deployment with shareable UIs and APIs
A clean interface approachable for any skill level
At launch, FlowScale AI delivered:
Local-first workflow building connected to cloud repositories
Automatic versioning and real-time collaboration
One-click deployment with shareable UIs and APIs
A clean interface approachable for any skill level
At launch, FlowScale AI delivered:
Local-first workflow building connected to cloud repositories
Automatic versioning and real-time collaboration
One-click deployment with shareable UIs and APIs
A clean interface approachable for any skill level
At launch, FlowScale AI delivered:
Local-first workflow building connected to cloud repositories
Automatic versioning and real-time collaboration
One-click deployment with shareable UIs and APIs
A clean interface approachable for any skill level
At launch, FlowScale AI delivered:
Local-first workflow building connected to cloud repositories
Automatic versioning and real-time collaboration
One-click deployment with shareable UIs and APIs
A clean interface approachable for any skill level
Reflection
Reflection
Reflection
What I Learned Designing for Technical and Creative Users
What I Learned Designing for Technical and Creative Users
What I Learned Designing for Technical and Creative Users
What I Learned Designing for Technical and Creative Users
Designing FlowScale AI taught me that:
Even technical users want predictable, transparent workflows
Borrowed patterns need adaptation to new contexts
Reducing friction empowers more diverse contributors
Strong branding reinforces trust in complex products
Designing FlowScale AI taught me that:
Even technical users want predictable, transparent workflows
Borrowed patterns need adaptation to new contexts
Reducing friction empowers more diverse contributors
Strong branding reinforces trust in complex products
Designing FlowScale AI taught me that:
Even technical users want predictable, transparent workflows
Borrowed patterns need adaptation to new contexts
Reducing friction empowers more diverse contributors
Strong branding reinforces trust in complex products
Thank you for reading!
Thank you for reading!
Thank you for reading!
Thank you for reading!
Go back to top
More Projects
More Projects
Petavue: Intelligent Assistant
Petavue: Intelligent Assistant
A virtual assistant to help deliver every day value to teams. including assisting them in analyzing data, drawing conclusions and make decisions.
A virtual assistant to help deliver every day value to teams. including assisting them in analyzing data, drawing conclusions and make decisions.
A virtual assistant to help deliver every day value to teams. including assisting them in analyzing data, drawing conclusions and make decisions.
UX Research
UI Design
Visual Design
UMSI Career Development Office
UMSI Career Development Office
A multi-method evaluation of UMSI's Career Development Office Canvas page to uncover why students weren’t using it, and what we could do to
A multi-method evaluation of UMSI's Career Development Office Canvas page to uncover why students weren’t using it, and what we could do to
A multi-method evaluation of UMSI's Career Development Office Canvas page to uncover why students weren’t using it, and what we could do to
UX Research
UI Design