Clayton Mobile Landing Page

Generating more leads with a simple, stress free form fill experience.

My Role

A fellow coworker and I worked initiated the idea for a new mobile form fill experience. We worked as a team to research best practices for mobile from fills and designed mocks for a proposal aimed at increasing form fill leads.

Date

2015

Tools

pencil icon.png
sketch_logo_frame.svg.png
 
 
 
Clayton Mobile Block.png

Identifying Problems and Goals

As a part of the Search team's efforts to increase lead numbers generated through mobile form fills from paid search ads, we decided to redesign the mobile landing page format. 

The mobile landing page was not built with a responsive design and had a similar format to the desktop landing page. Half the long form was below the fold.

Design Process

I began by researching best practices for mobile form fill landing pages and discussing my findings with the Search team. We discussed shortening the form, ensuring the full form was above the fold, and selecting high resolution images. With the feedback from the team, I created a few sample wireframes. The wireframes went through multiple rounds of edits while determining our data systems ability to properly read information produced from the shortened forms (i.e. utilizing only a zip code instead of a full street address).

clayton mobile landing page wireframe.png

My original designs included only an updated high resolution image, strong call to action, and form. However, after meeting with the team again, we decided to add more keyword text to enhance the landing page quality score.

To incorporate the additional text and keep everything within view above the fold, I implemented a drop down menu below the form. In order to make room for this we had to further shorten the form with only the name, email, phone, and zip code included. We again had to speak with the tech and sales department, but we concluded that information was sufficient for callers making proper contact.

As a part of the final design I incorporated a scrolling image and CTA instead of a static image, so this page could be used for multiple search ads or promotions if needed. I presented my final wireframe design to the team. After a discussion, we removed arrows from the rotating images to decrease user distractions. We also removed the clickable phone number from the bottom of the page to make more room for the drop down menu and increase the spacing between the form fill boxes.

Next, we worked with the legal department to incorporate a legal advisement that would not disrupt the user experience. We only needed to add one line beneath the drop down content, and the design was approved. I created example mocks, and we presented the design to upper management.

Results

The mobile landing page was approved by upper management, but due to a large number of requests for the tech department, our project was delayed. We were unable to test the performance of our design against the old design.

claytonmobile2.png

If the project had gone through, we would have run an A/B, sending half the traffic to the old landing page and half of the traffic to the new landing page.  After the traffic (impressions or clicks to the page) reached statistical significance, we would have tallied the leads to determine which page produced the most leads.

To further enhance the performance of this page, I would suggest testing different titles, CTAs, background images combinations to find an optimal set for lead production.