Universal Form Builder
A feature embedded within the SFX CRM platform that lets users generate forms with ease and publish them onto any career-site page through the CMS - replacing a hand-coded process that used to depend entirely on tech support.
The Form Builder feature gives users a comprehensive toolset to create customised forms quickly and effortlessly - designing forms tailored to their specific needs without requiring any technical knowledge.
It sits within SFX's Libraries area. Talent marketers, recruitment marketers and sourcers use it to build landing pages and email campaigns aimed at attracting and engaging candidates - collecting demographic information or letting candidates differentiate themselves through lead-capture forms, with the goal of converting that captured information into prospective customers.
Give people the ability to create and manage their own forms within the product - landing pages and lead-capture forms that appear on career-site pages to collect demographic information or let candidates differentiate themselves.
An easy-to-use form builder interface
The ability to collect and see responses
Advanced options commonly requested through support tickets
Continued access to old forms for clients already using them
Talent marketers, recruitment marketers and sourcers, who support recruiters by developing landing pages and email campaigns to attract and engage candidates.
To collect candidate information through lead-capture methods and convert that into prospective customers.
Inside SFX, under Libraries.
As the sole designer, I led the design for Form Builder, collaborating with a fellow designer, a user researcher, the product owner and the front-end dev team.
8 weeks.
No time in scope for external user research beyond the survey, and technical limitations from being built on an older framework.
With a tight timeline and an older, more technically constrained platform to design within, I structured the work around five familiar stages - discovery, define, ideate, prototype and test - so the team always knew what question we were answering and what "done" looked like for that stage.
Stakeholder (Product Owner) interviews were conducted to gain insight into the feature, its associated needs, and how it aligned with business goals.
By primarily asking open-ended questions, the survey let us understand different users' needs in their own words. It went out to 30 relevant users, using Google Forms for data collection, and came back with an 80% response rate.
Questions asked:
What is your role / title?
What are some of your daily tasks?
What hardware are you currently on?
How many of those tasks are completed using SFX or a similar application?
Are you familiar with what a Form Builder references?
How often do / would you engage with a feature like this?
What are your typical goals and objectives?
What are the pain points or frustrations when using this feature?
What new options or features would you like to see in the new version of Form Builder?
If you could implement one feature right away, what would it be?
Selected responses:
"I am a Talent Marketing Strategist and I assist recruiters with marketing efforts on a regular basis. My daily task includes building email templates and engaging with existing landing pages."
- A custom field option when one isn't already in the field library
- A real-time preview while building a form
- A "Create New Folder" option mid-build
- A preview option from the listing page
- Ability to change input type - text to checkbox / radio, etc.
- Ability to change form status (Enable, Disable, Schedule)
- Excessive scrolling and a general lack of user-friendliness
- Difficulty locating fields within lengthy lists
Field / form styling - named as the one feature users would implement right away.
Based on interviews with clients and stakeholders, plus analysis of support tickets, the Product Manager built the project roadmap. From there I researched direct competitors and popular form builders, with an eye toward ease of use, standard elements, error handling, response collection and advanced settings.
Analysing the top form-building tools in the industry showed me what other platforms offered and what would or wouldn't work for our purposes - including a direct analysis of competitors' own form builders, for benchmarking.
The research included studying Google Forms and other popular builders to understand which UI patterns our clients might already be familiar with, and how those patterns could be improved. I found particular inspiration in Jotform's dynamic sidebar, and used a similar approach to keep the field bank/library and the form builder in view at the same time.
Tasks were prioritised based on the feedback received, and segmented into seven phases including the MVP, which focused solely on essential features. At minimum, people creating forms needed: a place to build a form, a place to see all their forms, and a way to access each form's responses. Mapping the possible user flows helped narrow down which interfaces the MVP would actually need.
Informed by the interviews and survey, the primary persona represented the expert user with insider knowledge of the application's processes. The secondary persona was the new user or trainee, who'd need to pick up the process and get work done without that same insider knowledge.
While the product let clients collect form responses, the forms themselves were hand-coded by tech support - a significant time and personnel cost. Clients were frustrated at not being able to create or edit forms themselves, and felt stuck behind longer ticket response times. Meanwhile, some competitors already offered form-building tools of their own, putting us at a competitive disadvantage.
From the research, we compiled a set of problem statements:
Users found it difficult to create or edit forms using the in-built feature.
Pages were very long, with far too much scrolling.
Some of the available options went largely unused.
The feature lacked intuitiveness and wasn't user-friendly.
Creating a form was a very long process.
Competitors had a genuinely strong form builder of their own.
Support involvement needed to be reduced.
We ran numerous brainstorming sessions with the full team to finalise the user flow and information architecture. The decision that shaped everything downstream was organising the experience into three main sections - Form Details, Build Form and Settings - with tabbed navigation between them, saving space and simplifying navigation for users.
The process flow maps out every action a user can perform while working with a form - each step in the graphic represents one such action, covering everything added while building a form.
Alongside the process flow, I mapped the user flow for working with a form, and used both to determine the information architecture — narrowing down exactly which interfaces the MVP would need.
Before investing time and resources into pixel-perfect design, I brainstormed wireframes for the basic structure and flow. A few hand-drawn sketches turned out to be invaluable in sparking new ideas and concepts throughout the process - a fast, low-cost way to convey initial thoughts and visions.
Four screens carried the structure from sketch into a working low-fidelity set, giving the team something concrete to react to before visual design began.
A Form Pool, splitting forms into Drafts, Active and Inactive
Form preview directly from the listing page
Fields with specific icons, for a clearer experience at a glance
Drag-and-drop functionality
A built-in style editor with live preview
With the feature already through multiple design iterations and a full set of build sprints, this round of testing focused on optimisations for greater visibility of the form-building features and a speedier, more efficient overall experience - testing three concepts with 5–7 end-users, primarily client-side talent marketers and sourcers, for empirical feedback. No earlier formal testing had been performed; the initial concept had only been vetted internally prior to build.
During and prior to testing, we also gathered anecdotal feedback from internal stakeholders across the product and client-enablement teams. This represented the second iteration of the page's design, and the first time any real users were seeing it - both useful for validating findings ahead of launch.
Whether each concept's layout, structure, hierarchy and use of colour or iconography increased speed and confidence in completing a form-building task.
Which interaction model aided task completion with a shallow learning curve, and whether enough information was visible at all times to build and modify each section of the form.
1:1 sessions were run online over Zoom, recorded and transcribed, each lasting one hour. Links to two separate prototypes were shared in the Zoom chat at the start of each session, to capture immediate reactions to each layout. Participants opened the links on their own machines, shared their screen, performed the tasks, and gave permission for the session to be recorded.
Clients and internal teams embraced the new tool. Clients appreciated being able to create and manage their own forms without technical support; the technical team shifted its focus and time to other issues; and the sales team began presenting Form Builder as a well-constructed, sellable product add-on.
Post-release, we analysed user behaviour and feature-usage data using Pendo, ran multi-choice polls with analytics through the same tool to extract further insight from user comments, and established an in-app Resource Center as an ongoing channel for user feedback.
Conditional / rule-based integration
Inline editing capability
A new set of templates
A Field Group feature
A template library with 100+ forms
Accessibility tags on forms
Customisable location for field descriptions
Customisable field descriptions on a form
Field / form styling
HTML file uploading capability
And continuing to monitor user feedback and usage data to identify areas for further improvement and innovation.
Cookie Consent Management
Making privacy choices clearer and more transparent, across a family of enterprise products.
