Demo Request Form Redesign

UX/UI, UX research


For WireWheel, a data privacy management SaaS company, the demo request landing page is where bottom-of-the-funnel (BOFU) and sales qualified leads (SQLs) can covert by capturing the information of the visitors and qualified leads.

In order to capture valuable information, the usability of the form is essential. After the recent rebranding effort, the demo request form also needed a design update.

Overview


The Challenges

The usability of the demo request form needed to be improved to avoid any possible confusions or blocker for the user to fill it out.

The Goal

Improve the usability of the demo request form by redesigning it to make it more enticing and easy to find the necessary information.

Responsibilities

UX research, wireframes, visual design, web development


Process



1. Research


First, I reviewed and analyzed the recordings of the users interacting with the form to get insight into what the end-users were experiencing during the form fill on both desktop and mobile.

Key Findings

  • Users were not filling all of the required form fields before clicking the submit button.
  • On the mobile, the users seemed to be confused why nothing was happening even after the submit button was clicked. This was because of the unfilled required fields and the error notifications were not visible for the users with the smaller mobile devices without scrolling up.
  • Some users accidentally clicked away from the page and found out that the information they input was lost.

Also examining and evaluating the UI of the original form helped me to come up with the hypothesis and ideas for redesigning the form and the page layout.

Hypothesis

The users were not aware of which form fields are required to fill out since there was no indication.

Because of the lack of signifiers, the users filled out the information of their choice. However, when the users tried to submit the form, they got error messages, in some situations, they were not noticeable for the users who were using smaller mobile devices.


2. Ideate


Potential Solutions

  • Add the asterisks to indicate that the form fill is required
  • Add the text, Required, within the form field
  • For the mobile users who forgot to fill out the required fields, the error messages are somehow easy to see without scrolling up
  • Have a pop-up message to notify the users that all input data will be deleted when they navigate away from the page or store the input data temporary to avoid accidental decision

Wireframes

Based on the potential solutions, the wireframe was developed to think through the layout design with the team.


3. Design


After the discussion with the marketing team about the business priorities as well as the web developers regarding the implementations and MVP, the following solutions were incorporated into the new design.

  • The form was placed above the fold for the desktop users for better visibility.
  • Asterisks added to indicate the required form field.
  • The placeholder text “Required” is added.
  • The CTA button was added above the fold for the mobile to let users jump to the form without scrolling down.
  • The CTA button for the mobile was made to be full-width to make it easier to click.

Next Steps


Conducting the usability test will help to determine any areas to improve the user experience of the form and the demo page.