How to Build a SaaS Wesbite with UX-First Mindset?

Design
Mailbox illustration
Stay up-to-date with latest blogs

UX insensivity can be the death of SaaS customer acquisation and retention. Even Webflow or Figma professionals helping these SaaS founders build a product that is fully functional and usable, sometimes dont achieve the results they would want. The ideal case scenario is that you create something that actually stands out, something that is completely conversion optimized and helps the software company to make more money.

Making a usability optimized website takes a lot of effort and deep diving into understanding your customer's minds. All SaaS founders have one primary goal of having a website that can help them sell more software. Without a good website you don't really have a SaaS company. That's because a convertible website plays a very critical role in communicating the value of your SaaS product.

As per our observation, all the highly-convertible SaaS websites have 4 things in common: 

  • A strong value proposition
  • They know that user is the hero
  • They get customers hands on the product
  • They embrace testing and experimentation

The next question arises: How to come up with a communication strategy for a landing page that can help you sell your software and the value it holds?

Well that depends on a couple of things: Sales strategies can be low-touch, mid-touch or high-touch and the target markets you're going after could be SMBs or mid market or an enterprise. The combination of these two factors will give you a certain set of parameters to know how you can communicate the value of your software and the type of website that you need.

Next, what does it take to sell your product all depends on the complexity. More complex products will need sales reps involved at some point in the sales process while simple products can go completely touchless.

Then comes the goal of your website. While selling it to an enterprise the goal of your SaaS website is going to be to generate anything for sales to follow up with and while targeting SMBs your website's role is going to be to generate product qualified leads and sign up users. 

Let's put our focus on the combination of target market and sales strategy that will be more conducive to a product-lead growth strategy. You’d ask, what kind of website cansupport that? How to make SaaS websites that convert?

Find your value proposition.

Three simple formulas that you can try to find an effective value proposition, let’s look at it through an example of an imaginary chat software that you’re selling:

  •  First formula is: what is it? Your chat software is similar to Intercom that reads “Simple, personal messaging for business businesses and their customers.”
  • Next, what does it do? Example goes: “ Have live conversations and send targeted messages to website visitors and users of your app.”
  • Lastly, what can you do with it? An example would be: “A new and better way to acquire, engage, and retain customers.” This is what it allows you to do. Makes it more inspirational.

One thing to remember here is that there's no right or wrong to do this. You have to try it out and see what your audience reacts to in a better way.

Some other elements of a killer value proposition are: 

  • Well defined target audience: Clearly articulate who your solution is for.
  • Specificity: If it can be applied to everyone else, it is not specific enough.
  • Unique: What sets you apart from your competitors?

So the number one factor in coming up with a website that converts is a message that resonates and to come up with that you have to know your customer. How many times have you heard a founder explain the product in the same way as his customers?

The answer is ZERO.

Yes, not a single time the founder has used exactly the same words as his customers to explain their product. At one point in time in a meeting the founder of Slack, Stewart Butterfield was asked “What is Slack?” and he started explaining “It's a next generation platform to streamline communication distribution in messages….” and then somebody in the room stood up and said “It replaces email inside your organization.” Wasn’t it a lot simpler? 

Lots of websites out there are driven by founder speak and you have to realize that and change it. The point here is, if you're not sure how to say it, ask your customers. You have to become customer centered and what you believe doesn't matter. Just put that aside because you have to change that founder-speak to customer-speak, and the only way to do that is to RESEARCH.

So how do you collect this feedback? Well, you can:

  • Run surveys
  • You can pick up the phone and talk to some customers
  • You can make it part of your onboarding so as soon as you sign up you can ask some questions and put that in a workflow.
  • You can run polls on those on the website
  • You can ask questions about specific points in their life cycle. You know when it's a lead and when they’re onboard. When they start using stickier features in your application, you can start asking certain things.

Remember to ask open-ended questions so you get rich answers. Don't make this a multiple choice type of questionnaire because that’s not going to give you the input you need to come up with effective messaging. 

Then look at user behaviors on the site and inside the app, this is gonna give you some super imperative insights. After that talk to your team and share the same insights, and use it to figure out your value proposition. Then, iterate.

The user is the hero: Help the user do their job! 

To do this there's a few things you should do: 

  • Speak to users, not the buyers. Your entire communication strategy needs to address the user straight up. This talk shouldn't be about ROI or the strategic reason why you should purchase it. It's just about how you can do your job better, how your tool can help the users do their job better and easier.
  • The other thing you can do to make it tangible and a good way to do this is you know the before and after or the old way or new way. The key thing is that you have to make the gap evident and you have to make sure it resonates. 
  • Another thing to consider is that you have to speak as a trusted friend who is trying to help and make your work and tasks easy. 
  • Show different use cases. If your application has specific use cases for different teams in the organization, different types of users or different solutions for different problems, you have to make sure you have content that addresses them in a consumable and understandable manner.  Regarding your content, you have to make sure it's truly helpful and follow a product-led growth strategy.
  • Another thing is that you have to structure the story coherently and a great place to do this is on the homepage. It shouldn't be left to common sense or opinions,  you have to know what to put on the site because only then the story has a structural flow in a logical way.

You could follow this structure to put your story on the homepage:

  • You overall value proposition
  • Show contrast: before and after the use of the product
  • Explain the problem that your software solves
  • Some highlights of the solution or ultimate benefits
  • Next step: Call to Action
  • Sprinkle some social proof here and there on the page
  • Additional resources, FAQs, and other useful educational materia

Get users' hands on the product. Everything else comes after that. 

This is your ultimate conversion point with use of tools like demo, trail, or freemium sign ups

Here are some formulas you can try:

  • Use social proof: Put a number of companies on board. Make sure you put recognizable logos and some impressive testimonials.
  • Recap of the benefit: The user has gone through your site, read about you, about the solution.You have a set of bullet points recapping all the key benefits that may be interesting to the users. After that, you have to ask them to sign-up for free or opt for a free trial
  • “Just get started”: Give a brief introductory paragraph and some help text to make sure that the form is simple and easy to follow
  • In-line sign up: With this you don't even have to go to separate pages, just enter your email and get started.
  • Just plainly put the form on the page.

How do you make sure that you’re able to get the users’ hand on the product?

The answer is, killer friction points:

  • Design
  • User flow

Design: What’s the role of good design

Beautiful makes you look trustworthy, notable and tolerant until you are done selling your product. 

  • Prototypicality: Follow conventions, designs, components that users are already familiar with. Common conventions like menus at the top, footer at the bottom, etc.
  • Visual complexity: Simpler in the eyes of customers is more beautiful. So don't try to clutter everything with background video, emotions and fill every pixel with some kind of design. Also, whitespace works really well because it highlights the area that you want your customers to focus on, so make sure you’re on top of that.
  • Navigation bar is another critical thing to consider especially in a product-led growth kind of strategy. Typically what is observed is that the more items on navigation, the lower the conversions because more leads to confusion in the customer’s mind and a few of them just give them focus on tasks. 
  • Limit your primary call to action to just one, that's the absolute best and then concise language. Don't go into long run sentences, just use simple simple words. Make it crisp, short and snappy.

What do you want your users to do when landing on your site?

Plan how your user will discover how your product solves his problem and want to try it. User flow is a series of steps that you want the user to follow once they land on your website.

An example of user flow process could be:

  • Home page
  • Product tour
  • Pricing 
  • Free trial
  • Onboarding


You have to keep the user focused on the next step always. Towards the bottom of the page always put the next step, never ever leave it to the user to decide what to do next.

Embrace testing and experimentation as a culture

This could be seen from two approaches mainly: Radical vs Iterative

Radical testing: This is a complete overhaul of the site, page, or funnel. With radical redesigns we are typically not looking to optimize or make incremental changes. You are not isolating one variable and testing on it; you’re changing multiple variables at once. Something major is not working or is broken and it needs to be fixed. 

Iterative testing: The other option is iterative testing, which uses data-driven insights from quantitative and qualitative research to isolate specific test hypotheses. With one specific hypothesis being tested in isolation, we can definitively prove or disprove whether the variation is improving performance.

Here are some things you should always be monitoring and testing: (not a comprehensive list)

  • Homepage value proposition
  • Demo/Free trial/ Freemium sign up points
  • Calls to action to sign up
  • Homepage flow
  • Product tour flows
  • Pricing page
  • High traffic landing pages
  • Email subject lines/ body text

You always need to keep iterating because it’s a fact that you’re with evolving:

  • Markets
  • Products
  • Customers
  • Competition

Unless you use a method to gather data and pick up signals, and then use these to update your website, it will quickly become obsolete and conversion performance will suffer. And in my opinion, the best way to do it is actually to make small iterations. Always keep up with new functionality you're launching, new markets you're addressing, changing customer needs, competition landscape that you have to react to continually, and till the point you have a methodology to do this you can't fall behind.

Recap:

  • Get your value proposition right
  • Put your customers at the center. Ask them!
  • Your content’s purpose is to help your do their job
  • Focus on getting the user’s hands on your product
  • Eliminate friction points that impedes point number 4
  • Embrace testing and experimentation as culture
  • Continually monitor your site performance