Web + Graphic Design tips: What we can learn from Cloudflare

Web Design Professional Clinic: Cloudflare

I recently wrote a post directing people to Alexa.com in order to explore web design and messaging strategies. Using Alexa’s “Browse Top Sites” button is an extremely efficient way to explore popular website designs.

What can we learn about graphic + web design from US Site Rank #1143? Company: Cloudflare.com

According to Alexa’s data, Cloudflare.com*:

  • Currently ranks #1143 in the U.S. and 1,231 globally (based on a 3-month average of pageviews and number of visitors)
  • Has a bounce rate of 21.1%
  • Gets 4.69 daily pageviews per visitor
  • Time on site of 4:49 minutes

The site has a very high global and US rank, with a very low bounce rate. When you look at the density of the page content, 4.69 page views is impressive. The high-value content may explain the under 5:00 minute average time on site. Almost 80% of site visitors are quickly engaged, and explore beyond the first page they land on.

What can we learn about graphic + web design from Cloudflare’s site?

vortex-1143-example-home

Above: Home Page

Get to the point quickly with a strong, simple message

Cloudflare® comes to the point of their message very quickly using the home page to present a SINGLE over-arching brand message about website performance. The layout is clean and simple. The brand is reinforced by using the logo as a “play button” for the video. The use of the words “five minutes”creates a compelling teaser-like challenge to the visitor.

The average time on site just 11 seconds short of the brand promise and the site statistics seem to show that people are giving their time.

From a creative point of view, the headline works well on multiple fronts. “Give Us Five Minutes and We’ll Supercharge Your Website” makes a strong association between: 1) Fast setup; 2) Time needed to evaluate their solution and; 3) Dramatic website performance boost.

TIP: Consider whether you can present a challenge statement about your own product or service that compels visitors to learn more. Lead with a message about your brand is most relevant to your buyer personas.

Keep the Navbar Simple

Notice how product and benefit information is on the left, where it will be read first. Information about the company is contained within the footer. This helps visitors find what they need quickly and focus on important information first.

TIP: To highlight Important links, consider removing less important page or section links from the Navbar and placing those in the footer or elsewhere on the page.

vortex-1143-example-animation-style

Above: Screen shot of home page video story

Irreverant, lighthearted creative can convey a serious message

Asking people to watch a video is one thing. Holding their attention is another. Even though the Cloudflare home page video is under two minutes, It’s a lot to ask. They accomplish their goal by delivery of key points in a snappy fashion with a very engaging style of illustration. Notice that the focus of the message is on benefits rather than features. There is a noticeable lack of infographics. Why no infographic? To get the point across, it;s not needed and will only bog the visitor down. The real goal is to get them to signup or explore beyond the home page, which in turn will reduce the page bounce rate.

TIP: Humor and a lighthearted tone can help humanize your product or service. Done well, this approach can help build top-of mind awareness and positive perceptions, even for serious brands.

 

vortex-1143-example-signup

Above: Signup form

Free “Offer” makes it easy to try service

The value proposition is simple: Enjoy the product for free, and then decide if you need a higher level of service that come with paid subscription rates. Free trials are popular because they work. It’s a method of getting a prospect to “test-drive” which helps to create an emotional connection with a brand.

Cloudflare has four plans to choose from, each with a clear point of difference from the other. The company uses customer-centric naming – Free, Pro, Business, Enterprise – to help visitors quickly navigate and focus on the feature set that matches their needs.

TIP: Consider a free offer to better engage visitors. The free offer should help showcase your key advantages. Make the upgrade path simple, and give people a reasonable time to learn why your product or service is right for them. You can tie-in followup emails to check in and see how they are doing, or encourage signing up for a subscription or extension.

vortex-1143-example-features-1

vortex-1143-example-features-2

Above, left – Top-level feature summary; right – comparison chart

Drill-Down Approach to Content Delivery Engages Visitors

There are two different presentations of the feature/price story which encourage the visitor to begin a process of study. This approach is engaging, and helps to keep the visitor on the site longer.

  1. Top-level feature summary – uses a at-a-glance approach to help you narrow your selection and evaluate the difference between feature sets.
  2. Comparison table – The design of the table makes it easy to compare the differences between feature sets and provides another level of detail.

TIP: Make sure the differences between products or services and pricing structures are logical. If you have more than two or three feature sets, consider highlighting the differences with font style changes, color and typographic glyphs so so that readers can compare quickly.

vortex-1143-example-evidence

Above: Abbreviated Client list

Dropping Names Helps, As Long as Everyone Knows Who They Are

When it comes to making a statement online about product features and performance online, it’s the Wild West. If you want to be taken seriously, have your data in order. If you want to spare your visitors the chore of sifting through it on the website, you can provide a digital white paper for download and trade on the credibility of your big name clients. Using the actual logos works better than text, but be sure and get an approval as a courtesy.

TIP: Don’t make claims you cannot substantiate. If the support data is complex, consider offering it up in digital download in pdf form, and summarize the key points online. If compliance issues or regulations prevent your organization from posting data or you prefer not to share the data online, consider using the logos of clients as a way to suggest you’ve earned approval from credible brands. Be sure they’re recognizable names.

Next Steps:

Perform your own design audits of high-ranking websites. See if you can apply the same effective techniques and approaches to your own design work.

When you’re ready to embark on a online design (or redesign) project, make sure you understand the brand’s buyer personas. When your brand’s online content and design aligns with accurate buyer persona data, you’ll be on your way to improving your site ranking and other important analytical data that translates to achieving business goals.

Need Help Planning Your Creative Strategy?

Give us a call, or search for a web + graphic design firm who can assist you with the process. One important determining factor in the selection process should be whether a creative firm can articulate your product’s key advantages from the customer’s point of view. A demonstration of creative is not as important as being able to interpret your input and translate it into a clear statement of strategy, communication goals, and key performance indicators.

*Cloudflare website design and content – ©Cloudflare®
About the author: Tom Weinkle is a founder and partner of Vortex Communications, a graphic and website design firm who offers graphic and WordPress web design, build, troubleshooting and training services along with search optimization, social media and inbound marketing services. Based in Miami, Florida, Tom has over 25 years of experience in visual communications for the healthcare, medical, law, accounting, software, financial services and banking industries.

Scroll to Top