Form Builder
Create Intuitive Creation Tool
Improve Third-Party Integration
Flexible Page Component
The Form Builder project was designed to give users a simple drag-and-drop interface to create various forms. Forms can be configured for various actions, including log-in panels, data capture, and more. The Form Builder received continued development to improve integrations with third-party providers, including Salesforce.
Design Tasks
Background
In Need of Tidying
The TeamSite form editor was originally designed and implemented to allow users to easily create end-user forms. These forms can be used as login fields, contact forms, marketing research, and more. The form builder allows users to drag fields from the left panel into the center canvas. Field and form settings are available on the right panel.
Research sessions with several existing customers informed us that the form builder, while functional, lacks a clear visual structure. Users often struggled to understand the basic interaction patterns. In addition, users informed our research teams that the form builder appeared messy. They wanted to see refinement to the UI.
User Personas
Charlie – Web Developer
“Give me something that is functional flexible, efficient, and open.”
- Builds custom applications
- Needs documented API’s
- Works in junction with other developers
- Very technical
Glenn – Content Writer
“I produce the content that drives this business forward.”
- Works with many documents and assets
- Metadata can be an obstacle
- Needs to collaborate on ideas with writing team
- Wants control over content
Jerri – Knowledge Manager
“I do what is needed to keep my team working efficiently.”
- Liaison between Developers and business units
- Oversees multiple teams and has additional system access
- Helps with training new hires
- Willing to build whatever is needed for her team
Key Areas
Visual Clarity
The form builder, while simple to operate, can appear a bit complicated for a first time user. By creating a defined and cohesive structure, the form builder and its operation become clear to the user.
Panel Refinements
The left and right panels need refinement to make them more visually pleasing and functional. Refinements will be made to the iconography, colors, and form elements like checkboxes, radio buttons, and input fields.
Prototypes and Mockups
Initial Refinement
Part of the initial refinements to the form editor were to create a more cohesive and visually distinct set of panels. These three sections provide the user with a clear delineation of the form builder functions. Available fields are located on the left side, the canvas is located in the center with the form name now located above, and field and form settings are located on the right.
Third Party Fields
Third party form sources, including Salesforce and Eloqua, are integrated into the left hand panel. These form fields are pre-configured to match the field typing and sync submissions to their native environments. Because the volume of these fields can be so large, they can be sorted and filtered as well.
Field Setting Refinement
Field settings were refined to allow users to better control each field in their form design. Users can easily define a fields label, placeholder text, description, and more. For checkbox, picklist, radio, and other multi-selection fields, users can easily create and arrange the list options. For third party fields, many of these field settings are pre-configured.