Demo Request Page & Form Redesign

UX/UI, UX research

Overview


As a part of redesign WireWheel’s website, the marketing team requested to update and redesign the contents of the product demo request page, aiming to improve the conversion rate.

To improve the conversion rate, I took initiative to improve the usability of the form itself as a part of the redesign process.


The Challenges

The conversion rate for the product demo request was low and the visual design of the page wasn’t on-brand and polished.

The Goal

To redesign and update the page layout to make it more enticing and easy to find the necessary information, and improve the useability of the form.

Responsibilities

UX research, wireframes, visual design, web development


Process



1.Research


Before I started work on the redesign, I reviewed the recordings of the users interacting with the page to get insight into what the end-users were experiencing while interacting with the page and the form.

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.