Aevent

Introduction

AEvent is a platform designed to enhance the experience of hosting webinars by automating and streamlining various aspects of the process. It integrates with popular platforms like Zoom and HubSpot, allowing you to schedule webinars, automate email reminders, handle participant registration, and manage post-webinar follow-ups

Objectives

The goal was to design a form builder that allows users to easily drag and drop essential form elements and customize the overall look and feel to match their websites.

Problem

Initially, users couldn't design forms they had to copy the form’s code from the app and manually style it for their websites. We received extensive feedback from customer support, with users requesting a feature to easily customize forms, saving them time and effort from manual coding.

Challenges

We had a tight deadline and needed to ship this feature within 3 weeks. because over 200 of our users, who have audiences in the thousands, frequently schedule webinars. This feature was crucial for them to efficiently onboard multiple registrants, enhancing their ability to manage large-scale events.

Outcome

This feature allowed users to easily customize forms directly within the app, eliminating the need for manual coding and reducing the time and effort required to integrate forms into their websites.

Old Form Code generator

After having a clear requirements from customer support, we started with the process of designing the from builder. As mentioned earlier, there were limitations around capabilities and the timeframe for this feature. here is visual representation of old version.

Before design, whole team aligned on how we would measure success.

Goal 1

Directly edit text and easily drag and drop elements. This will allow users to quickly customize their forms without needing to dive into the code.

Goal 2

Consistent spacing for better accessibility, while having clear section separation which will help reduces cognitive load.

Success Metrics

Consistent

Easy to customize

Less Overwhelming

Comparative Assessment

Comparative assessment aligns the product with user's mental model, shaping expectations based on familiar products and services.

We aimed to blend the best of both. Google Forms has consistent headings and spacing, but the card layout adds too much empty space, making forms feel cluttered and forcing participants to scroll through long pages.

Typeform is intuitive with a smooth flow, allowing direct editing without extra steps. But if a participant skips a question and wants to go back, they have to scroll through each part, which can be really frustrating.

So then we created a system that takes the Google Form card system, by omitting the card design and making it more compact, and took the direct approach of Typeform that is more intuitive for the users.

Form Builder Design Specific

We made an initial design draft for the builder, outlining how users could customize form elements and set global styles. This helped the team align on the design’s look and feel, giving everyone a clear idea of the style and personality we wanted for the interface.

Design Iterations for Side panel and elements setting dropdown.

The idea was to let users easily customize forms by dragging and dropping the necessary elements. To achieve this, we experimented with different variations for the element settings, including a dropdown menu and a side panel. This exploration helped us find the most intuitive and user-friendly approach.

Final Design

After finalizing the requirements from the earlier designs, we came up with the final design. This process involved refining our ideas and incorporating feedback to ensure the final product met all user needs and goals.

Design Component

To maintain consistency throughout the design, we created detailed components for every element, no matter how small, and defined the interactions for each UI element. This careful attention to detail ensured a cohesive and seamless user experience across the entire interface.