Behind the scenes at Shopify, Upwork and Tuft & Needle

3 examples of brands with brilliant landing page design

Introduction

You pushed your website live and started driving traffic to key landing pages. That’s a great accomplishment.

Now it’s time to start optimizing and increasing conversions.

The truth is that website optimization doesn’t have to be complicated, and it’s definitely not out of reach for your business. 

In this article, we’ll walk through landing page pages from Shopify, Tuft & Needle and Upwork to highlight their layout, messaging and CTAs. You’ll learn strategies these brands use to keep their pages interesting and, in the end, drive a massive amount of revenue. Let’s get started.

What is a landing page?

Landing pages are typically a single page seen by visitors after taking an action like clicking an advertisement, email, social post or any other marketing activation.

Most landing pages include similar elements like a clear call-to-action, product value messaging and an easy-to-complete form.

The phrase “landing page” is also used in tools like Google Analytics to describe the first page traffic lands on when arriving at your site. For example, Lucky Orange receives traffic from marketing efforts that lands on the Dynamic Heatmaps page of our main website. This is a key landing page for us, even though it’s not separated from the navigation of the site. 

In this article, we’ll focus primarily on pages built for a specific effort as opposed to those baked into a website that happens to be the first page of a conversion funnel.

Here’s how we’ll evaluate our three examples:

  1. Visual: How the pages are organized, where the forms live and how color and layout impact the experience
  2. Messaging: Which words live in which spots on the page and how do they describe the offer at hand
  3. Forms: The key conversion points of each page, what surrounds them and what language and design cues are used to designate them as forms

Software as a Service: Shopify

Sell online with Shopify e-commerce tools

Brand & Page Description

Shopify is a top e-commerce platform for over 1,000,000 online stores worldwide. We reached this landing page after clicking on a search engine ad and it offers information about their subscription levels and focuses heavily on getting the visitor to start a free trial by providing their email address. Let’s take a look at how they quickly convert visitors into trial merchants. 

Visual

This page allows just the right amount of open space between content blocks. There is a use of a green color that can be seen throughout Shopify’s website variations, allowing the white font to be clearly legible on all screen sizes. 

This green color at first appears to be straight full-width but has a unique bottom “wave” that adds a nice amount of playfulness complimenting the conversational messaging used throughout the page.

Shopify clearly believes traffic that lands on this page is interested in signing up but may want to see pricing first as the pricing blocks are a prominent feature. A common theme throughout this page is simplicity, and it is prominent in the pricing descriptions. The best part about this section is just how easy it is to understand the offer. 

See how Shopify pricing is displayed on its landing page

There are three basic levels with simple names and short descriptions. Shopify has likely A/B tested their way into this level of information as they could clearly include more feature descriptions within each plan level. 

Below the pricing level section, you’ll see a three-column layout of support points. This is a common feature of successful landing pages and is something to consider adopting on your own site. 

Visitors who read down to this part of the page are likely looking for more information on the product, and Shopify offers these points to help convince them the platform is right for their needs. Use a space like this to clarify a complex feature or highlight a competitive differentiator.

Shopify landing page product benefits

For visitors who are still unsure, Shopify then provides social proof by sharing some existing customer logos. Simplicity appears again as Shopify doesn’t use a description for this section but rather assumes the visitor understands these logos as examples of current customers.

These logos, like everything else on the page, are static, unlinked images. This keeps visitor behavior limited to one thing — the trial signup form. Ultimately, that’s the reason this page exists.

Finally, Shopify provides a simple quote from an executive at a powerful, potentially recognizable brand followed by a secondary CTA offer for the free trial using the green contrast color used in the top section of the page.

Shopify landing page quote testimonial

Messaging

Primary value propositions don’t get much clearer than, “Sell online with Shopify.” There’s much more to the product, but at its core, Shopify enables you (read: anyone in the world with a product to offer) to create an online business. The simplicity of this statement makes e-commerce, a potentially intimidating industry, more approachable and encourages user behavior to focus on the conversion.

It’s worth noting that Shopify has enough brand recognition as a place to grow your business, that it doesn’t necessarily need to provide further clarity around product capabilities to still convert visitors. 

If your business is complicated or lesser-known, your primary statement should clarify why your specific offering is the best for the visitor. This is the “one thing” you want them to remember above all else after they’ve left your site.

Sell online with Shopify landing page value proposition

The proof point here provides social proof to show the visitor that Shopify is the best place to take their e-commerce store. If your business doesn’t have large numbers like 1,000,000 to throw around, it’s okay. A proof point can come in many formats and simply needs to lend credibility to the primary statement. 

So, whether this is highlighting a product feature or how you can help make the visitor’s life easier, injecting proof points into the top of a landing page is a great idea.

Forms

This landing page features a great example of a multi-step form. At first glance, it appears that you’ll sign up for an account using just your email address. Providing this piece of information and clicking the button labeled “Start free trial” will actually take you to a secondary form to confirm you’d like to sign up. After this, you’re led to two more forms to help refine your store information and set up a payment address.

Shopify free trial signup form example

Let’s pause here. 
Why do you think Shopify doesn’t just have the entire form on the initial page?

Of course, an email-only form looks really simple and has a simple design aligning with the rest of the page. However, there’s something else here to pay attention to. 

By breaking the two additional fields out (even things as simple as “Password” and “Your store name”) Shopify hooks the visitor with that initial click or email address submission. The visitor is already invested in the process since they engaged with the first step, increasing the likelihood of conversions.

Start your free 14-day trial of Shopify form example

It’s likely Shopify has a large list of email addresses for people who complete this step but never get their store up and running. Keep this in mind should you take a similar approach and be prepared to activate email marketing to help convert those records into fully-active customers. Keeping a full panel of options open is a great way to start building an omnichannel marketing strategy.

So, what’s the takeaway here? Be intentional with the amount and type of information you request from visitors upfront. Consider different ways to get to the end result, whether that’s a signup, download, purchase, demo call or anything else you want to call a conversion.

BONUS: 

Take a look at Shopify’s full website home page. Notice how some elements from the landing page we analyzed carry over. 

It’s likely Shopify sees many visitors find the landing page and navigate away to find this full website to do further research. Having strong retargeting and tracking capabilities in place will help you control your customer journey more effectively. 

E-commerce: Tuft & Needle

Tuft and Needle Landing Page hero image example

Brand & Page Description

First arriving in 2012, Tuft & Needle is part of a group of direct-to-consumer mattress companies offering a quality product and an alternative to the traditional mattress product and purchase process. This particular page reached following a Google search for “Tuft & Needle mattresses”, is a product category page within the broader T&N website and is focused on educating visitors about the three different mattresses offered. 

Let’s take a look at how this e-commerce product comparison is structured and lessons we can take from their work.

First, get a feel for their conversational and innovative brand with a quick explainer video.

Visual

Some products lend themselves to online photos. Others do not. Mattresses traditionally were something you’d lay on at a store (gross) and try to guess if it’s actually comfortable or not. So, how do you sell mattresses online?

Tuft & Needle attacks this product interaction issue with a mix of contextual product photos and close-up shots of specific features. The focus here becomes more about the comparison between models as opposed to if any of them would actually fit your needs — really smart.

Tuft & Needle mattress product options

Tuft and Needle mattress foam options Tuft & Needle construction and materials options

Tuft and Needle Mattress cover options

Tuft & Needle includes a LOT of product details on this page, but because they’ve allowed the page to be about five scrolls long, there is plenty of space to fit things without feeling overwhelming at any point.

They’ve even deployed collapsing copy blocks to include a frequently asked questions section. This is a great way to fit a large amount of information (specifically paragraphs on a page that’s designed to encourage efficient conversion) in a small space.

Tuft & Needle FAQ section

Messaging

What kind of sleeper are you?

Tuft & Needle’s research seems to have resulted in qualitative data saying there are several categories of features that matter to people when it comes to their mattress experience. And while you may not know what “Adaptive foam with graphite and cooling gel” is, they’re willing to help you understand.

Using tooltips to explain complex (or proprietary) product features is a great way to get conversational and, again, not overwhelm all visitors with information if they don’t need it. Tuft & Needle offers succinct copy points to answer questions about things like firmness, edge support and cooling features. Notice how everything feels approachable (like a nice mattress).

tuft and needle mattress tooltip example

Finally, Tuft & Needle recognizes that they’re asking people to change their typical mattress purchasing process. To quell concerns, they present an easy-to-follow set of on-brand icons highlighting their answers to a few common customer service needs.

Tuft & Needle Shipping Process and Information Icons

Start optimizing your landing pages with a 7-day free trial of Lucky Orange.

Forms

Visitors who decide Tuft & Needle has a solution for their sleep needs start an easy checkout page by selecting a simple, on-brand button for a mattress option.

Tuft & Needle Mint Mattress Checkout Form

A few things to note here on this form setup.

  1. The visitor can either select their mattress size upfront or do this later in the process. Similar to Shopify’s signup process, this encourages the initial action and gets the visitor engaged in the process.
  2. Notice the CTA language used. “Shop now” makes the visitor feel like this is a process where you’ll select your specific mattress. It also separates the experience away from “Buy now” which would potentially discourage some visitors from clicking through.
  3. Tuft & Needle chose to highlight their alternative payment method (and approximate cost per month) upfront. This is a great way to share your payment capabilities and open up to a much broader audience.

Tuft & Needle also does a great job of providing ample upsell options during the checkout process. Things that you may not otherwise consider, like antimicrobial protection, are offered for a relatively low cost with clear value proposition language provided.

tuft & needle upgrades on checkout page

Bonus

The easiest way to analyze a checkout form layout is with heat maps and session recordings that show what’s actually happening on the page. See movement and engagement on the page with click maps and segment recordings based on things like traffic source or returning vs. new visitors.

Professional Services: Upwork

Upwork landing page example header

Brand & Page Description

When first going to find a freelancer, many businesses have a specific need they’re looking to fill. Upwork’s landing pages provide quick potential solutions to these needs to pull visitors into their vast network’s talent options.

Because Upwork’s freelance network includes everything from copywriting and web development to customer service and accounting, their landing pages must balance specificity with overall value proposition enough to convert a broad visitor demographic.

Visual

One of the first sections of the page is dedicated to quickly explaining that Upwork has talent available to fit your needs, no matter your company or project size. 

How do they do this? The answer is twofold.

First, Upwork shows they’ve worked to help some of the biggest companies in the world by using a logo bar. If you have the opportunity to include examples of your customers on a landing page, do it. Even if they’re a small business, it helps build a real-world connection to the brand promises you’re making.

Upwork logo bar and scope description example

Second, Upwork confirms that they can help you with everything from a one-off project to a long-term relationship with a full-time contract. This is a vital point for them to make and prevents visitors from abandoning simply because they assume Upwork is only for one or the other.

As we’ve seen across all three brands, notice how the contrast of on-brand color draws attention to certain elements. These elements are generally either key messaging points or a call-to-action button. If you were using an eye-tracking program, you’d likely see visitors jump from one point to the next that uses this color.

Here, Upwork offers a powerful section of example freelance talent and leverages their contrast color to allow visitors an actual step forward in signing up with, “View Profile.”

Upwork find the perfect freelancer block

The other element worth noting in this freelance example section are the high-quality photos used. This is another way Upwork builds trust with its potential customers. Highlighting real people with real talents who can actually be booked via Upwork proves that this is an actual solution to your business needs.

Start your journey to amazing landing pages with a 7-day free trial of Lucky Orange.

Messaging

Like we saw with Shopify, there is a clear flow of information provided as you navigate down the page. The copy attacks any concerns the visitor may have in an increasingly specific format. 

If we were to break down the sections of this page by the questions they answer for the visitor, it would look something like this:
  1. What does Upwork do?
  2. Does Upwork offer solutions for my need type?
  3. What are some examples of the type of services available?
  4. What is required of me to find a freelancer on your network?
In a more generic format that you can apply to your page, this might be:
  1. What value does our brand offer?
  2. Who is our product or service best for?
  3. What are some specific product features that help this audience meet their needs?
  4. How do people gain access to our product or service and at what cost?

If you can answer these questions for your visitors in an efficient manner, you’re off to a pretty good start.

Forms

Upwork’s website forms are a great example of being flexible and providing more than one option depending on the visitor’s conversion goal. Depending on your form builder’s limitations, having more than one type of form is a great way to connect visitor needs with the desired action. Using the quantitative data gained from two form options will allow Upwork to optimize even more strategically.

Option 1: Inside the profile

Upwork signup form inside the profile

If a visitor engages with the “View Profile” section, they’ll see the selected freelancer’s profile alongside a signup form. Upwork is simply asking for an email address or to sign in with Google to see the profile.

From a marketing perspective, Upwork is granting access to their network with one piece of information knowing they can come back around later with an email drip series or on-site notifications to encourage signing up for a more premium level plan. 

This form captures those visitors who are ready to rock with a specific project or at least want to see what it’s like to move into contacting a specific freelancer.

Option 2: General signup

Get more done with top freelancers Upwork form example

Upwork Sign up for free project quotes example

The other signup option is located in two places on the page. At the top of the page we see a button labeled “Get Started” which links down to the form at bottom of the page, seen in the second image. 

This is a great way to keep the visitor on the page and still encourage the conversion. This form looks much like the one provided inside the freelancer profile aside from the language used. This time, we get a broader CTA encouraging the visitor to “Sign up for free project quotes.” Using keywords like “Free” or phrases like “No credit card required” are good ways to increase conversion rates on your landing pages.

What does this message do? It removes the stressful idea of searching a freelance database, providing a bunch of project information or any risk in signing up for a subscription. We’re just getting free quotes.

Conclusion

We hope you have some strategies to take into your conversion rate optimization. Though each of these three top brands goes about things in a different way, much remains the same. They offer a clean design with plenty of space for copy to breathe, clear CTAs, and forms with a compelling offer. 

As you head into optimizing your own pages, don’t get overwhelmed by the potential changes you could make. Do one thing at a time and before you know it, you’ll have a high-converting, revenue-generating machine.


[Editor’s note: None of the aforementioned brands participated in this analysis. All screenshots were taken during the time period Dec. 11-15, 2020.]