7 Principles of Conversion-Centered Design - Oli Gardner

In this Stukent Expert Session, Oli Gardner, co-founder of Unbounce, discusses the Seven Principles of Conversion Centered Design. He emphasizes the importance of using landing pages in marketing campaigns and introduces his framework for high converting landing pages. The principles include attention, context, clarity, congruence credibility closing and continuance.

The first principle of attention-driven design is to apply focus to your conversion goal. By using this approach, you can effectively direct the user's attention towards achieving the desired outcome. A poorly designed landing page can result in a negative experience and hinder conversions.

The attention ratio is 163:1, which means there are too many distractions on a page. In marketing campaigns, there should only be one goal.

The attention ratio on the website is 86:1, which means there are too many distractions and links that can divert users' attention. This problem even exists on non-homepage pages like emails.

Fixing the Attention Problem The attention ratio of a campaign greatly affects its success. By removing distractions and focusing on a single conversion goal, the chances of achieving that goal increase significantly. A test showed a 31% lift in downloads when distractions were removed from the landing page. Creating a delightful experience means making it obvious to users what they need to do without any choices or confusion.

"The Hobson's Plus One Choice Effect" "The Hobson's Plus One Choice effect" suggests that giving people an option they don't want can make them more likely to choose what they actually want, leading to increased satisfaction with their decision. However, adding an extra link on a landing page resulted in 14% fewer people starting the course as desired.

Visual Hierarchy for Effective Design Visual hierarchy is crucial in design as it visually communicates which elements are more important than others through dominance and prioritization.

Attention Driven Design consists of 23 principles. This chapter focuses on a few key principles: proximity, dominance, consistency, continuation, and direction. Proximity refers to the perception that elements closer together are related. Dominance emphasizes making important elements bigger and more noticeable. Consistency reduces cognitive load by maintaining a consistent design throughout the page. Continuation uses design techniques like lines and arrows to guide users through a story or sequence of information. Direction involves pointing out important elements directly. An example is given where attention-driven design was applied in an A/B test for a donation page with two interaction options: printing off labels or requesting envelopes from the organization.

Principle Number 2 is context. It involves designing a post-click experience that aligns with everything that happened before the click, such as discounts, dates, search queries, or conversations.

The level of context varies depending on the inbound channel used to drive traffic. Different channels, such as PPC ads, display ads, Facebook, email, or co-marketing have different levels of context. For example, emails often have a conversational tone while tweets do not. Success in driving traffic depends on how well you match the pre-click promise with your landing page content. In the case of PPC ads where search intent is important, message match plays a crucial role. If an ad promises next day flower delivery with a 10% discount but the landing page does not mention these details and instead focuses on same-day delivery only, it creates confusion for users who were expecting next day delivery and may lead them to leave without making a purchase. To ensure message match success, you should replicate what was promised in your ad as the headline on your landing page so that visitors know they are in the right place.

"Design match" and "message match" are two crucial elements when it comes to visual components like display ads, banner ads, and Facebook ads. A good example is a Facebook ad for HootSuite featuring a guy with a laptop and the headline 'HootSuite social media management.' However, upon clicking the ad, the landing page does not align with the design or message of the ad. This lack of design match and message match creates confusion for users. On the other hand, Pathful demonstrates perfect design and message matching by maintaining consistent visuals (dominant green color) between their ad copy and landing page.

Email Marketing: Design and Message Match "Design and message match" is crucial in email marketing. When a recipient shows interest in an email, it's important to maintain that interest through the click by delivering what was promised. However, many emails fail to deliver on their promises, leading to a poor user experience.

Conversation Momentum Maintaining conversation momentum is another key aspect of effective email marketing. It involves carrying the tone and style of communication from the initial email into the landing page or website. This helps create a seamless experience for users.

The Importance of Content Match Content match refers to aligning the content promised in an advertisement with what is actually delivered on the landing page or website. Failing to provide relevant content can lead to disappointment and frustration for users.

Clarity in Communicating Your Unique Campaign Proposition "Clarity problem" refers to the issue of instructions not effectively reaching the target audience. To achieve clarity and improve conversion rates, it is crucial to communicate your campaign's value proposition clearly. This means ensuring that visitors can easily understand what your page is about and consistently receive accurate information. People tend to scan pages quickly, focusing on headlines and subheads for relevant details before deciding whether they are interested or not.

Identifying Clarity Issues on Landing Pages To determine if you have a clarity problem on your landing page, you can use usabilityhub.com for testing purposes. One recommended test is the five-second test where participants are asked questions such as "What is this page about?" The answers received from users varied greatly: some mentioned content marketing software while others were unsure or had no clue at all.

Understanding the Problem "What do they actually do?" This question was not immediately answered by the subheads on their website. After some investigation, it became clear that they are a retirement income website. However, there was a lack of clarity in their top headline which caused confusion for visitors."

Identifying Issues with Clarity The Attention Ratio of 1:1 and context were fine, but clarity failed in this campaign. It is important to monitor your experience curve to ensure progress. To fix this issue, conducting usabilityhub exercises can be helpful.

Conducting UsabilityHub Exercises By asking questions like "What do you think this page is about?", "What will happen if people click on the button?", and "Do you think this page looks trustworthy?,

The Clarity Test Worksheet is a useful tool for determining the clarity of your writing. It can be found in the Goodie Pack and allows you to input screenshots and responses from usability tests. You can duplicate the sheet in a spreadsheet format to keep track of your test history.

Importance of Information Hierarchy "Copy informs design, not the other way around." Designing a landing page without written copy leads to a mismatch between content and design. Always write campaign copy first and then design the landing page accordingly.

Examples of Poor Information Hierarchy - Home Depot's newsletter sign-up form is backwards, with the less important information at the top. - HubSpot's product demo lacks clarity in its headline placement. - Uber's hierarchy directs attention away from important elements like signing up to drive.

Fixing Information Hierarchy To improve information hierarchy on a webpage: 1. Use a linear layout for better user experience 2. Ensure clear and logical flow of content 3. Test different designs or layouts to find optimal conversion rates

The Importance of Form Clarity "Sign up for more info!" or "Keep me informed." are common phrases used in forms, but they lack clarity. Visitors need to know what they will be informed about and why it is important. Without clear information, visitors may not feel compelled to provide their details.

Lead Generation through Forms The form on your page is crucial for lead generation. It should convey the purpose of the campaign effectively by providing specific information that entices visitors to sign up. Phrases like "Need more information?" or "I want details!" indicate a strong desire for comprehensive and valuable content.

Congruence: Aligning Every Element on Your Landing Page with Your Campaign Goal "Download" forms should align with the campaign goal and not be representative of something else. Congruence is about aligning every element on your landing page solely with your campaign goal. Design your form as if it's the only thing on your page, focusing on its purpose and what it will do for users.

Form-First Design: Building a Strong Foundation for Lead Generation "Form-first design" involves designing the form as if it's the most important element on the landing page. The six parts of a form include: form headline (what users will get), subhead and bullets (optional but can provide additional information), why section, how section (the form itself), call-to-action, and closer (additional copy to encourage clicking). This approach creates a solid foundation for lead generation campaigns.

Using Balsamiq for Wireframes Balsamiq is an awesome tool for creating wireframes. You can download a wireframe and play with it to see how it looks. It helps in designing structurally good pages.

'Congruence' Scorecard 'Congruence' scorecard involves stripping away the design from your landing page and focusing on the copy. Copy clarity is important, so you list all page elements on one side and fill in their content.

To evaluate the alignment of content with the campaign goal of downloading a white paper, each piece is scored on a scale from zero to two. A score of zero indicates no alignment, while a score of two signifies full alignment. This page received three out of twenty-four points, equivalent to twelve point five percent. The low score highlights the lackluster congruence between the content and campaign goal.

The Congruence Test Worksheet The congruence test worksheet in the Stukent Conversion Goodies section is interactive and helps you determine if your campaign elements are aligned with your goals. By inputting copy and scores, it calculates a percentage at the end. If things are not congruent, you need to delete or rewrite them for better alignment.

Social Proof 'Social proof' refers to testimonials and other forms of evidence that support your claims. While this topic won't be covered in detail here, it's an important aspect of successful campaigns.

Credibility is all about being authentic and having verifiable trust signals. If you don't have testimonials or if it's a new product/service, there are four ways to address this: (1) Be honest about not having testimonials; (2) Offer your product/service for free to influencers in your industry and ask for their feedback;

Supporting the Concept vs. Supporting the Product When promoting a product or service, it is important to have testimonials that support its value. However, if you don't have any testimonials yet, focus on highlighting the bigger picture and why your concept is important. For example, in a landing page conversion course, emphasize the importance of conversion optimization without explicitly praising the course itself. You can also include statements from industry experts to reinforce your message. Another effective strategy is reaching out to bloggers and asking them to write about your offering.

'Delightful Experience' Builds Trust People are more likely to trust businesses that provide a delightful experience and treat them well. When customers feel valued and receive excellent service, they naturally develop trust in those businesses.

"Applying positive click triggers and influencers at the point of conversion next to your call-to-action and removing negative ones to encourage people to click." Proximity is important in this process. Avoid using stop words like 'spam' near your call-to-action, as it can create doubt in users' minds. Examples of effective closers include offering customization options before tweeting, reassuring that website changes won't be made without authorization, providing a recording for those who can't attend a webinar, and emphasizing quick read time for an ebook.

In the Conversion Goodies section, there is a document that provides a list of call to action closers for testing. This document will be continuously updated with more closers based on different use cases. Users can contribute their ideas by commenting in the document.

After a conversion, it is important to continue engaging with the customer. One way to do this is by asking for something else after the initial conversion. For example, instead of just downloading an ebook, offer a free trial of your software as well. When designing landing pages, ensure that there are no distractions and that the information hierarchy aligns with what customers need to feel successful.

Importance of a Dedicated Landing Page Never start a marketing campaign without a dedicated landing page. Best practices are only starting points, so it's important to test the length and clarity of your call-to-action (CTA). Shorter CTAs tend to be clearer, but ultimately it depends on your audience and the contrast with the rest of the page.

"Button Color" Fallacy in Conversion Optimization "Button color" is not as important as contrast when it comes to increasing conversions. The more contrasting your CTA button is compared to the rest of the page, regardless of its color, will make it stand out more effectively. Consider greyscaling your page and evaluating how well your CTA stands out based on contrast.

Where to Learn More about Unbounce To learn more about Unbounce and their offerings: visit unbounce.com for their website; follow them on Twitter @unbounce or reach out directly via email at [email protected]

Recommended Resource: Book - How To Deliver A TED Talk 'How To Deliver A TED Talk' by Jeremy Donovan is highly recommended for public speakers looking for impactful techniques. It analyzes successful TED Talks and provides valuable insights that can change one's approach towards speaking.