HelpGent – UI/UX Design for a Conversational Form Builder & Async Video Messaging Plugin

Industry: Communication FormsWordPressSaaS
Service Category: UI/UX Design
Service We Provided: UX ResearchUser Flow PlanningInformation ArchitectureWireframingUI/UX Design
Scope of Work: Core Plugin UI/UX DesignPlugin Frontend DesignAdmin Panel DesignConversational Form BuilderForm Elements & SettingsComplete Live-Chat

A complete UI/UX design case study of HelpGent a WordPress conversational form builder plugin with video, voice, text, and screen recording, built to replace static forms and live chat.

HelpGent – Conversational Form Builder & Async Video Messaging Plugin project overview

About the Project

HelpGent is a powerful conversational, multi-step form builder plugin for WordPress that transforms traditional static forms into engaging, interactive Video Funnels. Instead of collecting a name, an email, and a short message, HelpGent lets visitors respond through video messaging, voice messaging, text messaging, and screen recording making every interaction feel more human and dynamic, without anyone needing to be online at the same time.

We designed the entire plugin from the ground up starting with market research and product strategy, through wireframing and prototyping, all the way to the final high-fidelity UI. This covered the complete plugin experience: the frontend conversational form and chat/messaging experience, the WordPress admin panel, the drag-and-drop conversational form builder, the global settings panel, 10+ form creation elements and their individual settings, and the complete live-chat/form bubble widget that visitors interact with on the frontend. The plugin is currently live on WordPress.org.

Problems

Static contact forms and traditional live-chat widgets each solve part of the communication problem, but both leave real gaps for businesses trying to understand and engage their visitors.

The key problems we identified:

Traditional contact forms collect only a name, an email, and a short text message with no real context about the visitor's intent, urgency, or fit.
Live chat widgets require someone to be online at all times, making them impractical for solo consultants, small teams, or businesses spanning multiple time zones.
Neither static forms nor live chat allow visitors to explain complex issues (like a bug or a product question) in a natural, expressive way everything is reduced to typed text.
Floating chat widgets often feel intrusive, block page content, and still require real-time availability to be useful.
There was no single WordPress plugin that combined multi-step conversational forms, async video/voice messaging, and screen recording into one clean, easy-to-use tool.
As a form builder targeting non-technical WordPress users, the product needed to feel as simple as a typical form plugin, while still supporting a genuinely new and more complex interaction model (recording, playback, conversation threads).

Challenges

Across research, design, and the overall product journey, we faced several key challenges:

Research & Strategy Challenges:

Validating a fundamentally new interaction model replacing "fill and submit" with an ongoing, asynchronous conversation in a market dominated by familiar static form builders.
Understanding two distinct audiences: the WordPress site owner building the form, and the anonymous visitor answering it (often without a WordPress account).
Studying live chat tools, traditional contact forms, and floating widgets to define exactly where HelpGent needed to be simpler, faster, or more capable.

Design Challenges:

Designing a drag-and-drop conversational form builder that could handle 10+ form elements (text, video recording, voice recording, file upload, date/time pickers, GDPR consent, Google Maps, reCAPTCHA, and more) each with its own configurable settings without becoming overwhelming.
Creating an intuitive step-by-step, screen-per-question form experience that feels like a real conversation rather than a traditional multi-page form.
Designing a fully functional live-chat / form bubble widget for the frontend covering the floating trigger, the conversation thread, media playback (video, voice, screen recordings), and reply composition all inside a compact, non-intrusive widget.
Building a conditional logic system UI that lets non-technical users visually branch a form based on previous answers, without needing to understand complex logic trees.
Designing the admin inbox and dashboard to clearly display incoming responses across multiple media types (video, voice, text, screen recordings) in one unified, scannable interface.
Structuring the global settings panel general settings, integrations (Google Drive, Bunny Storage, Directorist), notifications, and branding in a way that stays approachable for beginners yet flexible for advanced users.

HelpGent conversational form builder overview

Our Solutions

We approached HelpGent as a complete conversational communication platform for WordPress, focusing on making complex functionality simple, intuitive, and scalable.

Conversational Form Builder

Designed the complete drag-and-drop form builder experience.
Created multi-step form flows with intuitive navigation and configuration.
Designed reusable builder patterns for scalability.

Form Elements & Settings

Designed 10+ interactive form elements and their individual settings.
Covered text, file upload, video, voice, screen recording, date/time, validation, maps, consent, and other input types.
Created flexible configuration patterns for different form requirements.

Video, Voice & Screen Recording

Designed complete recording and media-response experiences.
Created interfaces for video, voice, and screen recording, including recording, preview, playback, and response states.

Conversational Messaging & Live Chat

Designed the complete conversation experience for text, video, and voice communication.
Created inbox, message threads, media interactions, and follow-up workflows.
Connected form submissions with ongoing conversations.

Frontend & Admin Experience

Designed the complete WordPress admin panel and frontend user experience.
Covered forms, responses, conversations, contacts, dashboards, and form bubble interactions.
Created a structured settings system for product and form-level configurations.

Scalable Design System

Established reusable UI patterns across the entire plugin.
Designed consistent components for forms, builders, settings, conversations, media, notifications, and system states.
Created a scalable foundation for future features and extensions.

The Final Result

We designed HelpGent as a complete WordPress conversational communication product, taking the experience from initial market research and product strategy through UX architecture, wireframing, prototyping, and final high-fidelity UI design.

Our work covered the complete product ecosystem, including:

Complete WordPress plugin frontend.
Admin panel and dashboard.
Drag-and-drop conversational form builder.
10+ form elements and their configuration experiences.
Multi-step form workflows.
Conditional logic.
Video messaging.
Voice messaging.
Screen recording.
Text-based conversations.
Live-chat and conversation experience.
Form bubble.
Frontend user dashboard.
Form and product settings.
Media and communication workflows.
Supporting UI patterns and design system.

Overall, HelpGent demonstrates how thoughtful, research-driven UI/UX design can turn a fundamentally new interaction model asynchronous, multi-format conversation into a product that feels simple, approachable, and genuinely useful from the very first form. As Lead Product Designer, I'm proud to have shaped this product from initial strategy through to its final, live version.