Anatomy of a Landing Page (Part 2)
A few days ago, I posted a breakdown of an LP that I had been tasked with redesigning. Today, I’m going to go through the NEW creative design, and touch upon the changes I made compared to the original.
If you haven’t read Part 1 yet, take a minute to check it out and get up to speed as to what I’m trying to illustrate here. Click here to view the full screen shot of the new creative, and I’ve outlined the key changes I made from the original below.
“Challenger” Page Outline:
1. Header
I removed the “distracting” background image and left open white space to give the logo some breathing room.
2. Headline
Created a generic headline (more of a tagline), and incorporated it into the “hero” image.
3. Hero
Downsized the actual product image, but expanded the width to fill the width of the page. Although the product shot is slightly smaller, I think it works better now that it is grounded within the page instead of “floating” there.
4. Offer / 4b. Offer
I enlarged the offer copy, and also brought it up higher on the page. This allowed for placement of an additional offer space. I also added visual cues to the offer that helps drive the user through the page to the form (user action)
5. Premiums
As with the offer, I brought the premiums higher up on the page, and again created visual “arrows” to draw attention and lead the user through the page.
6. Summary
Added spacing (“air”) and broke the copy into smaller paragraphs to improve readability.
7. Value Proposition
As mentioned in Part 1, having the value proposition can be a pro and a con… I opted to be more proactive and make the value proposition always visible, however I bulleted out the benefits of the program, and clearly explain the offer and reassure the user the value of the vine club program.
8. User Action
I slightly changed the layout of the form and added space and aligned elements to make the form more easily scannable and less intimidating to the viewer.
9. Call to Convert or Call to Action (CTA)
Created a larger, brighter and bolder CTA to draw the users attention, also changing the color from red (“stop”) to green (“go”).
10. Footer
Left the footer as is.
As in Part 1, this is just a dissection of this particular LP. Per manager direction, all the elements from the original were required for the new design. What I hope to have achieved was to rearrange the elements not only for a more colorful, eye-pleasing design, but also to improve legibility and usability.
Only testing will prove (or disprove) whether these changes were a step in the right direction, and I’m happy to say that testing is under way. Once enough data is collected, I hope to share some of the results here and let readers know if the redesign was a success or not.
In the meantime, I hope this encourages others to look at their own LPs and try to come up with different ways to layout the content.
