The Challenge
The business team has found that not many people have filled out this lead form. The product owner also finds it hard to fill out the current lead form, especially now that Thailand's Personal Data Protection Act (PDPA) is in effect. It is also important to ask users if they agree to the terms of marketing. And the business team needs more information about users to add to the data inventory.
Role
UX/UI designer and UX Writer
Objective
To make the lead form easy to fill out and create the concise copy for asking for the user's consent.
UX Audit
From the original lead form, I found 3 main problems:
The headline and subhead don't say what they mean. The title just says "If in doubt, ..." and the message that says "Contact us if you want to ask more questions" doesn't help the user in any way. Because, in fact, this form is made so that the user can fill in the information needed to contact. And we still haven't told the user what we're going to do with this information.
Bad input fields There is no label to show what information goes in each field. Even though they showed as a placeholder, it could be better because it takes a lot of memory to remember each field. The placeholder will go away when users click the input field (Cognitive load). Some information is needed from this original lead form (Name & Email). But the input field did not appear in a clear way. The color of the placeholders is too light, which makes them hard to read (Accessibility).
Bad text on button The button said "Contact us," but I think I can make a new microcopy that is more clear about what the button does.
Ideate and solution
The product owner asked me to redesign based on the business requirement which I need to create more input fields for these information:
Name (Required)
Last name (Required)
Company name (Required)
Job position (Optional)
Email (Required)
Telephone number (Optional)
Message (Optional)
And the user's consent for the privacy policy and marketing consent.
From their requirement, I decided to 4 things:
1. Rewrite and redesign with typo hierarchy
I made it more concise for this section by name this section as "Contact us" which use for the heading. From "Contact us if you want to ask more questions", I rewrote it to "If you are interested in the product or have any queries, please fill in this form. We will respond within 24 hours." The new copy told users what this form is for, how our team works, and how long they have to wait. I designed the section with more dynamic on headline and subheading by making the headline more bigger and using it as the name of the section.
2. Named the label for input fields
To reduced user's cognitive load, I decided to redesign the input fields by put the label above the field. Even if the user clicks to fill in the information, the names of the input fields will show them what information is needed.
3. Add the required fill symbol and inline error message
I added the "required" symbol to let users know what information they have to fill in. And if the user clicks the button to submit but forgets to fill out some required fields, the input field will show the inline error. So the user doesn't have to look for it.
4. Add the checkboxes to ask for consent from the user.
Since the Personal Data Protection Act (PDPA) of Thailand went into effect. If we want to use their personal information for anything other than the terms and conditions and the privacy policy, we need to get consent from our users. Due to the requirement, I have to make a copy to ask their permission. I wrote my copy by telling people why we will use their information and that they can change withdraw their consent at any time.
My copy is "I would like to receive offers, promotions, and news from [Product name] and other services related to product. (You can unsubscribe this at anytime)"
5. Change the button text
The original text of the button is "Contact us", which I've already used for the name of the section. I wanted to tell users what this button does, so I changed the text on the button to "Submit". The rest of the information is in the subheading.
Final Design
Compare with the original
