August 24, 2021
Case Study

5 simple webpage elements that increased engagement and conversion

SUMMARY:

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.

by Daniel Burstein, Senior Director, Content & Marketing, MarketingSherpa and MECLABS Institute

5 simple webpage elements that increased engagement and conversion

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.

Webpage Element #1: CTAs in web pages’ meta description snippets increase clickthrough 2% for photo site

“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.

Webpage Element #2: Breadcrumbs increase time spent on site 40% for manufacturer

“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

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.”

Webpage Element #3: Hero image focused on product-led growth increases free trial signups 12% for SaaS

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

Creative Sample #2: 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)

Creative Sample #3: Hero image on SaaS homepage (after)

The result of this experiment was a 12% improvement in free trial signups.

Webpage Element #4: Optimizing top menu web navigation and internal navigation through pages increases engagement 10% for SaaS

“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 #4: Top menu on SaaS website (before)

Creative Sample #6: Top menu on SaaS website (after)

Creative Sample #5: 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

Creative Sample #6: 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.

Webpage Element #5: Calls-to-action aligned with the customer journey increased page views 30% for SaaS

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 #7: Call-to-action on SaaS website (before)

Creative Sample #9: Call-to-action on SaaS website (after)

Creative Sample #8: 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.

Related Resources

Marketing Research Chart: Critical website conversion path elements

Landing Page Optimization: 5 factors that lead to (and prevent) conversion

CRO Cheat Sheet: Customer thinking guide for conversion rate optimization


Improve Your Marketing

Join our thousands of weekly case study readers.

Enter your email below to receive MarketingSherpa news, updates, and promotions:

Note: Already a subscriber? Want to add a subscription?
Click Here to Manage Subscriptions