Building a site that sells

Published in

Gigareef

9 min readFeb 23, 2018

In 2018, there is so much competition for attention online. You need to do more than just “have” a website. You need to really know what you’re doing online in order to convert customers. You need to be writing convincing copy, follow design trends, structuring the information on your site in a way that is optimized for search engines and know how to run advertisements to best boost sales.

The following is a collection of tips that I have learned while building websites for our clients, custom tailored for what I think would be valuable for you and your teams.

This post is based on a presentation Mike Maffattone of Gigareef gave on February 20, 2018, at Rise NYC, a FinTech coworking space.

Marketing website vs Application

Before we get into the nitty-gritty, let’s clarify the difference between a marketing website and an application with an example.

This is the page we see when we go to coinbase.com. We notice a big, bold headline, “Buy and sell digital currency” with a small paragraph of description copy, and a clear Call to Action (CTA), “Get Started”. We also see a list of press logos and a chat icon at the bottom.

This page is the homepage of Coinbase’s marketing website. It’s public-facing and it is optimized to convert. It communicates to potential customers what Coinbase is and why they should sign up.

This stands in opposition to the Coinbase application which looks like this:

This is what a user sees after they sign up for Coinbase. This screen is optimized for utility and makes it as easy as possible for users to perform key activities on the Coinbase platform, like buying and selling cryptocurrency and managing accounts.

This may seem obvious as it’s being pointed out, but I’ve had a handful of conversations where the separation of a marketing website and an application is not fully understood.

How to build a marketing website

A proper marketing website should be built in a way that allows your sales and marketing teams to update content on the fly. You shouldn’t have to reach out to a developer every time you want to update an image or some copy.

To build a site in this way, you need to have it built on a content management system (CMS).

Ultimately, there are lots of different CMS options out there, but WordPress really dominates with a market share of 76.6%.

Source: Wappalyzer https://www.wappalyzer.com/categories/cms

WordPress is also the preferred CMS of my development team. Our preferred hosting solution for WordPress sites is Pantheon. They offer reliability and speed we need for our clients and they also make the development process much easier. WordPress on Pantheon is how our agency site, Gigareef is built as well.

Marketing website design references

To see how modern marketing websites are structured, let’s take a look at some marketing websites of successful companies.

Below, we have the marketing website homepage of Stripe.

What are we noticing here? Bright colors, big headline, short description text, clear CTA, client logos and minimalistically rendered iPhones and iPads.

Below, you can see the sites for Credit Karma and Robinhood follow some very similar design principles.

Notice how these websites aren’t trying to shove every detail about their company into the hero (top, above-the-fold) area of the website. These headlines are conversational and to the point. Users who are interested will scroll down the page to read more.

Another popular tactic is to include client and press logos on the homepage. We can see this below on the MuleSoft and Bitstamps website.

Showing client and press logos where possible is a great way to establish trust with your website visitors. We are guilty of leveraging the same tactic on the Gigareef website.

Another trend we see is lifestyle imagery within the hero area of the homepage. This can be seen below on the sites for Zenefits and SoFi.

These images depict the types of people who are the users of the company’s services.

Notice we also have a “Log In” link at the top right of almost all of these sites. This is a very important user experience principle. Visitors who are already your customers expect a login button to be at the top right of your site where they can click through right into their account. Not following this can be jarring for customers.

Handling multiple customer groups

A challenge that a lot of companies deal with is figuring out how to communicate to separate customer groups with one single website. This is something that the SoFi website does really well.

If a visitor of the SoFi website scrolls down past the hero area of the homepage, they see the following clickable quadrants.

Here we see “Student Loan Refinancing”, “Personal Loans”, “Mortgage Loans”, and “Wealth Management”. These represent all the different types of customers that SoFi has.

When a user clicks on any of these areas, they are brought to a landing page that is unique to that customer group complete with its own imagery, headline, and copy.

This is a great way to handle various customer groups, by allowing them to self-identify based on their needs and then presenting them with more targeted messaging.

This strategy of “landing page per customer group” serves more than one purpose though.

Let’s say that SoFi wanted to run a Facebook ad targeting 25–35 year-olds who are likely to have student loans, they can have that ad click directly to the student loan landing page instead of sending users to the general homepage, increasing the potential for conversion.

And not only does this strategy work well in coordination with advertisements, but it also aligns with best search engine optimization (SEO) practices.

Take a look at what happens when you Google “sofi”:

All of those landing pages can be surfaced within Google search results so that a potential visitor can click directly into one of the more targeted landing pages.

Summary of strategies

We’ve identified a number of strategies that you can use on your own websites:

Short, to-the-point headlines
Bright colors
Depictions of app in context
Fun illustrations
Client & Press logos
Separate landing pages for different customer groups

Some things that we’re NOT seeing a lot of:

No carousels: This is what we call those image sliders that we used to see very often at the tops of websites. This has recently fallen out of favor because it has been shown that most users do not sit at the top of a webpage waiting for the new imagery and messaging to slide in, they just start scrolling. So, any kind of messaging that you would normally bury on that second or third slide of the carousel, you should just disperse on the page below the hero area so that the user sees it as they scroll.

No huge paragraphs of text: Sometimes it’s necessary to have a larger paragraph of text, especially when what you’re offering is more complicated than what can be simplified in a few words, however, you should always consider how you can word things more concisely and break up ideas with headlines, images, and infographics.

Never more than 2 CTAs: As we’ve seen on all these example sites, there are never more than one or two CTA buttons on screen at once. That’s how you communicate to visitors, “if you are convinced by our offering, this is where you click to take the next steps”.

Useful Tools

Below is a collection of services I use all the time that are very handy to have in your toolkit.

Wappalyzer: this is a Chrome plugin that will show you what your competitors’ site is built on.

Chat: MobileMonkey, Zendesk, Intercom, and Drift dominate in this space. Online chat presents a great opportunity to really reach out to visitors and help convert them into customers. Zendesk Chat has a mobile app that you and your sales team can download on your phones, then when a visitor asks a question on the site, you get a push notification on your phone, like a text message, and you can respond from anywhere at any time. I think the biggest value of online chat comes when a potential customer is considering your product against a competitor’s and your immediate response can answer questions and build the relationship before your competitor does.

Retargeting: Facebook Ads and Google Ad Words are the main providers of retargeted advertisements online. Retargeted ads are the ones that follow you around the internet. Like when you’re looking at a pair of sneakers on Amazon, don’t end up buying them, then later when you’re browsing Wired.com, all of a sudden, you see an ad for those same sneakers. This can be used as a tool to help convert customers on your platform. For example, let’s say that someone visits your site, doesn’t sign up, then goes elsewhere on the internet, you can show them an ad for your company and maybe even display a 15% off promo code to try to sweeten the deal. There’s a lot of creative ways this can be used.

“The average click-through rate online for display ads is .07 percent and the average click-through for retargeted ads is about .7 percent.”
- Greg Coleman, president of Criteo

ahrefs: This tool will allow you to see your competitors’ search engine traffic.

Leadfeeder: Leadfeeder takes just seconds to install because it connects directly to your Google Analytics account. It will help you identify what companies are visiting your site. So, let’s say you send a prospecting email to an employee at Tesla and then that person visits your site — Leadfeeder would show you that Tesla visited your site. You could then, for example, follow up with that person since they are showing interest.

SEMrush: This tool will show you the keywords your competitors are paying for. You could use it to identify those keywords and then out-bid them.

Hunter: This is a Chrome plugin that will help you guess the email addresses of prospects you want to talk with. Just visit the site of the company where the person works and hit the hunter button in Chrome.