ActionFlow: A User-Centric Web Automation Platform

Client: Confidential

Role: Lead Product Designer

Scope: UX/UI Design · Extension Architecture · Product Strategy

Tools: Figma, React, Django, Playwright, React Router, Axios, Tailwind CSS, Daisy UI, Vite, Django REST framework, JWT, PostgreSQL, Chrome Extension API, Brevo API, SQLite Project Link: https://portfolio.inafana.com/project/11

ActionFlow is an intelligent browser automation platform that eliminates the "digital drudgery" of repetitive web tasks. It allows users to record complex browser interactions, from data entry to multi-page navigation, and transform them into reusable, automated workflows. By blending a Chrome extension with a high-level management dashboard, ActionFlow makes sophisticated web automation accessible to both technical and non-technical users.

The automation industry often faces a "technical wall" where users need coding skills to handle dynamic web elements. The challenge was to:

Simplify Complexity: Transform raw browser event logs into a visual, editable workflow that users can understand at a glance.

Handle Friction: Design a "Human-in-the-Loop" experience that gracefully pauses for MFA (Multi-Factor Authentication) without breaking the automation flow.

Ensure Reliability: Create a robust selector strategy that doesn't "break" when a website changes its layout slightly.

Balance Dual Interfaces: Create a seamless handoff between the Chrome Extension (the "Action") and the Web Dashboard (the "Management").

As the lead designer, I spearheaded the end-to-end experience, focusing on making automation feel like a collaborative partner:

The "Zero-Code" Recorder: Designed a Manifest V3 Chrome extension that records clicks and inputs in real-time, providing instant visual feedback on captured elements.

Dynamic Variable Mapping: Created an intuitive UI within the recording flow that allows users to mark input fields as variables, turning static recordings into flexible templates for mass data substitution.

Intelligent Replay Engine: Developed a dual-mode execution strategy. I designed the UX for "Interactive Replay" (in-browser) and "Headless Execution" (background), complete with automated screenshots for every step.

MFA Checkpoint UX: Designed a unique "Smart Pause" notification system that alerts users when manual intervention is needed for logins, ensuring automation remains reliable even behind secure walls.

Execution Transparency: Built a comprehensive dashboard to monitor "Workflow Health," featuring visual replay logs, failure alerts via email, and timezone-aware scheduling.

Delivered a sophisticated, full-stack automation ecosystem that bridges the gap between manual work and headless scripts. The final product features a trustworthy, high-performance interface that empowers teams to automate thousands of hours of manual data entry. By prioritizing "empathy for the operator," ActionFlow has evolved from a simple recorder into a robust enterprise tool ready for global scaling and complex SaaS integrations.