7 Best Examples of UX Innovation on Inbound Marketing Websites

Jonathan Stanis
Posted by Jonathan Stanis on November 6, 2015
Graphic of all-in-one desktop computer with various website UX elements surrounding it including sliders, forms, and a search field.

With changes in technology, like the rise of smartphones and the dominance of apps, people's web browsing habits are changing. Individuals are more comfortable with long, scrolling pages and touch interfaces, so more traditional sites are no longer ideal for presenting your content. Elements such as shorter pages with a lot of text and links hinder your visitors' ability to find what they need.

If it's been a while since your last website redesign your site is not going to be as effective as it could be for delivering content to your visitors. A new site with modern elements will make sure you are getting the right content to the right people, making them more likely to convert.

This will lead to getting your marketing and sales departments the right kinds of leads.

Following are seven examples of websites that are taking it to the next level with innovative inbound-based designs, along with ways you can incorporate those same elements into your own site's next update.

1. Impact Branding & Design’s Resources Page

Impact Branding and Design resources page with a blue background, text, and a type and topic filter. The text says The Learning Center "IMPACT shares their expertise with marketers and business owners through world-class educational resources." - Patrick Shea, Channel Marketing Manager at HubSpot

As ;companies generate large amounts of content it becomes more difficult to present that content in a ;discoverable way.

Impact, another inbound marketing agency, currently has 55 different resources. To help their visitors find the right content, they've created filters.

Using these filters you can see just their different content types. You can also sort by the topic most relevant to your current needs such as social media or strategy.

Takeaways

When considering the design of your website think about how many resources you have. Remember that your resources should be a growing section as you develop new content. When planning those resources determine if each piece will fit under one broader category or if it will apply to many.

2. Weidert Group's Whole Brain Marketing Blog

One of your main resources on an inbound website is your blog. Here at Weidert Group we publish blog articles daily, and since we've been blogging for years we have our fair share of posts. To help visitors find the most relevant information we have taken the time to create subject filters in the main navigation of our blog. These use the topic tag to let you find the best inbound marketing ;articles. Also, because each blog post contains a CTA linked to a resource, it also functions as a means to find the relevant resources we have created.

Takeaway

Make sure you are tagging all ;your blog topics with the relevant subjects they address now. ;Even if you only have a few posts at the moment, your blog is going to grow. ;This will give you the ability to sort them in the future.

3. Spinal Cord's Mega Menu

spinalcord.com homepage with mega menu open

SpinalCord.com is a site dedicated to spinal cord and back injuries. It provides resources to those affected in the form of survivor stories, financial services, and legal advice.

It's a new site, but they are already thinking forward. ;They've used a mega menu to make their variety of ;resources discoverable.

A mega menu is a large drop down that covers a large part of the page when active. Using this menu, Spinalcord.com is able to show the different types of resources they offer without jumping ;to another page. This helps visitors move quickly between their site as well as show them all that they have to offer at a quick glance.

Takeaway

Think about ways to make your site faster and easier to navigate. This makes it more likely for your users to view more areas of your site they may have not found otherwise. Instead of making your visitors dig through several layers, make your content more discoverable by bringing your offerings to the top levels, which will lead to better conversion rates.

4. YOH's Expanding Resource CTAs

Yoh's case stuides page with different types of case studies. One labeld MSP & VMS Solutions is open. The text below reads healing healthcare: managing it healthcare company's workforce ills with a read more CTA.

YOH is a staffing company located in the United Kingdom.

Like SpinalCord.com, YOH also uses a mega menu to help visitors ;find their way around the site. Without this visitors might not know that YOH ;also offers human resources and payroll services for contract workers.

The part of YOH's site that is particularly interesting is on the success stories page. On this page you will find client testimonials as well as case studies. When you click on each title, instead of going to an individual page, it expands a section below the title with the company's testimonial, or more information on the case study along with a read more link.

Because these areas are already loaded when you load the whole page they appear instantly, reducing the amount of time a visitor has to wait to view the content.

Takeaway

This is good inbound design because it allows visitors ;to quickly browse the different case studies without having to load another page. Every page load is a bit of friction; reducing the amount of page loads ;makes visitors more likely to explore more areas of your site.

When designing your site try thinking of ways to use ;on ;page elements to reduce the amount of time visitors are waiting for content ;to load.

5. Impact Branding & Design's Interruptive Blog Listings

Impact Branding and Desing's inline CTAs that reads Join the 10,000 marketers growing with our daily insights. Stay up to date and subscribe today. Above is a tweet from Ann Hadely that reads How We Removed Our Blog Sidebar and Increased Conversion Rates http://www.impactbnd.com/blog/how-we-re... via @impactbnd (Always be reinventing!)

The sidebar ads on Google, Facebook, and similar pages have made people blind to those types of content. To ;fight this effect, Impact has gotten rid of their blog's sidebar. Instead, they put links to their tweets, subscribe links, and other calls-to-action in their blog feed.

Having these interruptive elements works because ;visitors ;actually notice them, particularly on mobile platforms, as they take up the entire screen as visitors ;scroll past them. Some of the tweets even reference the fact that they removed their blog's sidebar and consequently increased their conversion rates.

Takeaway

When redesigning your blog page don’t just do what everyone else does. By creating a unique layout you force your visitors to actually see your offers, ;instead of just looking for the familiar center column of text we've all become so used to.

6. Bizible's Card Design

Resource cards on a website. Definitive Guide To Pipeline Marketing. State of Pipeline Marketing 2015. AdWords for B2B MarketersBizible is an online software developer that has created a tool to help track what marketing efforts are leading to actual revenue generation.

While their website is mostly ;standard, one part of their design that stands out is their resources page. It uses a card layout to present their offerings. This type of design is useful because it is responsive. When you change the size of the browser window the cards rearrange themselves to fit the space. This is particularly useful when viewing the site on a smartphone or other mobile device. ;The resources become a single list of offerings that is easily navigated.

Takeaway

You need to always consider mobile when you design your site. More than half of internet traffic is now on mobile devices, so having a site that is easy to view and navigate on a small screen is more important than ever.

7. Apex Hoses' Contact Us Hover

Apex Hoses homepage with a hovering contact tab on the right side. Page includes main navigation, sub-navigation, breadcrumb nav, and an h1 that read Helpful Information.

Apex Hoses' website came to my attention when a client of ours used it as an example ;they liked while completing our website ;scoping questionnaire. It just happens to also be one of HubSpot's featured designs. It offers a compelling design with easy to follow navigation, large imagery, mega menus, and responsive design...all the elements we have already talked about.

Another feature that makes it stand out is the contact us module that sits on the page side. Most pages use a ;contact us page link found ;in the upper right corner. Instead, this contact us module hovers to the right on all pages, so it's always visible and easy to find help no matter where a visitor is on their site. At the same time, it stays tucked away on the side, not popping out with a “Helpful” message that covers the content you are trying to read.

Takeaway

You want to always make it easy for your visitors to send you a message. Having a floating contact us module makes it simple.

At the same time, you don’t want to annoy your visitors. Most of them are smart enough to know to click on the contact us button, and will do so if needed without a prompt from the box. It’s like having the staff at a local store ready when you need them with the right information, while also not bothering you every ;time ;you walk by to tell you about their great sale.

Learn from ;these examples on your next website redesign. It will help you make the best choices for your visitors, which is the best choice for your business.

Checklist: how to prepare your website for inbound marketing

Topics: User Experience, Website Design

click here to take the state of industrial sales and marketing survey