I Studied 90+ SaaS Sites and This Is What I Found About UX/UI Design

Do you know the principles of SaaS web design? Learn some of the best practices for SaaS web success.
· 8 min read

What would you consider as the bestpractices for any SaaS web design?

After stumbling on several SaaS websites that all had almost similar looks,I set out to answer this question.

It is important for SaaS founders and web designers to understand the bestpractices for SaaS web design. This will be very helpful to them when it comesto establishing their own brand identity and presence. It is a tried and testedapproach. Andy Crestodina used this approach to analyze the web standardsused by the top 50 marketing websites.

However, this approach is not helpful toSaaS founders and web designers only. Founders and strategists will also findit quite handy in identifying key design elements for the homepage whenplanning their design initiatives.

A publication by the Nielsen/ Norman Group identified three levels of website standardization. It is among the first documented Web Design Standards. The three levels are:

  • Standard: More than 80% of websites using the same approach.
  • Convention: Between 50% to 79%  of websites using thesame approach.
  • Confusion: Less than 49% of websites using the same approach.

Initially,I found the almost similar SaaS websites quite frustrating. However, I lookeddeeper at the reasons why these brands follow best practices and designstandards. It became clearer how these brands stood to benefit from beingconsistent. Some of the benefits these SaaS brands enjoyed by keeping in linewith design web standards included

  • There is a sense of trust and security when site visitors see common design elements.
  • It helped site visitors to find their way around the website and know where to gowhen looking for something. For example, visitors looking to go back to thehomepage can simply click on the logo.
  • It eliminatesthe uncertainty brought about by new design elements, buttons, and icons.
  • There are zero chances of missing the key elements such as “Get a demo.”

These things make it easy for users to have a more intuitive, smootherexperience.

It does not, however, mean that the replication is justified. There areseveral things when it comes to SaaS web design that does not have to bereplicated.

I did an analysis of the January 2019 top 100 websitesin order to have a better understanding of Saas web design standards. Iobtained the list of the websites from SaaS1000.com. Ilooked at the data set to see what had become standard, conventional, or a coinflip. Here are the 2019 best SaaS web design practices.

1. Brands Prefer The Logo On The Left Side, Always

One of the common principles for SaaS web design to have the logo placed onthe top left side of the website. Web designers, both inside and outside ofSaaS, leverage this approach. A logical explanation for this approach is thatmost North Americans look at a website from left to right.

There are however instances when designers prefer the logo placement to besomewhere else. There are rarely any sites with the logo placed on the rightside. However, DataDog’s logo placement is right in the middle of the website.

A study on logos by Venngage revealed 35% ofweb visitors for tech companies liked it better if the logo washorizontally-styled and text dominant.

2. Mobile Responsiveness Is A Common Feature For Most SaaS Websites

Thew orld is now mobile. According to statistics, 52.2% of the online traffic globally in2018 was generated from mobile devices. That is why having a responsive design is a priorityfor most SaaS companies now. They are no longer building sites solely fordesktops. If you don’t want to deliver broken experiences for people visitingyour website on a mobile device, then it is important to have a responsivesite. A mobile responsive site helps to drive the SaaS web conversion rate.

3. Less Than 55% Of Websites Have Video Content

More than half of websites have adopted video content on their homepages. These videos are eitherproduct demos or just a case study. However, while most SaaS brands leveragevideo content, the content is not of significant margins that would warranty being considered as a best practice for SaaS web design.

What could be holding back most brands from investing in video content fortheir websites is the legacy cost expectations associated with producinghigh-quality videos. The popularity of illustrated video explainers grew a fewyears back. It became a popular service that brands paid for from freelancesites such as Upwork and Fiverr. The demand for such video content is yet to godown. In fact, statistics show that there are an upward of 14,800 searches for explainer videos every month. In spite of this, only about 42% of SaaS companies use such videos on their sites.

4. You Will Always Find The Primary Call-To-Action (CTA) Above The Fold

One of the clearest best practices among SaaS brands is to place the CTAasking people to perform a given action right above the fold. Research revealedthat 90% of websites had the CTA button above the fold.

5. The Placement Of The CTA Is Inconsistent

The placement of a site’s CTA varied from site to site. There was a lot ofinconsistency across all the websites when it came to the placement of the CTA.While some websites had the CTA on the far left of the page, others put indirectly in the middle of the page while some put it in the far right. It is acoin flip regarding SaaS companies’ best practices as far as the call-to-actionplacement is concerned.

What are the preferred CTA button colors for SaaScompanies?

An analysis of different CTAs revealed a clear trend of brands leaningtowards orange and green CTA buttons. The blue color came in at a close third.

6. The Most Popular CTA Is A Free Demo

The websites I analyzed that had a CTA typically had a specific action they wantedsite visitors to perform. The language used in a majority of them wasaction-oriented and urged the site visitor to perform an action that would takethem further into the funnel. Some of the variations I noticed included.

  • Schedule A Demo
  • Request A Demo
  • Get A Free Demo
  • Get (X) For Free
  • Get Started
  • Try (X)

Request, Try (X), Get Started, Get, Free, and Demo were some of the mostcommon words and phrases used in the CTAs. Some of them were used incombination, for example, Try (X) For Free or Get A Free Demo. Thesecombinations were mostly used in the primary CTAs by SaaS brands.

7. Using A Light Background Is Considered A Best Practice

Black backgrounds are not an uncommon sight in SaaS sites.

However, 92% of websites use light or white colors as the primary sitebackground.

8. Only 56% Of SaaS Websites Use Real People

More than half (56%) of SaaS websites placed real people on theirhomepages. Compared to illustrations, real people were not usually placed inthe main section of the website. At times, the placement was done just abovethe fold. However, in most cases, the placement was done further down the page.They appeared in case studies, testimonials, or as a feature reference.

Most websites practiced diversity when it came to image selection. Yet thesame level of diversification was lacking on most pages for “Our Team.” We willlook at that at a different time.

8. At 70%, Custom Illustrations Are Quite Common

If there’s one thing that has completely taken the SaaS community by storm,it is the growth in popularity of custom illustrations. Several websites havetaken it up in the past 3 years. My opinion is that while it is a growingtrend, it is yet to be considered as a best practice.

See some of the custom illustrations for different brands below.

Do you think startups using this approach stand out? Or does it help them blend inwith the other established brands? Do you feel a sense of trust if a brand hasa customized illustration? Does it even matter to you?

9. 50% Of SaaS Companies Utilize A Live Chat Tool

It is fascinating to watch the rise of conversational marketing and the useof live chats. It is a trend that is also growing among brands, especially B2BSaaS brands. The idea behind live chats is to embrace having real-time conversations with prospective clients. Some brands use bots for this.

My analysis revealed that around half of SaaS websites have a chatbox for web visitors who want to engage the brand. Most of the sites used Drift or Intercom.

Does This Mean You Should Follow These Standards?

Are the above standards the best design tips for SaaS websites? Is that howto design a SaaS website? Well, that depends.

One of the best ways to discover something new before your competitors isto experiment with the designs. However, the risk with this experimentationapproach is that you may end up with a poorly created and broken userexperience. On the other hand, it will be very easy for you to blend in if youare using standards that have already been established for SaaS websites.

If you are looking to create a unique website that is different from everyone else, here are a few tips that might help:

  • Avoid using flat illustrations. The last thing your brand needs is an abstract representation.
  • Keep away yellow or dark orange buttons from your homepage.
  • Your value proposition should not be aligned to the left on the website.
  • Your logo should be placed either to the right of the website or in the middle.
  • A dark site background is preferable.

If your website in line with any of these standards? Let me know whichpiece of information presented here surprised you.

Let's Work

Let's Work

Let's Work

Let's Work

Get in touch
Send me your project details, the more info the better.
Proposal details
You’ll receive a full cost breakdown estimate & timeframe.
Get in touch
I’ll keep you updated about progress working together.
Have a project in mind?
Get a FREE project estimate in 24 hours. Let’s get to work.
Let's Get to Work
Let's start a conversation.
Yaay! Your information has been recieved and you will be contacted in the next 24h.
Looks like we're having trouble