10 Powerful Principles for SaaS Design

Are you developing a SaaS product?

If you are, then visit the website of Canva, a leading SaaS product for a do-it-yourself (DIY) graphic design company.

When you launch your SaaS business, you will not only have to compete with similar-sized software vendors but more than likely you will have to compete with market-leading SaaS vendors as well.

Your SaaS design could make or break your business. In this guide, I intend to outline the 10 most powerful principles for SaaS design that you need to be aware of.

Contents

Website global navigation – the 1st principle
Frictionless sign-up – the 2nd principle
Focus on your target audience – the 3rd principle
Make onboarding simple – the 4th principle
Simple SaaS UI design –  the 5th principle:
Dynamic sorting feature – the 6th principle:
Present visual data – the 7th principle:
Connect with your buyer persona – the 8th principle:
Beautiful SaaS design – the 9th principle:
Easily available help – the 10th principle:

Website global navigation – the 1st principle

When it comes to selling your SaaS product, you will likely offer several features to your clients. These could include core functional tools, analytics, account management etc. These need to be central to your website and not hidden away.

The 1st principle to a good SaaS design is to provide easy website navigation to your clients. Remember that you are offering all your products via the Internet. Therefore your website is really the only place where you can create a good image for your prospective clients.

Your dashboard on your landing page should contain links to all your main features and tools. However, if you have too many tools and features to offer the dashboard can look very crowded. Read more about “SaaS Interface Design: Trends, & Best Practices for Designing a SaaS UI”.

Consider vertical and horizontal menu bars where you can instead provide these additional links. The objective is to provide as many features in the dashboard as possible while at the same timing avoiding a crowded dashboard.

Following are examples of SaaS products that provide great website global navigation:

  • Freshbooks: They provide accounting software to make it easy to run small businesses.
  • Hootsuite: The social media management system available as SaaS.
  • Flow: The project and task management SaaS product.

 

Download Our Project Specification Template

Frictionless sign-up – the 2nd principle

Start by asking yourself: would you feel comfortable to fill out a huge sign-up form when you only want to try an online product? The likelihood is that you probably wouldn’t, and that‘s the friction I am talking about.

Many businesses feel tempted to gather as much information about their clients as possible upfront. However, with SaaS, you have many other touchpoints as customers use the service. These can be used in the future to collect information, meaning that you don’t have to collect all at the beginning.

Collect only essential information during sign-up. If you are offering a free trial for your SaaS product, the likelihood is that the only information you will need is the email ID of your client. Collect that, and leave the rest for the future. Read more about the importance of a simple sign-up form in “How To Build A Great SaaS Marketing Strategy?”.

Every additional field in the sign-up process increases friction for your client. If you are offering a free trial, consider asking for credit card details but remember this might put some people off.

Also, consider a good ’call-to-action’ (CTA) button for your landing page. This will help get them to the sign-up page.

You need to display your CTA button prominently in your landing page and remove any distraction that may prevent the visitor from clicking on it. Also, run A/B testing your CTA button.

Another great tip for SaaS design is to display your social proof and customer stories in your SaaS landing page in a manner that doesn‘t interfere with your main objective, i.e. CTA.

A good example of a SaaS website landing page following this principle is InVision, the digital product design platform. Head to their site and see how they have clarified the free sign-up process upfront, thereby letting visitors know that they needn‘t pay and therefore increasing the chance they will try the trial.

Focus on your target audience – the 3rd principle

Your SaaS product would appeal to everybody. As I had explained in “How To Build A Great SaaS Marketing Strategy?”, you are building your product for a target audience. Focus on them only.

However, don‘t confuse your target audience with a market segment, for e.g. small business. You can certainly have a certain market segment as your target audience, but your audience doesn‘t necessarily have to be so confined.

The key is to focus on what your SaaS product offers. Let‘s take the example of MailChimp. When you see their landing page, you will find only automated marketing. If a small business needs automated marketing, they can buy MailChimp, however, a larger business can also use it for email marketing automation.

MailChimp targets businesses that want marketing automation, and their landing page focuses on that only. Look at the landing page again, and see how the CTA button is placed prominently above the field. They only want you to sign-up for free. Their page offers no other distraction.

Make onboarding simple – the 4th principle

Your clients will consider buying from you for either of the two following reasons:

  1. Their current tool doesn‘t work the way want;
  2. They are reimagining their business and hence need new tools.

If your product onboarding is difficult, they will not consider buying from you. SaaS UX design must make onboarding simple.

Cloud-based team collaboration platform Slack is a great example of how to keep onboarding simple. The platform makes it a simple process, even when a new user wants to set up an entire team.

A new user can easily sign-up, create teams and channels, and set-up integrations etc. Even adding new team members is easy, with the company providing you with step-by-step onboarding instructions. Read more about how Slack offers a simple onboarding in “SaaS UX Bible: 7 Must-Have User Experience Principles From The Experts At InVision”.

Simple SaaS UI design –  the 5th principle:

Creating a simple UI design is another key example of SaaS design best practices. Most SaaS products are complex. This naturally leads to complexity in the UI, but you must avoid this pitfall.

You need to think through the UI design thoroughly so that you can hide the technical complexity of the features behind it and your product. The user must not feel lost or frustrated at any point.

Two good examples of companies that achieved this are the following:

Read How We Helped a Marketing Company to Build a Back-Office Custom Ads Dashboard

  • Quip: The content collaboration platform, a part of Salesforce.com, has a very simple UI.
  • Campaign Monitor: The email marketing tool that allows users to create elegant emails in simple steps. It also enables the tracking and management of a marketing campaign.

 

Dynamic sorting feature – the 6th principle:

To the users of any SaaS product, it is essentially a web app. Every web app deals with data and users need to slice and dice data in various ways depending on their requirements, which keep changing. If you only allow the fixed sorting capability to your clients then your product is not likely to work for them.

Consequently, you need to provide a dynamic sorting feature when you design software as a service website. This will enable users to limit their search results to the relevant data sets.

A good example of a SaaS that has achieved this is BuzzSumo. This tool allows users to research the popularity of content by topic by the website. For e.g., you can analyze social shares in a specified time-period across different websites. You can then sort this data by ’Facebook engagements‘, ’Twitter shares‘ and similar parameters.

The tool provides additional ‘panes’ where you can filter by date, language etc. The data in the main screen can be sorted using a horizontal panel where social share parameters are listed. Hover your cursor over any of the social share parameters and you see an option to sort by that.

Present visual data – the 7th principle:

The best way to understand the importance of clearly presenting visual data to your customers is to visit SEMrush. People use this tool to analyze organic and paid traffic that visits their websites. They can analyze many other parameters such as backlinks, the effectiveness of their keyword usage, etc.

As you would expect from a tool used to analyze SEO ranking and planning improvement measures, it has a massive amount of data. To help with this, it shows a very helpful summary of the data in the dashboard.

The dashboard also provides clear charts representing parameters such as organic traffic, backlinks etc. You can refine searches down to see data for different parameters, and this will allow you to visit different pages for the respective parameters.

When you design a SaaS platform, think through how you need to display the summary of all relevant data items on one page. You can then link in additional data sets, giving users the ability to users to dig down further.

Connect with your buyer persona – the 8th principle:

In my article “How to Build Your SaaS Pricing Model” I explained the importance of creating a buyer persona for your SaaS product. This is required to help you visualize your clients, for e.g. what do they do, where do they get the answers to their professional questions, etc.

At this stage, building your SaaS product, you should revisit your buyer persona document once again. Your product must connect with your buyer persona. For e.g., if you are building a SaaS product for a non-technical buyer, avoid technical jargon in your website.

WordPress.com is a good example of a SaaS company that connects with its users. Remember that WordPress.com is different from WordPress.org, where you need to find a hosting provider, get a suitable hosting plan, install ’Secure Sockets Layer‘ (SSL) in your domain, install and configure WordPress content management system (CMS) etc.

For someone with limited technical know-how, building a website from scratch and coding everything yourself is not a good idea. While WordPress.org is easier, even that is difficult for a non-technical person. Do you know detailed answers for questions such as “how do I install SSL?”. If not, don’t attempt it, and hire expert WordPress developers to help you build a functional and visually appealing website.

WordPress.com enables even the most non-technical of people to set up a website, which is then managed by WordPress.com. Users pick their domain name, choose a suitable theme to give the website a look and feel to their liking, and simply enter their data. The site allows for a step by step construction of basic websites.

When you visit WordPress.com and look at their UI and forms, you can see how they connect to their non-technical audience. The forms have no jargon and present everything to their user in terms they understand, that is simple templates which already have example texts, pictures etc.

I give this as an example to make you see that your SaaS interface design needs to designed around your potential users.

Beautiful SaaS design – the 9th principle:

Market-leading SaaS websites spend thousands of hours on their design layout. It is safe to say that a lot of thought has gone into their design. You need to engage high-quality professional designers to make your SaaS website beautiful, without which you can’t succeed in this highly competitive landscape.

The famous online cloud back-up and synchronization SaaS platform Dropbox is an excellent case study. Its website is a thing of beauty. Everything from the sign-up form, horizontal menu, to the sections explaining different features are all aesthetically pleasing.

The one-page presentation of the website, the sticky menu, beautiful CTA buttons, and embedded videos all make it clear why users are attracted to this platform. Dropbox is a great example of how to design a SaaS service.

Easily available help – the 10th principle:

Your clients will most likely search for SaaS products over the internet and find you. They will most likely want to try a free trial and test the product before they commit. If they like it then they will sign-up for the paid version on their own without the need for a phone call from your sales team.

As a logical corollary, when they have a ’How-to‘ question about the product, they will first look for online help, they will look for the answer on their own.

Millennial users nearly always prefer to find out answers themselves without contacting your customer support helpdesk. Older users may require a phone-based sales team. Read more about it in “Customer, Serve Thy Self: New Study Reveals Millennials’ Desire for Self Service, Digital Interaction to Change Customer Service Forever”.

You need to have an extensive help database easily available for your clients. Your website should prominently display it, making it easy for your clients to find it. The help documentation should be well-structured.

Note: The 10th principle doesn‘t mean that you can compromise on your customer-support function. As I had explained in “How To Build A Great SaaS Marketing Strategy?”, your customer service is part of creating a great product.

Download Our Project Specification Template

Aran Davies

Blockchain Expert | Developer | Writer | Photographer
Aran Davies

Latest posts by Aran Davies (see all)