What are the best practices for SaaS web design?
That’s the question I set out to answer after stumbling on SaaS site, after SaaS site, after SaaS site… That looked pretty much the same:
I’m going to research this more but it really feels like most SaaS sites look the same.
There’s clear benefits here:
Trust / Usability / Speed
But it drops the ball when it comes to:
🎤 Establishing a brand voice
❤️ Showcasing your culture
🚀 Immediate differentiation
— Ross Simmonds (@TheCoolestCool) January 9, 2019
Understanding best practices can be a great way for web designers (and SaaS founders) to think about their own brand presence. It’s an approach Andy Crestodina took a few years back when analyzing web standards for the top 50 marketing sites. It can also help designers, strategists and founders plan their design initiatives in the sense of wireframes and identifying what key design elements need to be on their homepage.
The Nielsen / Norman Group published one of the first pieces of documentation around Web Design Standards and defined three levels of standardization:
While I originally had a lot of frustration with the lookalike SaaS brands; the further I looked at the reasoning for following design standards and best practices the more I understood the benefit of consistency. Some of the benefits that come with following design web standards include:
All of these things can make the user experience smoother and more intuitive.
But there’s a lot of things in the SaaS space that seem to be replicated without any good reason.
So to better understand SaaS Web Design Standards we took the top 100 sites from SaaS1000.com in January 2019, to create a data set that showed us what things had become standards, what were conventional and what was a coin flip.
Here’s a closer look at the SaaS design best practices happening in 2019:
The placement of the logo on the top left of a website is a common design best practice. It’s an approach that most designers leverage inside of SaaS and outside of SaaS. It’s a logical choice recognizing that most people in North America view a site from left to right.
But sometimes (in our research; once) a designer decides to place the logo somewhere else. While we didn’t see any sites place their logo on the right; we did find DataDog who placed their logo directly in the middle of their site:
In a logo research study, the folks at Venngage found that 35% of people preferred text dominant and horizontal style logos for tech companies.
We live in a mobile world.
Responsive sites are a great way to ensure you don’t deliver broken experiences for people on a desktop or visiting on mobile.
In 2018, 52.2% of all worldwide online traffic was generated through mobile phones. That’s why it’s so great to see that most SaaS companies are investing in a responsive design rather than solely building for desktop.
Whether it was a demo or a case study in the form of video on the homepage for these sites more than half of these sites took the approach. The majority of SaaS companies leverage video but not by a significant margin to make it considered a best practice.
The legacy cost expectations that come with the production of a high-quality video may still be holding brands back from this investment. Illustrated product explainers surged in popularity a few years ago and become a popular service bought through sites like Fiverr and Upwork. Today, the demand for these types of videos is still quite high (more than 14,800 searches for explainer videos per month) yet only a little over half SaaS companies use them.
There’s a clear best practice in the SaaS community that your call to action driving people to do something needs to be above the fold. More than 90% of all sites that were included in this SaaS Design research had a button or call to action above the fold.
Across all of these sites there was very little consistency in where the call to action was placed. Some of them were placed in the far left of the web page, some were drop dead in the middle and others were far off to the right. The best practice when it comes to placement of the CTA seems to be a complete coin flip amongst SaaS companies.
When analyzing the various call to actions there was a clear trend towards green and orange buttons.
The sites we reviewed that have a call to action typically have a clear thing that they want people to do. The majority of them use action-oriented language (%%) and push the visitor to do something that pushes them further in the funnel. Some variations include:
The most common words + phrases within the call to actions tended to be: Free, Demo, Get, Started, Try X and Request… Some of these words showed up together (ie. Free Demo or Try X For Free) but using a combination of these words tend to show up most in SaaS primary CTAs.
It’s not common to see a site that has a black background in SaaS:
Most of the sites (92% of them) used white or light colors as the primary background for their sites.
The placement of real people on the homepage was more than half. In comparison to the illustrations, the placement of real people on the homepage was usually NOT found in the main section of the site. Sometimes they appeared directly above the fold like the image above but most times it was further down the page in the form of a testimonial, case study or reference to a feature.
It was also great to see quite a bit of diversity in the image selection. The only thing missing was seeing a similar level of diversity on those “Our Team” pages but that’s a topic for another time.
The rise of custom illustrations have swept the SaaS community by storm. It’s something that for the last 3 years has been popping up on site after site after site. Our professional opinion is that this is a trend but it’s only a few percentage points off from becoming a best practice.
Here’s a snapshot of some of the sites and their illustrations:
This is an interesting trend.
What do you think: Does this approach to design help startups stand out or does it result in them blending in? Does it matter? Does it give off a sense of trust?
The rise of live chat and conversational marketing has been a fascinating trend to watch. As this idea of embracing real time conversations with prospects (or using bots) continues to catch traction it’s clearly becoming popular amongst B2B SaaS companies.
Our research found that nearly 50% of SaaS sites have a chat box in the corner ready to be engaged with. Across most of these sites the services being used were Intercom or Drift.
Experimenting with design is a great way to uncover something before the rest of the industry. That said, the risk of design experimentation is that users could find the entire experience broken and poorly created. On the flipside, doing everything to the standards that are already being used across SaaS websites around the world you might very easily blend in.
Here’s a list of things to do if you want a site that isn’t like everyone else:
Does your site currently meet these standards? Did anything here surprise you?
It’s safe to say that no one had a bigger January than Marie Kondo. After the success of her show on Netflix, the decluttering queen, and author of “The Life-Changing Magic of Tidying Up” is all over the place. via GIPHY There’s nonstop chatter about her KonMari method on Twitter … there’s a new Marie… Read more »
[Updated Feb 2019] In this post, I’m going to share with you my 3-step process for identifying your target audience and creating data-backed marketing personas. Let’s get started! 🚀 When it comes to B2B marketing, understanding who you’re talking to (and what they’re thinking) is key to getting the results you’re looking for. Here’s exactly… Read more »