AI-Powered Workflow Builder

GenFlow

Designing a complex, AI-powered workflow builder from scratch that guides users to achieve outcomes without technical friction.

Genflow Dashboard

Role

Lead UX/UI Designer

Project

GenFlow

Timeline

2025 – 2026

Platform

Web-based SaaS

Tools

Figma, FigJam

01

The Starting Point

GenFlow began as a foundational idea:

"What if users could create complex workflows without needing to understand systems, logic, or code?"

There was no existing UX, no established flows, and absolutely no reference product internally. I was responsible for defining how this entire product should work from scratch.

02

The Core Problem

Workflow tools already exist in the market—but they come packed with inherent friction.

What I observed:

Most tools expect users to essentially think like engineers.

03

Reframing the Problem

Instead of asking, "How do we design a better workflow builder?", I entirely reframed the foundational question.

The New Focus

How might we let users focus entirely on outcomes, rather than logic?

This paradigm shift became the unshakeable foundation of the entire product design.

04

Key Insight

Through user exploration, one critical idea stood out amongst the rest:

Users don't struggle with workflows—they struggle with how to start and what comes next.

That meant the UX shouldn't just be an empty canvas enabling the building of flows—it should actively guide their thinking process.

05

Design Principles

I defined three core principles that shaped the entire experience:

Principle 1

Guide, Don't Just Enable

The system should proactively suggest next steps, not wait passively for user input.

Principle 2

Reduce Visual Complexity

Even complex workflows should feel distinctly structured, never overwhelming.

Principle 3

Think in Outcomes

Users explicitly define their goals → The system automatically helps build the underlying flow.

06

Designing the Experience

Instead of jumping blindly into UI creation, I rigorously designed the interaction model first.

A. Starting the Flow

Instead of presenting a blank, intimidating canvas (as is common in most tools), I introduced prompt-based flow creation. Users start by simply describing what they want in plain English.

  • "Send alerts when sales drop."
  • "Automate report generation every week."

B. AI-Assisted Flow Generation

Once prompted, the GenFlow AI interprets intent, automatically generates an initial workflow, and suggests required steps and logic. This entirely removes the "Where do I begin?" barrier.

C. Visual Flow Builder

Once generated, users can easily view the flow as a structured diagram, edit steps, or add/remove nodes. My key UX decision here was to explicitly keep the interface modular and clean, actively avoiding visual clutter.

Trigger / Input

"Automate Weekly Sales Report"

User defines the goal in plain English.

AI Interpreter

Intent Recognition

Mapping keywords to data sources and logic operations.

Data Source

Sales DB Query

Extracting raw performance metrics.

Condition

Target Check

Checking if sales hit 100% of goal.

Final Outcome

Automated Slack Alert

Workflow executed successfully.

D. Step-Level Clarity

Every individual node in the workflow transparently displays exactly what it does, what its inputs/outputs are, and any dependencies. This helps non-technical users understand the system logic instantly.

E. Continuous Guidance

Instead of leaving users isolated, the system continuously suggests optimal next steps, flags missing or broken logic, and recommends automations. The experience becomes inherently collaborative, rather than manual.

07

Challenges I Solved

1. Blank Canvas Problem

Users didn't know how to start.

Solution:

Implemented prompt-based conversational flow generation.

2. Visual Overload

Complex workflows became messy fast.

Solution:

Utilized structured layout grids, progressive disclosure, and collapsible node sections.

3. Technical Barriers

Non-technical users struggled with abstract logic.

Solution:

Adopted simplified plain-language labels, AI-assisted building tools, and predefined outcome templates.

08

The System I Designed

GenFlow ultimately evolved into a powerful, frictionless system built upon three distinct layers:

Genflow UI 1
Genflow UI 2
Genflow UI 4
Genflow UI 5
Genflow UI 6
Genflow UI 7
Genflow UI 8
Genflow UI 9
Genflow UI 10
Genflow UI 11
Genflow UI 12
Genflow UI 13
Genflow UI 14
Genflow UI 15
09

The Outcome

Results

The final experience successfully shifted the user focus from "building flows" to "achieving outcomes."

  • Create workflows instantly without starting from scratch.
  • Understand complex backend logic purely visually.
  • Automate massive processes with zero technical expertise.
10

What I Learned

11

Closing Thought

GenFlow is not just another workflow tool.

It is a system that intimately helps users think, decide, and automate—without a single drop of friction.

← Previous Portfolio Next Portfolio →