Best Web Design For Saas
THERE’S A NEW VERSION OF THIS ARTICLE!We’ve published a new 2017 analysis of SaaS landing pages — This year we’ve expanded to over 100 companies — it’s packed with more insights than we’ve ever published in one article.Check out the new analysis here:For this analysis, we scoured over 40 landing pages across the web. It’s clear that web design standards and best practices, as well as advanced optimization techniques, are leading to conformity of most standard elements. However, business websites still need a way to stand out, and to market the product in new and inventive ways to the user. View the landing pagesElements of a SaaS landing page 1.
Feb 21, 2018 - So before you kick-start the designing and development phase of your web app, check out some of the best SaaS design inspiration that has. Jun 19, 2017 Must-Have SaaS Tools For Web Designers. You can find web-based systems for editorial calendars, design projects, wireframing tools, and so much more. Web design is also a huge field so it can include a lot of great tools. Most of these tools you’ll want for your desktop(eg. But no question Google is the best free option and their SaaS. SaaS web design agency, specializing in lead generation for software-as-a-service companies. Marketing and website design for SaaS companies.
Site navigationObviously fairly essential, the navigation allows the users to get around your site. Things to consider here include:. How prominent does it need to be? Users should be able to find it when they want it, but making it the most stand-out part of the page may draw their attention away from actually reading your content. Simplicity is king! An overly-complex site navigation will leave your visitors confused like a tourist in a city without a map.
Does it always need to be visible? Consider hiding it at points when the user will be browsing your page content.Example: SendGrid SendGrid offers a fairly standard site navigation – but notice how they split out the “Core” items from other functions such as their blog, or support links. Example: Vend Vend also splits out primary navigation from other parts of their site. Also, notably, they stick to 3 main navigation items and hide the remaining items behind a “more” dropdown, to reduce noise and complexity in their menu. What did we learn?Although a navigation menu might seem like a fairly standard element in any company’s website, there are things you can do here to guide the user through your site’s content in the most natural way for them. Think about:.
Scrolling vs. – usually more-so than clicking through menus. And it requires fewer page loads. As highlighted in the examples above, keep your navigation clean if necessary by hiding secondary items. Remember that existing customers will land on your homepage too – don’t make it difficult for them to log in to your app!2. Hero shotThis is the single image (or video) that grabs the attention of your user, and entices them to read more about your product.
Quite often this will be a full-width large image, that takes up most of the visible screen. The hero shot has emerged as the leading element of landing pages in recent years, with high speed internet allowing for large, high-resolution images showcasing the product in a much better way than words ever could. Example: Contentful Contentful’s Hero shot is clean, simple, and shows off the capabilities of their product. Interestingly, as an API-based product which is difficult to visualize, they choose to leverage their client’s content to showcase themselves (fashion is infinitely more visually compelling than an API) Example: Google Apps for Business Google, as always, employs the very clean look that they defined years ago for their Search product. The use of people in their hero image brings a human element to what could otherwise be perceived as an unfriendly, corporate product.There is a huge amount of psychology behind imagery on websites, and how the user is affected by colors, different styles, faces etc.
I asked our design / front-end expert at ChartMogul for some input on hero images and the inclusion of people:“It’s important to make clear who we’re designing & building for, showing we’re putting real people first, not some technology. And generally humans react more intensely to faces than a product screenshot.” What did we learn?. to capture the attention of a visitor. It’s got to be visually striking or highly appealing to succeed. Full-page video is just about feasible, given today’s standards for high-speed internet and powerful browsers. If your product is not very visual, why not leverage what your customers do with the product?3.
Your product’s USPThe USP is your unique selling proposition. It describes in the most concise way possible what your product is about – and persuades your visitor to continue browsing. Example: Huddle Huddle’s USP does a great job at conveying what the product offers to its customers, in a clear and concise way. Example: Intercom Intercom is all about communication, and simplicity. Their USP summarizes all of the core features of the product. What did we learn?.
Most companies use a one-liner, followed by a subtitle of 1-2 sentences. If you can’t get to a simple one-liner, think on a higher level about what your product solves. The Intercom USP above is a great example of this. Avoid using elaborate adjectives or adverbs here. This is not the sentence that sells your product, it’s simply to pique the interest of the visitor. Bad: “Critical customer communication with effortless simplicity and beautiful effectiveness.”.
Good: “Customer communication made simple.”4. Product benefitsWhat will the customer get by signing up for your product? A list often works well here. NOTE: The temptation with this is to gravitate towards listing the features that your product offers, i.e. “20GB cloud storage”. This is not a benefit, and is not compelling. How about “access all your files from anywhere”?
That’s a benefit, and the visitor can identify with it, and understand how it improves their life. As the folks at put very eloquently:“People don’t buy products; they buy better versions of themselves.” – Samuel Hulick, User Onboarding Example: Geckoboard Geckoboard very clearly sells benefits, rather than features. Benefits like “Make better decisions” are far more compelling than software features.
Example: Dropbox Dropbox offers a compelling set of benefits for using their product, that clearly show how the user’s everyday life is considerably better with an account. What did we learn?. Show benefits not features (mentioned above). There is a place for feature lists on your site, especially with more enterprise-focused products (those customers will often evaluate your product with their own list of features that they require) but that’s not for your landing page – try the page. Icons can nicely compliment the features you list here, and give an even quicker impression of the benefits you’re offering to customers (see the Geckoboard example above). Descriptions should still be kept brief, but linking through to a product page for a more detailed overview of the features can also be helpful.5.
Call to action (CTA)This can include a signup form, or simply a button, and is the primary goal of the landing page. A key goal here is to have a single call to action on the page. Multiple CTAs make it less clear for the visitor and risk clouding the powerful message you’re conveying. Multiple options = lower conversion. Example: Freshbooks Freshbooks displays a simple, clear CTA. Notice how explicitly it describes what the user is doing in clicking the button – they are getting a free trial for 30 days.
This reduces any uncertainty. Higher confidence = higher click rate. Example: Zenpayroll Zenpayroll includes a short form in their CTA. This means that they can shorten the signup flow, and get the user registered and using the software much more quickly, decreasing the chance of drop-off somewhere in the signup journey. What did we learn?.
Be explicit with the copy. Make sure that a visitor knows what they’re doing when they click the button, to reduce the rate of “accidental” clicks.
You want users to click with full intention. Put it where the user expects. Unbounce have written many great on this, as well as other CTA optimization tips.
For example, using “ my” instead of “ your” (i.e. “Start my free trial”) converted 90% higher for them!. The vast majority of CTA buttons in the landing pages we looked at are green.6. Social proofThis is really important in giving the visitor that extra piece of confidence required for them to vote with their mouse pointer and sign up to your service. There’s no more powerful persuasion tool than personal recommendation, from real people. If visitors can see that others are successfully using your product, they’re much more likely to come onboard themselves. Example: Docusign Docusign goes the extra mile with the social proof on their site, by including video content to accompany the testimonial. Video is far more engaging for users than text content, and seeing real people discuss the product would likely have a big impact on the confidence of the user when it comes to buying the product.
Example: ChartMogul (yep, that’s us) At ChartMogul, we wanted to really leverage the positive feedback for the product we were receiving in social media, so we built a scrolling carousel of real tweets. This truly reinforces that real people are getting real value from the product. What did we learn?. Showing real people, with real profiles has become key in a world where some companies actually create false social proof.
Placing social proof at the point on the page where the user is making a decision about purchasing (or registering) is a good tactic in giving them that last reassurance they need to commit. Link your social proof to larger case studies or video. This will further boost users’ confidence in the product.Other Findings Attention RatioAs always, simplicity is king. The challenge with so many enterprise business websites is in distilling down what are hugely complex products and solutions into something that the user can interpret and evaluate in just a few seconds. Attention Ratio is a representation of how many links the user has the option to click on your landing page vs. The primary conversion goal (i.e. A trial sign-up). Whilst you’re never going to achieve the holy grail of a 1:1 ratio on your main company landing page, you should remember that every link the user can click other than the signup CTA is giving them a “way out” of converting.
Read about the concept of Attention Ratio on the – and then take a look at your landing page. What’s the attention ratio there? Page LengthThe length (or height) of a landing page has a large impact on how the user behaves on the page. If the user needs to scroll a certain amount to see some critical information, it’s likely that you’ll lose a certain proportion of visitors before they read it. However, you shouldn’t dismiss scrolling as a bad thing – research suggests that scrolling has become a natural interaction on the web that users almost instinctively take when they want to read more on a certain topic. So then the question here is more about the layout of information, such that the things that are really important for the user to see are positioned higher up, with little to no scrolling.
How To Build A Saas Website
The landing pages we analyzed were a variety of lengths. At the extreme end, there is Mailchimp, which requires almost no scrolling at all and offers a level of simplicity that almost no other SaaS company matches: Source: mailchimp.comWhilst Mailchimp gives us a glimpse of a landing page that delivers a clear, concise message to visitors, most landing pages required around 4 full page scrolls to reach the end. You can see an overview of the length of all pages in the diagram below: Animation & background videoTechnology and connectivity is reaching a point where websites are able to display high-resolution, full-page video embedded in the page. Whilst the rise of full-width retina images have led to higher engagement and conversions in web pages, it’s not yet clear whether full-width auto-playing video background takes this improvement even further. The folks at LeadPages recently introduced a, hinting at great conversion rates. Although it’s likely very specific to the actual video content shown:“One of the reasons why this works so well is that the video being used is aspirational and makes people feel really good.” – Jeff Wenberg, LeadpagesWe’re testing a background video variant of the, but it’s too early yet to pull any meaningful results. Sacred 2 trainer 2.40. Share this postNEW on: What we learned analyzing 40+ top landing pages — ChartMogul (@ChartMogul)Share article.