Every element on your web pages should “earn its keep.”
No dead weight. Nothing added just to placate a director or even an entire division.
To give you ideas for which elements can be most effective on your webpages, read on for examples from a SaaS, manufacturer, and photo site.
This article was originally published in the MarketingSherpa email newsletter.
When I was starting out in my career as a copywriter, I didn’t get the choicest assignments. For example, small space ads in newspapers and magazines.
It seemed like the smaller the ad was, the more the company wanted to shoehorn into it. I’m guessing it was one of the few chances people at these companies with small marketing budgets had to get their piece out into the world. I learned the meaning of “stuffing ten pounds of [excrement] into a five-pound bag.”
However, at least those ads had a limit. And a natural reason to push back. After all, the media buy only allowed for a fixed amount of space in the newspaper or magazine.
Webpages, however, are limitless. Everyone in the organization can try to get their piece on there.
Beware of “design by committee,” Flint McGlaughlin, CEO, MarketingSherpa and MECLABS Institute warns in this quick video:
So what should you have on your webpage? To give you ideas for your website, here are five webpage elements that helped improve results.
“It seems that marketers frequently underestimate the importance of meta descriptions,” said Leszek Dudkiewicz, Head of Marketing, Photo AiD.
Originally, meta descriptions for the passport photo maker’s website contained just a short paragraph of text from a webpage.
The team decided to write unique copy and include a CTA (call-to-action) for each page snippet to increase clickthrough from a search engine results page.
“As much as writing a snippet can seem like writing a paid ad, actually, it is...a free ad. This solution allows you to take advantage of text that is already displayed in search engines,” Dudkiewicz said.
Creative Sample #1: Meta description snippets for app maker’s website
Snippet #1: Take a photo with your mobile phone, upload it and after a few seconds, you will receive a professional photo for your passport, ID card or visa.
Snippet #2: Are you considering applying for U.S. citizenship? Use the PhotoAiD tool and take the right USCIS photo!
Snippet #3: Take a professional photograph with white background, cropped to the right size! Perfect for your CV or Linkedin profile!
Snippet #4: Baby passport photo in 3 seconds!? Just take a picture with your phone, upload it here and get a professional infant photo for US passport!
Snippet #5: Take a picture with your phone, upload it here and get a professional photo for your US Visa in 3 seconds!
“We compared the CTR (clickthrough rate) before and after the change based on data from Google Search Console. CTR results can also be affected by changes in a URL’s (Uniform Resource Locator, the address of a web page) position. So this method was applied only to URLs whose search engine positions remained the same. By using Google Data Studio, we visualized our results,” Dudkiewicz said.
The team averaged a two percent increase in clickthrough, with the top-performing snippet generating a six percent increase. They made these changes in January and February of 2021. "However, because of Google, we continue to test it today. Google sees a meta description only as a hint, so it does not always precisely display what we wrote," he said.
“In the search engine, your website is only one of many. The CTA sends a powerful message to your reader: you want to visit us!” he advised.
“One of the most impactful changes we made was initiating hierarchy-based breadcrumbs on our site,” said Sruthi Krishna, Senior Website Development Manager, Custom Neon.
Hierarchy-based breadcrumbs provide a simple, user-friendly way to navigate a website and allow users to retrace their steps when browsing extensive product listings. The use of breadcrumbs enables visitors to have one-click access to higher-level pages on the site and avoid the forward and back buttons, reducing bounce rates.
“From an SEO perspective, breadcrumbs assist Google in deciphering webpage context and classifying them better, which is another contributing factor for higher-ranking in SERPs (search engine results pages),” Krishna said.
By giving explicit direction, the team was trying to entice new visitors to explore the manufacturer’s website deeper, discovering new pages and functionalities, while also allowing them to easily backtrack a few levels if they do not find what they are looking for.
Creative Sample #2: Breadcrumbs on webpage of a global manufacturer and retailer of customer-designed LED neon lights and signs
Prior to the breadcrumbs, having to use the back button to return to the home page resulted in many site users leaving. The team was able to track the navigation of site visitors, and through the use of breadcrumbs could see more traffic visiting subcategories and navigating the different product pages.
Since implementing these relatively simple changes, time spent on the site has increased by 40%. By making it easy to transition through different product areas, clickthrough to CTA pages has increased 39%.
“We have made several changes to our site within the last 12 months – the use of multimedia and increasing load speeds [for example], but the biggest change was the ease of navigation,” Krishna said. “Whilst all the changes certainly contributed to the site success over the last 12 months, we identified that the use of breadcrumbs significantly reduced bounce rates. We initiated the use of breadcrumbs before the modifications to decrease load times and noticed a marked improvement.”
The team at Omnisend has run dozens of website experiments to find what works best for its target audience.
“Nowadays, anyone researching a SaaS (software-as-a-service) subscription business model as a potential solution for their business wants to understand product features and functionality as soon as possible. What do they see first when visiting a website? Most times it’s the homepage hero image,” said Paulius Zajanckauskas, CRO Specialist, Omnisend.
“In a matter of seconds, your image can make the visitor decide your product or service is worth exploring or turn them off and move them to a competitor,” he said.
The homepage’s first hero image featured a picture of someone in the target audience persona – a man smiling at the viewer.
Creative Sample #3: Hero image (before) on SaaS homepage
The team decided to swap out this visual and replace it with an image that gives a glimpse into the product’s core functionality and main value.
Creative Sample #4: Hero image on SaaS homepage (after)
The result of this experiment was a 12% improvement in free trial signups.
“Information categories that overlap is one of the most pervasive problems in web design. A product can have the best features on the market, but if it’s not categorized and named properly, it can be easily misunderstood or missed by the website visitor,” Zajanckauskas said.
The team used a tree-testing method combined with web behavior analysis to develop a newly structured web menu that increased the number of users visiting at least four pages – aka engagement – by 10%.
Creative Sample #5: Top menu on SaaS website (before)
Creative Sample #6: Top menu on SaaS website (after)
The team felt that the new menu better matched the visitor intent of discovering product features when searching for the new tool. Web visitors were more likely to visit different feature pages and decide if the product is a good fit for them. This higher engagement resulted in better quality registrations. The number of users who activated the product inside the product after the free trial has increased by four percent.
The team’s research helped them discover how visitors navigate different web pages as well. Visitors on specific key pages – further down in the web funnel – are more likely to engage with the internal navigation menu (see Creative Sample #5) than with the top menu.
Creative Sample #7: Internal navigation menu on SaaS website
The team used an internal navigation menu on key pages of the customer journey. The categories may repeat some of the top menu items, but only those that help the visitor stay focused on the content they intended to read. For example, if a visitor is reading about product features, the internal navigation bar helped them discover other product features, not direct them to other pages focused on broad awareness or reports.
Mobile-based visitors, in particular, engage less with Omnisend’s website and are not likely to become paying customers.
So the team tried a call-to-action (CTA) strategy specifically for those using a mobile device. The CTA encourages the visitor to explore different features, through deeper pages, to understand the product better. For example, they changed a “Request Demo” CTA that included a form field asking for a business email address to just a “Learn More” CTA with no request for email address.
Creative Sample #8: Call-to-action on SaaS website (before)
Creative Sample #9: Call-to-action on SaaS website (after)
The result has been an increase in engagement (page views) by 30%. As part of this test, the team defined a web funnel to gently pull visitors through with softer CTAs to encourage visits to relevant content.
“If there’s one word of advice we have for marketers, it’s to constantly conduct A/B testing on your website of different page elements. Experimentation is the best way to identify what works best for you and which tactics lead to greater conversion. And if you really embrace it, you can reveal places to improve that you thought were already optimized,” Zajanckauskas advised.
Get Better Business Results With a Skillfully Applied Customer-first Marketing Strategy
The customer-first approach of MarketingSherpa’s agency services can help you build the most effective strategy to serve customers and improve results, and then implement it across every customer touchpoint.Get More Info >
Project and Ideas Pitch Template
A free template to help you win approval for your proposed projects and campaignsGet the Template >
Six Quick CTA checklists
These CTA checklists are specifically designed for your team — something practical to hold up against your CTAs to help the time-pressed marketer quickly consider the customer psychology of your “asks” and how you can improve them.Get the Checklists >
Infographic: How to Create a Model of Your Customer’s Mind
You need a repeatable methodology focused on building your organization’s customer wisdom throughout your campaigns and websites. This infographic can get you started.Get the Infographic >
Infographic: 21 Psychological Elements that Power Effective Web Design
To build an effective page from scratch, you need to begin with the psychology of your customer. This infographic can get you started.Get the Infographic >
7 Steps to Discovering Your Essential Value Proposition with Simple A/B Tests
Drive better results when you discover what it is about your business that customers love.Get the Guide >
Receive the latest case studies and data on email, lead gen, and social media along with MarketingSherpa updates and promotions.