Given the ease of migrating from a non-cloud platform to Software as a Service (SaaS), or the growth of the software industry as whole, there is a large likelihood that you are designing, or redesigning, your SaaS website with a very specific goal in mind: more users.
In fact, according to the Cisco Global Cloud Index, by 2021, 75 percent of the total cloud workloads and compute instances will be SaaS.
This equates to a lot of new websites and lots of competition. As there are plenty barriers to dominating market share, you don’t want your website to be one of them.
Let’s learn how SaaS website design should look by looking at a recent site we built for one of our SaaS clients: Allocable.
Because of our combined efforts, we experienced a 211% increase in new business after the new website launched.
Robert Wells - CEO, ALLOCABLE
How to Build a SaaS Website: Start Here
First off, it should be mentioned that a SaaS website should be designed on what users want to see, not based on what you think they need to see.
Second, we should mention that we did not originally set out to design the Allocable website, we were handed a website with poor conversion rate optimization (CRO) elements and needed to update it given we were also providing SEO for them. See the attached image for the before and I’ll tell you what I mean.
Allocable Site Before
Allocable Site After
Aesthetically, the old site was not so bad. But the backend of the site, built on some terrible Content Management System (CMS), was impossible to optimize, both from an SEO standpoint and a conversion rate optimization standpoint.
We were hired to do SEO. You can’t drive a bunch of qualified traffic to a website then have the website lose potential leads because it is not optimized for conversions properly. Anyhow, after weeks were lost on back and forth with the dev team, we decided to rebuild the site in WordPress.
Here are the elements of a SaaS website that made it tick.
SaaS Website Design Above the Fold:
Your Most Important Real Estate
If you are new to website design or are a seasoned designer, you need to know this: the portion of the website before the visitor has to scroll down is your most important piece of real estate.
This section of the website -- on desktop or mobile -- is called “above-the-fold” as it references the most important piece of content on a newspaper, which was above its fold.
On a SaaS site, this is primarily comprised of the following:
Value proposition and Call-to-action(s) (CTA)
There is not much that needs to go into discussion regarding the logo. For Allocable, we decided to make the logo link to the homepage. This is fairly common practice as is not having a navigation item for “Home.” Most SaaS users are computer-savvy enough to know that clicking the logo will get them back to the homepage.
We also opted for left justification rather than centering the logo and wrapping the navigation around it as you see in some sites. Just personal preference and matched what the client had prior to our redesign.
Your SaaS website’s navigation menu is one of the most popular design aspects you need to spend time on. If you need some more info on designing this very important aspect of the website, check out this post on sitemap design.
There is a really great blog post I found on SaaS navigation menus created by Mihai Sterian that I’ll reference several times throughout this post. Mihai looked at 126 high growth SaaS companies and evaluated their navigation menus. Many of his findings I’ll refer to here for best-practices (although his blog unfortunately was published after we built the Allocable site!).
Here’s his take on why you should optimize the navigation menu:
For Allocable, we decided on the following items for the Navigation menu:
While we had four primary sections for this site, Mihai found that most SaaS websites actually have five, but about 80% of them have between 4-6.
For Allocable, it was all about presenting the information that their visitors were seeking. Of course, the Features of a software are one of the most popular pages so we knew we had to focus on these. We broke these down further into subcategories for user experience and SEO, although we opted not to place them in a dropdown menu.
The Roles section is one that I’ve seen more SaaS companies doing -- and a competitive analysis of Allocable’s competitors revealed a Role’s section is trending right now. Defining who your product is made for helps website visitors identify with the product more easily.
These pages are like mini buyer personas for each type of decision-maker, or influencer, who may be interested in using your software. Here, too, we created subcategories for user experience and for SEO reasons. You may find that “Industries” is better suited for your SaaS.
We placed the blog in the top menu as well because this is an area we utilized for the stage the business was in. What I mean by that is Allocable was providing a product that people did not know they needed, kind of like Dropbox before it went big.
One of the best ways to introduce people to a SaaS with products they don’t know they need (or problems they didn’t know they had) is through content marketing. Thus, the blog served as a brand awareness resource and a place where we could capture visitors emails (via blog subscription methods) and place them in our sales funnel.
Finally, at the far right of the Navigation menu is the Demo. This is perfectly aligned with what Mihai found was the most popular lead generation strategy for SaaS websites, coming in significantly over Freemium and Trial lead generation efforts.
You’ll notice on the old Allocable site that there is a Get Started button in the Navigation menu. They also had a Home, Take a Tour, and Our Story tab.
We felt that the Home button was redundant with the clickable logo so we removed that. The Take a Tour link was really a snapshot of the Features of the software but was expanded to be a much more robust representation of the what the software could do. We didn’t mind the Get Started button in the top menu, but all this did was create a popup lightbox which presented zero opportunity to have a landing page detail exactly what the user would get if they signed up the way the new Demo page and functionality does.
The Most Popular Navigation Items in SaaS are:
Mihai’s post shows that many SaaS companies are utilizing a Resources section within their navigation, which I found interesting.
I guess I shouldn’t be considering how much brand awareness goes into getting a user from the Attract to the Convert stage of your sales funnel.
Perhaps this is something we should have considered more in the design of Allocable’s site. Of course, it also means you have to buildout a bunch of resources -- white papers, webinars, videos, etc. -- that your ideal customer identifies with to gain their trust. Like our client, many early stage SaaS’ don’t have the resources to create all this amazing content.
Don’t get too caught up in the words here. Our Blog served as our Resources section, our Features as Solutions, and our Roles as our Customers.
However, there is something to be said about presenting to customers what they are accustomed to seeing elsewhere on the web, which is why the items used in the Most Popular Navigation graphic are so important.
Also, I should mention that we pushed the client towards a pricing page (the third most popular navigation item) but they were still trying to figure this out. As you can see above, this is a popular page on SaaS sites and an obvious point of interest for potential customers who begin to evaluate your software versus a competitor during the Convert stage.
There are companies out there that exclusively help SaaS organizations with their pricing, such as Price Intelligently, a leader in the space.
The hero image, according to Wikipedia’s definition, is:
A large web banner image, prominently placed on a web page, generally in the front and center.The hero image is often the first visual a visitor encounters on the site; it presents an overview of the site's most important content.
One of the most recent trends in hero image design is a full screen image designed to focus your attention on the main text (your value proposition) and subtext overlayed on top of the image.
To be honest, I don’t think a lot of thought needs to go into the image you present on your hero section. Some SaaS companies simply leave the space white, while others showcase people, videos, or screenshots of the software. For Allocable, we opted for the latter.
What is really important in a hero image is what message you put inside it, or the direction you push your viewers to. This very important piece of design involves your value proposition and the call to action or CTA.
SaaS Homepage Value Proposition & CTA
Your value proposition and call to action above-the-fold is something that must not be overlooked and something that can be quite difficult to hammer down.
For Allocable and many SaaS companies, it can be hard to explain all of the services or features of your business in a succinct one-liner. Some current value proposition examples of popular SaaS companies include:
Dropbox: Boost productivity with Dropbox Business
Basecamp: We've been expecting you.
Slack: Where Work Happens
To be honest, these are all really bad examples of value propositions. Why? Because they don’t tell you a single thing about what the businesses actually do.
But you know what? These companies have already made a tremendous reputation for themselves and don’t really need to explain what they do (they’ll still get customers).
You, however, should. Here’s an excellent example of a clear value proposition:
Xero: Online accounting software for your small business
It clearly states what it is and who its for.
For Allocable, we eventually tested and settled on “Experly Combine Time Tracking with Business Intelligence.”
It explains what they do, “combine time tracking with business intelligence,” and then the subheading goes into further detail:
Incorporate time tracking data with people and projects to visualize the past, present and future health of a single project, or your whole business, in minutes.
Dropbox and Slack do a better job of explaining what they do in their subheadings as well. Basecamp’s messaging is still rather ambiguous to me:
Dropbox: The secure file sharing and storage solution that employees and IT admins trust.
Basecamp: All growing businesses run into the same fundamental problems. Hair on fire, buried under email, stuff everywhere. The good news? Basecamp solves them.
Slack: When your team needs to kick off a project, hire a new employee, deploy some code, review a sales contract, finalize next year's budget, measure an A/B test, plan your next office opening, and more, Slack has you covered.
Dropbox clearly states they provide file sharing and storage; Basecamp still is not explaining that they are a project management and team communication software; and Slack gives enough examples to showcase they are a software that connects teams with the apps, services, and resources they use.
It’s worth mentioning again that these companies are already SaaS household names and don’t have to make the sort of impressions that a newer, unknown SaaS should make. As first impressions are really hard for an unknown SaaS, you see a lot more company overview videos being used on homepages like we did with Allocable.
We chose to have our video displayed as a play button icon that used a lightbox when clicked because we thought it was cleaner. We also put a little text under the video as a smaller CTA -- Watch this 2-minute video to learn more -- to drive clicks yet demonstrate that the video was short.
Finally, our main CTA: GET A DEMO
Getting a user to sign up for your Demo or trial is what most SaaS companies are after. That, or having them set up a meeting to discuss the software with a rep.
In the case of Allocable, getting users to sign up for the Demo was quite challenging because they required so much data -- first name, last name, company name, email, phone, unique URL, team size, sample data.
But every SaaS has their obstacles and this was one we dealt with.
Ideally, you could get leads by just their emails as we know that the more information you request, the more friction you encounter. The Slack site is actually a really great example of using an email to help onboard prospects:
Another thing worth noting for the CTAs is the number of CTAs you have and the color of the CTA button.
For example, next to the Get a Demo button we considered another button for Learn More which would have taken users to the Features page. However, we decided against this and went with one CTA as to not dilute the central focus of the page -- getting more demo signups.
For the CTA button color, you want to go with something that contrasts with the rest of the page.
For the Allocable site, this was blue.
If we had gone with green, it would have blended into the site too much.
According to Mihai’s research, the most popular CTA button colors, are:
- Green (22.5%)
- No color (18.28%)
- Orange (16.13%)
- Blue (15.05%)
- Red (13.98%)
SaaS Web Design Trends
The following are some of the SaaS web design trends we adhere to when building sites for our SaaS clients.
Video Marketing: Overviews, Explainers, Training, Animated
More SaaS companies are turning to video marketing to help explain complicated topics, provide overviews of benefits, to train clients, or promote a specific feature. As videos are becoming more affordable, we recommend this for companies that can afford to invest in video.
For Allocable, we helped with some of the video brainstorming and worked with their video partner to create an overview video that focused testimonials from end-users and the creators. The video also focused heavily on benefits, which is a good place to start for any type of SaaS content.
If you watch closely you’ll see a very handsome CEO (me) providing a testimonial!
Social Proof: Testimonials and Client Logos
You see usage of social proof on nearly every SaaS site nowadays and I highly encourage SaaS companies to use this heavily on their homepage and throughout their site. Social proof allows your client testimonials to say how awesome you are. The client logos allow others to see companies that trust you for your services.
We placed some of their client logos right under the hero image to immediately establish trust and rapport with new website visitors.
There is also a rather large testimonial section towards the bottom of the homepage.
I’d recommend having a testimonial from a very large brand in your vertical along with a picture of their smiling face (if you can get it), and picture of their logo. Client video testimonials on the homepage are the step up from this.
Features Explained as Benefits
Every SaaS company has loads of features. Explaining them as benefits is what will really help your product resonate with potential clients, rather than speaking to them at a high level.
For example, Steve Jobs used to say “one thousand songs in your pocket” when referencing the first iPod. Doesn’t this sound better than “it has 5 gigs of memory?”
Today’s SaaS customers demand flexibility. The ability for you to integrate your software with their existing software can often make or break a deal.
If you have a SaaS that integrates with other software, you should create a dedicated integrations page as well as individual pages that discuss the integrations.
For example, Harvest has a great integrations page and individual pages for each integration (ex. Harvest and Asana).
Integrations pages exist to serve a user experience need, but are also great for SEO. If someone is already familiar with a software they are currently using and need something that you offer, they may just search “x integration with y software,” or something like “time tracking software integration with Harvest.”
Resources on the Homepage
We mentioned above that Resources are the number one used item in the top navigation. If resources are becoming this popular, what not dedicate some real estate to them on your homepage?
For Allocable, we placed the three most recent blogs on their homepage as well as a link to the blog. Right below this, we provided a lead capture option for a white paper.
If a visitor is not ready to try you for a demo or a trial, you’ll want to do everything you can to capture their email and continue to market to them until they are. This is what resources like blogs and white papers can do.
The Use of GIFs to Showcase Software in Action
Using GIFs to take screen grabs of software in action are definitely one of those extra mile type endeavors. But the beautiful thing about GIFs are that they give your potential clients an idea of what your interfaces are like before signing up for a demo. This, I believe, makes them more likely to sign up for a demo.
The Emma Features page is a good example of this in action.
Live chat is a real win on SaaS sites where there are often lots of questions about the capabilities of your software and if they are right for potential client.
For example, I was on a CRM SaaS website the other day and wanted to know if they were HIPAA compliant for one of our medical clients. I quickly started a live chat conversation and got my answer very quickly. It was convenient and better than sending an email and waiting.
Designing Your Next SaaS Website
One thing we’ve learned from creating multiple SaaS websites is that your brand still has to reflect who you are. You can look at 100 other SaaS sites for inspiration but I wouldn’t try to copy the style of another company.
The best companies are clear about their messaging, consistent with their branding, and effective at getting their visitors to follow a specific path. At the same time, they are uniquely themselves.
While not every visitor to your site will sign up for a demo or give you their email, your goal should be to constantly test new ideas, document how they performed, and continuously improve.
YOUR SAAS WEBSITE PARTNER
Need helping thinking through all bells and whistles of your SaaS website? Contact the team at Digital Elevator for help building a site that converts.