SaaS Homepages - Your welcome mat
Your homepage serves as the welcome mat for your SaaS business. A good homepage introduces users to your site, your brand, and your product—and gets them to take the next step in your sign up process.
We all know that a great homepage is one that converts. Yet, getting an accurate measure of your conversion rate and being able to A/B test different versions of your homepage against each other requires a sufficient volume of visitors and enough time to run experiments to ensure statistical significance. In reality, a homepage’s strengths and weaknesses come out by watching real people go to the homepage and look through the marketing site.
In the most comprehensive look at SaaS homepages to date, we studied 30 different SaaS websites through 90 different user interactions by partnering with UserTesting.com who donated credits for their product so we could analyze the videos and understand what makes for a successful visit to a homepage. With guidance from the UserTesting team, we had participants share their thoughts out loud as they answered questions and completed tasks about their experience during the session. The user's experience on each site was recorded in its entirety to video in total amounting to over 1,800 minutes of user testing (to get three free UserTesting videos use code "SaaSDNA" at UserTesting.com).
(For more on our methodology, go here.)
The Anatomy of a Homepage
The 30 homepages we evaluated represented companies spanning all types of SaaS categories—including customer relationship management (CRM), social media marketing, analytics, help desk, email marketing, etc.—serving customers of all sizes—from individual business users, to small and medium businesses (SMB), to the enterprise.
The homepages had mixes of some of the following components:
- 80% have a free trial CTA
- 56% include product screenshots
- 53% have stock images
- 53% quote customer testimonials
- 36% have illustrations
- 33% have videos
We conducted a regression analysis to see if any mix of components far outperformed others, but no such mix emerged. For example, sites with video outperformed the mean on average, but not dramatically so. Rather than slicing and dicing the data based on component, we found that it was more instructive to look at holistic case studies of individual sites to learn either why they performed exceptionally well or why they underperformed.
We asked users to evaluate the homepages along two dimensions: ease of understanding and engagement. The first indicates how easily they understood the product and what it does, and the latter points out how well that message connected and how moved the user was to take the next step in the process.
Ease of Understanding
Your homepage needs to immediately communicate the value of your product, and what it does. It sounds simple, but making this really easy for someone who knows nothing about your company to grasp is actually incredibly challenging. We asked our user testers two questions:
- How difficult or easy was it for you to understand what this company does?
- How difficult or easy was it for you to understand the information on the homepage?
The first question happens on a quickly formed first impression based on reading the tagline and perusing the homepage for 2-4 minutes. After visitors have browsed other parts of the marketing site like the pricing and features pages, they’re directed to come back to the homepage. Based on their expanded understanding of the company, they’re asked to re-evaluate the homepage and rate how easy it was to understand the information on the page.
How difficult or easy was it for you to understand what this company does?
After being directed to the site, users were immediately asked to describe what each company did. Next, they were asked to rate how easy it was to do so on a scale of 1-5 [1 = very difficult, 5= very easy] .
Highly-rated example: Trello
Trello’s homepage is one of only a few which we analyzed that didn’t place a navigation bar at the top of its homepage, nor did it have any sort of floating nav bar. It’s nestled at the bottom, instead. Upon reaching the site, users were momentarily taken back by this design, but they ended up actually spending more time browsing the elements presented on the homepage, instead of jumping around.
After gaining a basic sense of what Trello does, immediately below the fold users see a dashboard screenshot that demonstrates Trello’s product in use.
Reaching the dashboard screenshot triggered an audible “aha!” moment from users, where both the value of Trello and its real-world application suddenly clicked.
The free trial call-to-action is one of the only CTAs on Trello’s homepage, strategically placed at the top, above the fold, and near the very bottom of the site. All users tested clearly understood what step to take after visiting the landing page—signing up for a free trial.
Trello’s page is a great example of the minimal homepage trend that offers minimal user choice, rather than maximal navigation and explanation. By strategically restricting options, and carefully choosing what information to present users, and how, Trello’s homepage guides users through the precise steps it wants the user to take, without any distractions.
Quotes from the responses:
- "Trello helps individuals and organizations manage both simple and complex projects by organizing everything they need in one place."
- "I really like the look of this picture, it’s great and I was able to actually gather the whole idea of the program just by looking at this picture alone."
- "You do have to click quite a bit to get to the content."
- "Even the cute little wolf just makes it a lot friendlier."
Lower-rated example: Insightly
Users dropped into the landing page looked first at the content above the fold—but they couldn’t concretely relate to the service that the company actually provides. The tagline reads like marketing-speak—which users picked up on, and didn’t appreciate. It assumes that users know what a CRM is, and the benefits it provides are vague: “The CRM That Works For YOUR Business.”
Scrolling down further, users were overwhelmed with a list of different features that didn’t provide them with a cohesive sense of Insightly’s actual objective—jumping from “Powerful CRM,” to “Project Management,” to “Social CRM.” One user suggested that Insightly provide an actual dashboard screenshot of what the product actually does.
After going through the company’s homepage, another user remarked, “It could have been easier [to read], but I don’t know how they could dumb it down more.” It’s a telling statement. There’s a key difference between simplifying something, and dumbing it down. Users already felt like the site was dumbed down, from the hero shot. They felt patronized from the beginning, but not in an instructive or informative way. That negative first impression made them less open to the company and it colored their entire experience.
Quotes from the responses:
- "I'm not really sure what this company does. I guess some kind company that helps you build your own company up."
- "Looks like they do some sort of project management which is good…"
- "I would like to have a concise statement per depiction of what Insightly does."
- "It looks like it’s some sort of software or program that helps organize your business, maybe something that helps you connect different services."
How difficult or easy was it for you to understand the information on the homepage?
After going through the whole site and then coming back to the homepage, users were then asked to rate ease of understanding the information on the landing page. Sites that scored well on the previous question correlated to high-scoring sites when presented with this question. In other words, a user’s first impression of a site was likely to decide how she felt going forward.
Highly-Rated Example: Campaign Monitor
Users unanimously loved Campaign Monitor’s site. The wording of the site’s copy, like “elegantly,” “simple,” and “beautiful,” were mirrored in the open-ended responses that users gave. This is in part due to the strength of Campaign Monitor’s overall landing page design, which reinforced the overall principles of the company.
For example, rather than present static screenshots of product features, Campaign Monitor shows an autoplaying and looping screencast of how to use its design tools to build an attractive email newsletter. It demonstrates how the product actually works and substantiates the company’s claims around simplicity and beauty. Ultimately, when asked if there was any missing information on the page they’d like to see, all users responded no.
Quotes from the responses:
- "I had never heard of Campaign Monitor before, and got to the homepage and instantly was able to see what it is: elegantly simple email marketing. And if I wanted to I can scroll down and see more in detail what the company is about."
- "It’s very clean and easy to navigate, so thank you."
- "I think this is an awesome page, it’s just very beautiful. It’s high-level—I like that."
- "You see dynamic demos of exactly what you’re getting. I think it’s really well done. It’s very seamless, very classic, and the colors are perfect—whoever made this website is on it."
Lower-Rated Example: Chartbeat
Although Chartbeat’s design is eye-catching, users ended up feeling lost and losing interest. That’s because the homepage doesn't have a clear hierarchy and flow. Rather, the way it presents information wasn’t intuitive for users, who felt like they had to do too much digging and too many clicks to get to the heart of what the company actually does. From the start, they felt like the wording of the company’s tagline could be framed more strongly, and didn’t feel an incentive to keep scrolling down to learn more.
Even after spending several minutes browsing Chartbeat’s site and coming back to the homepage, users didn’t have a clear picture of what the company does. Users felt like there was too much content on the homepage, but at the same time still couldn’t get a sense of the product, despite clicking through various screenshots of Chartbeat’s dashboard and product. The tradeoff here is between style and utility: Chartbeat’s homepage sacrifices coherence to create a visually compelling site. Ultimately, to users, Chartbeat got a little too cute and this lack of clarity turned off users.
Quotes from the responses:
- "I feel like I had to really dig in to get more information, and the wording is a little confusing. Like 'see what interests, visitors, and adapt your site instantly.' I feel like it could do a much better job with the wording and how Chartbeat describes its services."
- "I'd need to spend more time to dig in and see what this platform is all about. On the surface, it was pretty difficult to understand the company's various offerings."
- "Try tweaking that headline."
Key Takeaways for Ease of Understanding
- The first impression a user has of a site corresponded heavily to their overall experience of the site, and how much they were able to learn from it. The above the fold tagline of your homepage is especially important to the overall effectiveness of your landing page.
- Users are turned-off by marketing speak and industry jargon. If you need to include these elements, be sure to explain them in plain English. Use benefit-driven language that steers away from technical terminology in describing your product.
- Users like condensed or concise information that still answers their questions. If including a lot of information is unavoidable, it should be organized in a manner that minimizes the feeling of being overwhelmed.
- It’s critical that you organize the various elements on your site strategically, in a way that makes intuitive sense for users. Users often became confused when a homepage lacked clear direction, with too many different navigation options.
- Few of the users were familiar with the sites they were testing. They only brought up this lack of experience, however, when they also had a difficult time understanding what each company did on the homepage.
- 66% of sites we analyzed contain customer logos. However, users often requested more specific quotes from customers, and testimonials.
When users easily understand your homepage, they're saying:
When users struggle to understand your homepage, they're saying:
Getting engagement from users is how you ultimately provoke action and get users to take the next step in your funnel. This is where you’re not only conveying what your company is about, but you’re making a connection with the user that gets them excited about your product. We asked our user testers two questions:
- How useful do you find the information on the homepage?
- How engaging was the homepage?
With these questions, we’re asking the user to think about not only whether they were easily able to comprehend the information presented, but how it made them feel and whether it moved them to take action.
How useful do you find the information on the homepage?
After looking through the entire site and coming back to the landing page, users rated the usefulness of the information they were presented on the landing page with on a scale of 1-5.
Highly-Rated Example: Hootsuite
After browsing through Hootsuite’s entire site, users found the information on the homepage extremely useful. Although users wished that the homepage’s initial tagline was more descriptive as to what the company actually does, this early confusion cleared up as they spent a couple more minutes on the site.
The key to Hootsuite’s success on this front has to do with the concise, tight, organizational layout of the homepage. Users appreciated the fact that while they could always click to find out more information, the actual information presented on the homepage was manageable.
After seeing a dashboard screenshot, users scrolled down to features toolbox to learn more. The language Hootsuite uses to describe features on its landing page was especially effective. It completely eschews technical description, in favor of stressing the specific ways in which a user would benefit from each feature. Users were able to make an explicit connection between each feature, and how they would actually use it, which was key to engaging them to learn more throughout the rest of the site.
Quotes from the responses:
- "It’s useful. The site gives me an in depth look at each kind of component. It's letting me know that I can manage the accounts, control permissions. I think it’s very useful and I like the icons—they are very easy on the eyes."
- "Everything is concise, I can tell what is going down on the homepage, all the way to the bottom. I can easily tell what this site is for, and what it offers me."
Lower-Rated Example: Geckoboard
Users understood the information on Geckoboard’s site relatively well, but found the organization of that information to be at times difficult—which impeded the usefulness of the information presented, and how engaged users were with the actual site.
Users didn’t necessarily find an explicit connection between Geckoboard’s product, and its larger benefits in the marketing copy. Geckoboard’s above the fold tagline reads: “Your key metrics in one place.” But users found this description vague, and weren’t 100% clear on how the company’s KPI dashboards would actually help keep their teams informed and motivated. One user suggested switching out the existing screenshot for an image of a happy, motivated team.
This extends to the rest of Geckoboard’s homepage. The “Data Matters” section starts from broad, high-level benefits, before moving down into a “How it works” section that describes the things you can actually do with Geckoboard’s product. For most users, this structure wasn’t completely intuitive, and they had a hard time figuring out how Geckoboard could actually help them. They wanted to see a more explicit connection between the product’s features, and the actual benefits promised.
Quotes from the Responses:
- "It doesn’t specify everything, at least not obviously."
- "It's useful in that I know I can get to another resource to get more information. I don’t feel like it’s laid out well, everything else is very spread out. I have to read a lot and scroll a lot to try to get information."
- "I don't feel like these categories are actually divided up very well."
- "The pictures aren't very engaging, they're boring icons. Instead of a bar graph, maybe you could show me a team of workers that looks like they're motivated and excited about what they're doing."
How engaging was the site?
After looking through the entire website, users were asked to evaluate the statement, “The homepage is engaging,” on a scale of 1-5 [1=strongly disagree 5= strongly agree].
Highly-Rated Example: Wistia
Wistia’s homepage is dominated by a video call to action, which takes up most of the space on the homepage. In the background, it has a looping, autoplaying video of people smiling and prepping to get on camera.
It’s simple, visually-appealing, and effective—especially given that Wistia’s product is a video-hosting service. Due to the size of the video on the homepage, users were far more likely to go ahead and watch it, which then ran them through Wistia’s various product features. For less tech-savvy users in particular, the video format was extremely effective at driving engagement with the actual information being presented. The video drew users in, who then described the company as “fun” and “quirky.”
However, because of their unconventional homepage, there were users that missed the video call to action and otherwise didn’t know what to do. They ended up having to click around the rest of the website to actually get a sense of the company. Fortunately, those auxiliary pages supported the homepage by engaging and teaching the user about how Wistia could make them successful with video.
Quotes from the responses:
- "The website was catchy and you couldn’t get lost, they had everything — all the information that you need right there."
- "It’s definitely engaging. It’s very young. Targeted to new business owners who are very social media friendly and tech savvy.The company looks fun. Maybe a little nerdy, but that’s not a bad thing."
- "You have attractive people in the video moving around and stuff, it’s not a still image. I would like to click on the play button and see what they’re saying, it looks like they’re having a great time."
Lower-Rated Example: Hightail
Hightail’s bare-bones homepage did very little to provide users with a cohesive sense of the company’s actual product. The homepage only included the above hero shot and tagline, which did little to actually show users how Hightail works in practice. Users weren’t able to gain a visual understanding of the product, and as a result, found it significantly less engaging than other sites.
The color composition of the page in whites and grays also seemed to detract from user experience. One user explicitly suggested the use of more contrast in the website’s design, and multiple users described Hightail’s homepage with the adjective “dull.” Another user suggested incorporating screenshots of Hightail’s actual product into the homepage, to show what the product actually does.
Quotes from the responses:
- "There’s really nothing that engages me with the homepage, there’s nothing that really captures my attention."
- "I don’t like this homepage at all."
- "The background image just looks pretty dull."
Key Takeaways for Engagement
- Visually-appealing, strategic organization of information on your homepage is crucial. Having too many different options—or to few—detracts from how engaging your landing page is.
- User engagement is dictated by what you actually offer your users. Your homepage needs to communicate a sense of how your users would actually use your product in practice. Engagement is directly linked to whether users can see applications of your product in their own lives.
- Users increasingly expect more and more dynamic website design, with videos and background animation. Homepages with a dynamic video above the fold consistently scored as more engaging.
- Cover your bases by including a variety of different visual aids that help explain your product and service. Some people like watching explainer videos—others don’t. Some really like dynamic animation that explain what the product does. Make sure that your landing page casts a wide net for all users.
- 33% of homepages analyzed included videos. Although having a video doesn’t necessarily correspond to a more engaging website, users often requested videos when they found the information on the site confusing.
When users are very engaged with your homepage, they're saying:
When users are aren't engaged with your homepage, they're saying:
Conclusion and main takeaways
To synthesize the user testing data, we grouped top and bottom companies for both ease of understanding and engagement into one of four quadrants:
We found that companies in the same quadrant provoked a similar reaction in their users, and those reactions came out in the language they used and the tone of voice they spoke with.
Those with engaging and informative homepages delighted their users. Those that only informed, but failed to engage, bored their users and those that engaged, but failed to inform, confused their users. Finally, those that neither engaged nor informed created an overwhelming sense of apathy in their users.
Based on what we heard from users, here are a few recommendations on how to move your homepage into the “Delight” quadrant.
You’re doing great.
- A/B test copy to get marginal gains and easy wins.
- Take your hands off the landing page and focus your energy on other areas of higher leverage.
- Revisit your homepage when you’ve made larger wholesale changes to your product and messaging.
Boredom → Delight recommendations
To get from boredom to delight, you need to focus on the design elements of your website.
- Include a variety of visual aids like video, animation, and screencasts.
- Use more visually engaging elements.
- Design with the average user in mind.
Confusion → Delight recommendations
If your homepage falls into the confusion quadrant, you need work on the marketing copy of your website.
- Remove jargon and simplify the language.
- Make sure there’s a sensical hierarchy of information that moves the user from one section to the next.
- Strike a balance between providing too little information, and too much.
Consider a refresh of the landing page after having gone back to the drawing board and starting from first principles.
- You can’t A/B test your way out of apathy, so don’t try.
- You’ll most likely find qualitative feedback the most useful in quickly identifying big problem areas and tripping points.
- Come back and experiment with fresh concepts for the homepage that derivative off the current one.
Users who tested Delight-quadrant company pages not only voted those companies to the top, but they also had an audibly more cheerful and enthusiastic tone. These companies made a fantastic first impressions, and users were eager to dive into the rest of the marketing site to learn more about pricing, and sign up for a free trial.