Context switching
One task requires repeated movement between different tools.
PRODUCT DESIGN · AI · AUTOMATION
FlowAI.
Making powerful AI automation simple, understandable and controllable.
A mobile AI Agent Builder that helps people automate repetitive workflows across apps, without needing to learn how automation is built.
PROJECT OVERVIEW — 00
Automating the work between apps.
Modern professionals rely on multiple tools to complete even a simple task. An invoice can arrive by email, need to be downloaded, saved to cloud storage, logged in a spreadsheet, and shared with someone else.
Each app works on its own. The steps between them still demand repetitive manual effort.
FlowAI explores how AI agents can reduce that friction while keeping people in control of what automation can access and execute.
01 / 03
THE CHALLENGE
PROBLEM.
People have powerful tools. The problem is making them work together.
THE PROBLEM — 01
A simple task shouldn't require five different apps.
Many workflows mean switching between tools, transferring information manually, and remembering what must happen next.
GmailInvoice arrives
→
DownloadSave attachment
→
DriveUpload file
→
SheetsLog details
→
SlackNotify team
Repetitive actions
The same steps need to be completed again and again.
Human error
Manual transfers make forgotten or incorrect actions more likely.
Automation complexity
Existing tools ask users to learn triggers, actions, rules, and workflow logic.
PROBLEM STATEMENT
Users need a simpler way to automate repetitive tasks across applications without learning a complex system.
DESIGN CHALLENGE
How might we make cross-app automation powerful enough to be useful, yet simple and trustworthy enough for everyday users?
TARGET USER — CONCEPT PERSONA
A
Meet Arun.
Marketing professional
“I know what I want automated. I just don't want to build complicated workflows to make it happen.”
Needs
- Reduce repetitive work
- Create automation quickly
- Understand what AI is doing
- Control sensitive actions
Frustrations
- Technical terminology
- Too many setup steps
- Little visibility after a run
- Fear of unintended actions
Illustrative persona for the concept; research validation is a next step.
02 / 03
THE APPROACH
ACTION.
Translating a technically complex model into a guided mobile experience.
UX PROCESS — 02
A clear path from question to interface.
01
Discover
Map repetitive work
02
Define
Frame the core problem
03
Explore
Simplify creation
04
Design
Build for trust
05
Validate
Test control and clarity
RESEARCH FRAMEWORK — QUESTIONS TO INVESTIGATE
Understanding how people think about automation.
The research plan looks beyond productivity to trust and control around AI actions.
01
Which repetitive tasks span multiple apps?
02
Where does context switching create the most friction?
03
Why do people avoid current automation tools?
04
Which actions are safe to run automatically?
05
When should AI ask before acting?
INITIAL HYPOTHESES
These are design assumptions to test, not validated findings.
App switching creates friction
A single workflow can require several applications.
Automation feels technical
People know their goal, but not the language of automation.
Assistance needs boundaries
Sensitive actions may need visibility and approval.
Templates create momentum
Starting from a useful example may feel easier than starting blank.
CORE PRODUCT PRINCIPLE
Don't make users build automation.
Let them describe what they want done.
TRADITIONAL AUTOMATION
TriggerConditionNodeVariableActionAPI
vs
FLOWAI
“When an invoice arrives, save it to Drive and notify me.”
✦ AI generates an editable workflow
PRODUCT STRATEGY — MVP
One clear journey, end to end.
The concept focuses on creating and managing an agent successfully, instead of attempting every automation use case at once.
Create→Configure→Test→Activate→Monitor
Create an agentStart from a templateDescribe intentConnect appsReview workflowSet permissionsTestActivate or pauseMonitor activityRecover from failures
INFORMATION ARCHITECTURE
Organized around user intent.
Five destinations keep discovery, creation, oversight, and account control easy to find.
01
Home
Overview
Suggested automations
02
Agents
Active
Paused · Drafts
03
Create
Describe task
Templates
04
Activity
Execution history
Details · Approvals
05
Profile
Integrations
Permissions
CORE USER FLOW
A review point sits between generation and activation.
HomeCreate agentDescribe taskGenerateReviewConnect appsPermissionsTestActivateMonitor
EARLY DESIGN EXPLORATION
Moving away from node-based automation.
Node builders serve advanced users, but their connections and conditions can be hard to manage on a phone.
FlowAI uses vertically stacked workflow cards that describe each action in everyday language. The representation stays readable as users review, edit, and test the result.
EARLY EXPLORATION / COMPLEX NODE BUILDER
TriggerFilterExtractUploadNotify
Logic is visible, but scanning and editing demand more effort.SELECTED DIRECTION / VERTICAL STEPS
01 When a new invoice arrives02 Extract invoice details03 Save PDF to Drive04 Notify me
The sequence reads like a short explanation.UX DECISION / 01
Start with intent, not configuration.
“What should your agent do?” is a more approachable starting point than triggers and actions. Users can describe a task, choose a template, then customize the generated result.
THE DESIGN MOVE
Let the user begin in their own words.
The creation screen gives natural-language input and a guided path into the agent setup journey.
- Describe a workflow
- Choose a starting point
- Customize the outcome
UX DECISION / 02
AI drafts the workflow. People decide what runs.
FlowAI turns the instruction into a reviewable sequence. AI acts as a copilot: the user can inspect the steps and connected tools before activation.
01 / INTENT
“Save invoice attachments from Gmail to Drive and notify me.”
02 / GENERATION
✦
Building your workflow
03 / REVIEW
✓ Find invoice email
✓ Save attachment
✓ Notify me
Edit any step before continuingUSER CONTROL
Edit steps · Reorder actions · Remove actions · Add steps · Review connected apps
UX DECISION / 04
Test before trusting.
Before activation, a simulated run lets users inspect how each step would execute. The test journey is shown here as a process illustration.
SIMULATED TEST RUN
✓
Found sample invoice
✓
Extracted data
✓
Saved file to Drive
●
Updating spreadsheet
○
Sending notification
✓ Test successful
WHY IT MATTERS
A visible rehearsal reduces uncertainty.
The user can verify the intended sequence before granting continuous access. This interaction is a concept to validate through usability testing.
UX DECISION / 05
Show what AI did, not just that it finished.
An activity trail should answer what triggered a run, which apps were accessed, what information was used, which actions followed, and where approval was needed.
LESS USEFUL
“Task completed.”
FLOWAI'S DIRECTION
- Triggered by an invoice email
- Read attachment details
- Saved file to Drive
- Requested approval before sending
- Recorded time and status
UX DECISION / 06
Design failure as part of the workflow.
When an integration expires, the message should identify the exact failed step, preserve the steps already completed, and show the next action.
!
Google Drive connection expired
Invoice Assistant · Example recovery state
✓Invoice received
✓Invoice details extracted
!Upload to Drive failed
○Remaining actions paused
Reconnect DriveRetry
RECOVERY PRINCIPLE
What worked →
what failed →
what happens next.
FINAL EXPERIENCE — ORIGINAL FIGMA SCREENS
The FlowAI experience.
Selected screens from the supplied design, grouped by the job they support. Swipe each row on smaller screens.
01 / CREATE
Turn an instruction into an automation.
02 / CONFIGURE
Understand and control the workflow.
03 / ACTIVATE & MONITOR
Keep the agent understandable after launch.
INTERACTIVE PROTOTYPE
Experience the prototype.
The linked prototype explores the primary creation flow and the interaction patterns behind approval and recovery.
DESIGN SYSTEM
A system built to scale with agents and workflows.
Reusable patterns allow new agent types and integrations without requiring a new interaction model each time.
FOUNDATIONS / COLOR
Primary · Ink · Surface · Success · Attention
FOUNDATIONS / TYPEMake the complex clear.
Readable hierarchy for prompts, steps, status, and guidance.
COMPONENTS / CONTROLS
What should your agent do? ✦
COMPONENTS / STATES
Invoice AssistantGmail → Drive → Sheets● Active
✓ Completed! Ask me○ Paused
8PX SPACING RHYTHMROUNDED COMPONENTSSTATUS = ICON + LABELCONSISTENT APP ICONS
ACCESSIBILITY
Designing beyond visual polish.
01
Minimum 44px touch targets
02
Strong text and background contrast
03
Status shown with icon and label
04
Clear language over technical jargon
05
Visible system feedback
06
Descriptive recovery messages
07
Explicit confirmation for sensitive actions
FRONTEND PROTOTYPE
From Figma to a functional prototype.
The concept was implemented as a lightweight client-side application to explore interactions and transitions beyond static screens.
01
React 19
Component-based interface and state
02
TypeScript
Typed, predictable UI behavior
03
Vite 8
Fast preview and iteration
04
Tailwind CSS v4
Utility-first styling
PROTOTYPE ARCHITECTURE
App.tsx→Product screens→Reusable UI→useState logic→CSS animation
Screen routing, tabs, permissions, progression, and interaction states are managed client-side. Shimmer, pulse, slide-up, and bounce are CSS keyframes in index.css.
DESIGN ↔ DEVELOPMENT
Designing with implementation in mind.
The working prototype lets interaction choices be evaluated as behavior, rather than inferred from still screens.
FIGMA DESIGN
→
INTERACTIVE PROTOTYPE
01
Reusable components
Repeated patterns share consistent structures.
02
State-driven UX
Active, paused, running, failed, and approval states have explicit treatments.
03
Interaction validation
Critical flows can be explored in a working React prototype.
04
Responsive structure
Patterns are designed to adapt beyond the first mobile concept.
03 / 03
THE OUTCOME
RESULT.
A complex automation idea became a guided, understandable mobile concept.
FINAL SOLUTION — DESIGN OUTCOMES
Less manual switching
Agents connect actions across the apps involved in a workflow.
Lower setup complexity
People describe intent instead of assembling technical logic.
More control over AI
Users can review, test, approve, pause, and inspect activity.
FlowAI shifts automation from “How do I configure this?” to “What do I want done?”
DescribeReviewControlTestAutomate
These are intended UX outcomes of a concept prototype. They are not measured product results.
FUTURE VALIDATION
What I would validate next.
The next step is to test comprehension, trust, speed, and recovery with real participants.
Comprehension
Can someone explain what the agent will do before activation?
Trust
Which actions are people comfortable automating without confirmation?
Creation speed
How quickly can a first-time user create a working agent?
Recovery
Can users understand and fix a failed workflow step?
PROPOSED USABILITY TASK
“Create an agent that saves invoice attachments from Gmail to Google Drive and notifies you.”
Measure task completion, time on task, misclicks, permission comprehension, and confidence before activation.
LEARNINGS
What this project taught me.
01
AI UX is a control problem.
Generating a useful answer is only part of the work. People need to know and control what AI can execute.
02
Simplicity takes careful abstraction.
Powerful workflows should be possible without teaching people the technical system underneath.
03
Failure deserves first-class design.
Trust grows when people can see exactly what happened and how to recover.
FUTURE OPPORTUNITIES — NOT YET BUILT
Where FlowAI could go next.
Directions to explore after validating the core journey.
01
Smarter recommendations
Suggest automations based on recurring behavior.
02
Multi-agent workflows
Coordinate specialized agents on complex tasks.
03
Agent memory
Retain useful context with clear user controls.
04
Team agents
Share automations across an organization.
05
Advanced conditions
Support richer logic without losing clarity.
06
Analytics
Understand reliability and, once measured, time saved.
FLOWAI / PRODUCT DESIGN CASE STUDYPowerful automation.
Powerful automation.
Without the complexity.
FlowAI explores how AI agents can become understandable everyday products through simplicity, visibility, and control.