5 Best SaaS Websites with Outstanding Design (with their shortcomings)

You probably experienced designer's block more than a hundred times as a web designer. 

The key to overcoming it is to look for design inspirations outside.

To come up with design ideas inspired by the works in your industry is more than necessary to break the cycle of feeling stuck. 

In the SaaS ecosystem, website design is a bit more intricate than companies selling tangible products. At the end of the day, you should aim to present the value of your digital product as clearly as you can to convert visitors into leads.

The creation of any website requires an understanding of the future users’ needs, well-thought-out content, web design, and testing, but the task is particularly tricky for software as a service (SaaS) companies. The goods they sell are rather abstract, and potential customers can neither see the goods in detail at a store nor talk face-to-face with a salesperson. 

- Alexandra Moroz

But how can you create the best SaaS website design with this in mind?  

Let's take a look at its key features.

What Makes a SaaS Website Good?

A good design for your SaaS website consists of two main elements: functionality plus visual appeal. 

You can think of them as two pieces of a puzzle perfectly completing each other. 

However, you should be aware that...

Function comes before the Looks

Even if you create the most stunning website that your prospective customers cannot take their eyes off, it doesn't mean they will pay for your product.

Firstly, think about what your pages do, not what they look like. Let your design flow from the services which they will provide to your users, rather than from some overarching idea of what you want pages to look like. Let form follow function, rather than trying to take a particular design and make it “work.”

-John Allsopp

Content is Like Water: Responsive Design

Imagine the devices your visitors view your website as your canvas. 

Think of how many different devices and screen sizes are there around you. You probably have at least three screens within arm's reach: your mobile phone, your laptop, and your smart TV. 

Your design should, in the full sense of the word, respond to those various canvases/screens.

Or a better analogy comes from Josh Clark:

So, engage with this approach and steal your mobile visitors' hearts. 

Speed Matters

None of us can stand a web page loading slower than molasses.

If you don't have time, don't expect your visitors to have time. It just gets them down and makes them leave your website and product behind to find a better one.

Backlinko's analysis shows that, on average, a web page is fully loaded in 10.3 seconds on a desktop. On mobile devices, it takes 87.84% longer to load. 

Then, don't hesitate to invest in your web host to enhance the user experience. 

Ed Shelley’s Golden Rules of Web Design

Ed Shelley has a great article listing all the ingredients to cook the "great SaaS website," and I summarized the ingredients of it for you:

Navigation

The navigation bar on the top of your website is the first step of your user's journey to jump onto the other sections. 

So keep it simple and consider fixing it when scrolled down. 

Page length & scrolling

Users tend to scroll down, especially when they feel lost on your website, but it is totally up to you how long you want your landing page.

There exist both good and bad examples of short and long landing pages.

The Hero

It is the display window of your product. Most SaaS websites prefer using pictures of people as a hero image to grab attention, and it works. 

Other options include embedding a video showcasing your product or bragging about your top-tier customers. 

The Headline

It is the copy to accompany and support your hero. The best headline tells the users what they can do with your product rather than telling what your product can do. 

The Call To Action (CTA)

It is the button that turns your visitors into customers. It is worth considering how you communicate it, which color you use and where it is located. Most of the action buttons are:

• less than five words
• blue or green buttons
• sticky, which means they are always on the screen

Adding a simple sign-up form to your CTA would help collect your visitors' e-mails. It automatically turns them into leads and minimizes the friction in the later steps. 

Social Proof

Basically, it is turning the lens of your visitors to the outer world to prove your product's value. 

In other words, it is handing the mike to your customers to tell about you.

It can be testimonial quotes, logos of users, or reports/statistics highlighting your product. 

Video 

Seeing something in motion makes anyone more involved than reading a bunch of copies.

Embed video testimonials or product demos on your landing page and background videos instead of a hero image. 

Beauty is NOT in the eyes of the beholder (at least in SaaS web design)

Well, I said function comes before the looks. But I can't deny we live in the age of looks and impressions matter.

I wouldn't buy a birthday cake that looks horrible just because it tastes good and I can stick candles on it. 

So, make your website shine with clean lines and a simple design. 

For example, follow the 60-30-10 ratio for your color palette. That's to say, use one color in 60% of your design, and another in 30%, and choose a color to contrast with the others in 10% of your website. 

So far, so good? 

To make it more concrete, here are the design examples for your SaaS website that I fancy, except for some elements looking a bit off the beam. 

5 Satisfying Website Designs from SaaS Businesses 

1- Figma

What Figma does well

I loved the doodles and the animated GIFs, which probably comply with their buyer personas who are designers. 

And it is a big plus to use them instead of static images to grab more attention.

The call to action button is fixed in the upper right corner of the page. It is black, and it creates a contrast with the white background. There is no chance you can overlook it. 

What Figma does bad

Well, the only drawback seems like the lack of a chat button.  

It is a way of turning visitors into leads, and Figma misses this opportunity. 

Also, the navigation panel disappears when you scroll down, which is kind of a bummer. 

2- Zuora

What Zuora does well

Zuora includes a section for the industries it serves just below the hero image. Directing the visitors to their specific field at the very beginning raises the chances of converting them into customers. 

The colored logos of customer brands follow it. They are visible enough to convince the visitor and prove its product value. 

What Zuora does bad

Unfortunately, it is a bit slow. It took a bit more time to load the page entirely than the other pages I went over.

3- Wistia

What Wistia does well

The catchy and rhyming headline is simply peerless. It clearly and beautifully introduces the product, which is pretty hard to achieve for SaaS. 

The section on product features contributes much to this aim.

What Wistia does bad

The CTA button gets out of sight the minute you scroll down, and it's not good, you know...

4- Zendesk

What Zendesk does well

That chromatic color scheme in the headline impressed me a lot... If this is not the epitome of simple and delicate design, then what's it?

How about the chat button on the lower right corner? It is always there for me to help me and turn me into a lead.

What Zendesk does bad

It would be perfect if there were more action going on on the website. I mean, a short video would work.

5- Shopify

What Shopify does well

Shopify knows how to present compelling stories.

Both verbally and visually.

The copy is full of "you"s and shows how YOU can benefit from the product.

And the testimonial video is a masterpiece with its quality and storyline. 

What Shopify does bad

The only problem with the website can be the length of the headline. It seems a bit long for being catchy enough.