Landing Page Optimization – Review
Table of Contents
Intro
In this article about Landing Page Optimization I will give you an overview/insight about the concept how to structure a landingpage. This article follows a holistic approach and brings together topics from psychological, technical, scientific and visual design Feel free to comment or ask any question. Happy to help where I can.
benefits of an landingpage:
- Shortens journey from click to conversion
- Follows up on “promises” made in ad source
- Speaks to user motivation & adresses barriers
- Answers important questions & creates clarity
- Creates a clear path to the conversion goal
Neuroscience
- Dopamine (reward stimulus)
- Cortisol (stress hormone)
Cortisol triggers to watch out for:
- Violating expectations (perceived bait and switch)
- Ambiguity (lack of clarity)
- Disempowerment (I’m not in control)
- Multi-tasking (trying to solve several tasks at once)
- Too much pressure (forced to make a decision)
- Stop words (e.g. SPAM)
o Don’t disappoint your users by failing to deliver on a promised reward (negative prediction errors).
o Avoid triggering cortisol. Be aware of backfires.
o Be clear, transparent and honest
Wireframes
You use wrieframe templates for a general concept to mock up the structure of the landing page. This could be a lead generation site or a click through landingpage. Doesnt matter which concept, important is how to lead a proposal from the entry point to an successful lead conversion aka customer at the end of the day.
✓Helps me visualize the landing page early on
✓ Helps prioritize content and build structure
✓ Makes it easier to align copy and design
Having a lot of information on
your landing page is fine –
As long as it is relevant and served
in a logical and concise way.
- Target audience: who are you communicating with?
- Goal: What do you want them to do?
- Source: Where is the traffic coming from?
| Problem aware | Aware they have a problem but don’t know that there is a solution |
| Solution aware | Aware that there is a solution, but they aren’t familiar with yours |
| Product aware | Aware of your product/offer, but don’t know if it is right for them |
| Most aware | Aware of your product/offer/brand and they know they want it |
Quantitative vs. Qualitative research
| Quantitive Research |
| “What?” and “where?” |
| Users are leaving the LP without filling out the form |
VS.
| Qualitative Research |
| “Why?” |
| Users distrust your landing page because it doesn’t look legit |
LPO Report:
Time spend = 10 minutes to 1 hour
Insight gained:
✓ Overall landing page performance
✓ Overall device performance
✓ Overall browser performance
✓ Traffic, conversion rate, transactions, bounce rate
✓ Source, second page, exit page, gender, age
✓ Potential bugs
Secondary dimensions for Landing Pages Report:
‣ Device category
‣ User type
‣ Source / medium
‣ Browser
‣ Operating system
‣ Age / gender
Qualitative LPO research
o Heuristic walkthrough sheet (5second test…)
o Customer reviews
o Session recording
o Feedback polls
o Heat maps/ scroll maps
o A/B testing with „unbounce“
o Preference test for testing fb-ads fit best to LP
Copywriting for LPs
o Design and copy should go hand in hand
The 5 most important copy elements:
| Headline | Message match. Capture attention. Trigger dopamine. |
| Benefits/Features | Present important information. Emphasize the value of your offer. Trigger dopamine. |
| Credibility | Make the content trustworthy. Answer questions. Mitigate cortisol. |
| Expectationmanager | Ensure users know what to expect. Mitigate ambiguity. Avoid disappointment / negative reward prediction errors. |
| Call-to-action | Make users click. |
Headline formula 1:
( Do something difficult) in ( short amount of time ) without ( problem )
Example 1:
(Build a landing page) in (in less than an hour) without (help from your developer)
Headline formula 2:
( Do something difficult ) in ( a short amount of time ) and get ( something valuable )
Example 2:
(Build a landing page) in (less than an hour) and get (more sales and leads)
Headline formula 3:
Avoid ( something frustrating ) by ( doing something difficult ) in ( a short amount of time ) with ( product x)
Example 3:
Avoid (wasting time on development and design) – (build effective landing pages) in (less than an hour) with (Unbounce)
Credibility
Relevant facts and figures: quick fact
Expectation Managers
Make sure users know what to expect:
o Who, what, where, when, how much?
Examples of unanswered questions:
o When will you contact me?
o How will you contact me?
o Who will contact me?
o What is the price?
o Will I get spammed?
o How much is shipping?
Call-to-action-formula:
When I click the button, I’d like to:( insert phrase )
Landingpage Design
Visual Hierachy
- Size
- Primary headline: 32-40px
- Section header: 20-24px
- Body copy: 16px
- Bullet points: 16-18px
- Space
- the texts and designs are not too close together
- Font
- Use simple fonts without “feet”(san sarif)
- Color and contrast
- Primary colours
- Secondary Colours
- Complimentary colours
- Accent colours
- Font colours
- Direction
- Eye Contact from people in the Hero section should look to CTA Button / target point
Full LPO process
1. Research
| Hotjar implemented on page | Get Hotjar or similar tool implemented. Start running heat maps & recordings |
| Heuristic walkthrough | Conduct heuristic walkthrough. Write down URLs. Fill out walkthrough sheet. |
| Custom report | Go through all tabs in report. Establish baseline. Step-drop analysis. A/B Test capacity calculations. |
| 5 second test of original | Do a 5-second test either via usabilityhub.com or DIY. |
| Interviews w/ sales and CS | Get a deeper understanding of questions, motivations and barriers. And how to answer and address these. |
| Read reviews | Go through customer reviews and get deeper understand of the positive/negative aspects. Also notice language. |
| Interview with audience | Get a deeper understanding of decision-making process and customer/user experience. Emotional reactions. |
| Implement feedback polls | The information from interviews will spark new questions. Set up feedback polls to get answers. |
| Do the who, what, where exercise | Establish “baseline” for the what information you need to include and how much you need. |
2. Audit
| Funnel and lp experience | Go through your notes and research and put together list of changes/tweaks. |
| Information hierarchy | Go through the exercises and build an improved IH for both desktop and mobile. Find out what info is missing and what should be removed. Questions, barriers and motivation.´ |
| Visual hierarchy | Use the VH principles to critique current design. Is the eye-path logical? Is it easy to scan? First screenful? Do the right elements stand out? Put together recommendations for new VH. |
| Copy | Is there message match between source and headline? Does the copy answer questions, address barriers and reinforce motivation? Does it make sense? What should be added, removed or tweaked? |
| Design | Is there visual match between source/campaign material and the LP? Relevant product image or video? Does the design get the message across – does it make sense without copy? Emphasis on the right elements? |
3. Wireframe
| Start building your new LP wireframe | Take everything you’ve learned from research and audits and put it all together in a wireframe. This is the first version of your LP showing your new information hierarchy and “flow”. |
| Write rough copy outline | Start writing copy (you can do this directly in the wireframe) – message match and addressing questions, barriers and motivation. How are you framing the offer? How are you priming users for next step? Remember dopamine and cortisol. |
| Start building visual hierarchy | Based on your audit, start fleshing out your wireframe with visual hierarchy. eye-path, structure order in which you see sections, considerations around choice of images or videos. |
| Work on rough design elements | Which design elements support the “experience” and facilitate a good flow on the page? Visual match, directional cues, colours, buttons, forms, etc |
4.Copy and Design
| Creative brief | Basically all the background information stakeholders like copywriters or designers need. |
| Go deeper into the copy | In most cases you’ll be working with a copywriter. get them involved and give them a stake in the project. A feeling that they are more than a “keyboard monkey”. Ultimately, you’re in charge though! |
| Go deeper into the design | In most cases you’ll be working with a designer. get them involved and give them a stake in the project. A feeling that they are more than a “photoshop monkey”. Ultimately, you’re in charge though! |
| Put it all together | Put everything together in photoshop (or preferred tool e.g. Unbounce). |
| Show it to customer success | Get it in front of the frontline people who have a good gauge for the target audience. |
| Get approval from stakeholders | Get sign-off from stakeholders: marketing team, paid search, head of sales = all the relevant people. |
5. Implement
| Test on various devices | Make sure to test your LP on different devices so you know it works and there are no bugs. Get the insight from custom GA report. |
| Test in various browsers | Make sure to test your LP in different browsers so you know it works and there are no bugs. Get the insight from custom GA report and use and use browserstack.com |
| Test page speed | Use google pagespeed insights to check: developers.google.com/speed/pagespeed/insights/ |
6. Test & Optimize
| A/B Test or compare periods | Testing isn’t synonymous with A/B Testing! Your sample size calculations will guide you. Comparing periods is not as accurate but it beats working with small sample sizes. |
| Keep analyzing & reviewing your LP | Use custom GA report to get new insights on performance. Get new insight from heatmaps, recordings and feedback polls. |
| Answer new questions that occur | New questions will always occur, use research methods outlined to get answers to these and use them to drive new ideas. |
| Come up with new ideas | Challenge your assumptions and always be actively looking for new ideas for how to optimize your landing page. |
Creative Brief
| Goal of the page | What is the main conversion goal? Are there secondary goals? |
| Target Audience | Summary of findings based on quant and qual research. |
| Wireframe | Hand over your wireframe and walk through it with copywriter and designer. Get their feedback and input, make them feel like they are part of the process. |
| Copy input | Summary of questions, barriers and motivation. Framing and priming. Dopamine and cortisol. Message match. Amount of copy. What to address based on awareness level. |
| Design input | Summary of visual hierarchy and design elements. Eye-path. Which elements are most important. Visual match. Form. CTA. Colours, etc. |
Personal feedback about the Google Analytics course:
Michael Aagaard did a really good job in my opinion and explained all the necessary topics about landing page optimization very well. It was easy to follow his thoughts and the sound settings was also good.
1
