Design strategies for SaaS websites

Yash Shah (00:02.216)

Perfect, we are live, I think we are live.

Yash Shah (00:13.578)

OK, so let's start this episode with awkward silences. OK, I'll start. I'll start. Hello and welcome to Momentum Office Hours. My name is Yash, and I'm joined by my co -founders, Harsh, Jay, and Kaushik, to discuss topic of the week, Design Strategies for SaaS Websites. Our goal is to provide you with actionable insights and practical strategies that you can apply to your own product.

Throughout the session, we encourage you to engage with us by asking questions and sharing your thoughts. This is a fantastic opportunity to learn from each other and give new insights that can help drive your SaaS initiatives forward. So let's get started. Jay, Harsh, Kaushik, how are we doing today? Yeah, doing great. Doing great? Yes. Awesome. Yeah, perfect. So today we have Kaushik, who will be helping us understand the design strategies for

that SaaS companies should use when they are designing the websites. And would love to start by understanding a little more on how do you think about, at the first principles level, if I'm running a SaaS company, how should I think about designing or building a website? What should be the first piece of information or insight that I need to start with when I'm

when I'm thinking about a website for a SaaS company. Who are you trying to build it for? That's the first thing that you need to add up. Because I think one better way to think of a website for a SaaS product is that your entire marketing budget that is going to go into is to make sure that it's all about bringing people to that one particular place that is the website. The audience that you have targeted during your marketing campaign.

the different cohorts that you have planned out, ideally should end up at this place where they're trying to validate your product over here. So first is understanding who is the audience that you're trying to cater to, who is the audience that you are trying to communicate to. That is the first step. Second thing is that you need to try to understand different aspects. So trying to understand what are the current pain points

Yash Shah (02:39.24)

target audience, what is their current way of doing that particular task and what is the process over there and what all industries and what all areas from which these audience come from who could be your potential users. understanding these factors would help you to structure your entire page.

it goes one after the other. So that's one of the very few important things that one needs to keep in mind. And more importantly, what is your call to action that you want them to do? Is your product still something that is in stealth mode? You want people to join the wait list, or is it something like the product is out, an MVP is out, so you want as many sign -ins and logins as possible?

Or you have a sales -led motion where you want people to go through a demo and then get into the product. And whatever you're indicating in your CTA should match with your entire design of arrangement of sections and all those things. So this is mostly.

Yash Shah (04:01.442)

That's great, Kaushik. But then there is one confusion that I have been seeing from lot of SaaS founders when talking with them is whether they should. And this is especially applicable for early stage SaaS, right? So they have their product ready, and they just started with their GTM channels. They are confused with having one -page website or to have multiple -page website, just like how it used to be and how it is so in some cases. There's some great examples of what themselves like even

Being even a very big company, are also utilizing one single page website. So just wanted to understand from your standpoint, what should one opt for? So I think the best way to, first of all, one thing that everyone needs to understand is that a website is not a one -time job. So it is something that you keep working upon, keep improving upon. to the people who have a single page website.

They would need to start adding more pages and start for better reach. based on the stage at which their product is, they have to keep updating the stage of their website. I would say that if you still don't have the product ready outside and still trying, but still you have started to sell it, which is a great way to start. think creating a single page website,

which allows users to join the waitlist, but at the same time you try to talk about the benefits that you're offering. And you should also try to talk about what is the current way of their users are doing that particular task and why is that painful and how your so -called product that is going to come up is going to solve that problem when it is out. basically your website is trying to sell and convincing them to join the waitlist.

Now, let's say the product is ready in an MVP stage. Then you start adding pages like industry pages, solutions pages. Then you would start, if it is something that you have decided that it will be free for some time until you get all the users in and then go later, right? Then at that particular point of time, you'll start adding pricing pages. And then once you have had your product feature pages, solution pages, industry pages, pricing pages,

Yash Shah (06:25.634)

then automatically you need to start writing blogs, you need to start creating resources such that you can rank better while someone is searching for you. So all these things come in face by face. I think answer to your question is that it's not this or that. It depends on what stage of the product you are in and then you keep building upon it, you keep improving.

Yeah, right. So even if there is a single page or multi -page website, right? So I think the most important thing that we can show on the website is the trust, right? Or credibility that users are coming, right? So what are the effective ways that we can show the trust on our website so that users can come to our website and they can see, is SaaS product, they have good customer, right? So what are the ways that we can show the trust or credibility?

Yeah, so one is obviously testimonials and how, what did the people, there's nothing like word of mouth, nothing better than someone who has used your product saying how did they feel using the product. But be more curated, more detailed with respect to how you are showcasing and designing the testimonial. So there are different ways in which testimonials could be designed. So one is there is like one section which has like five, six testimonials together. That is one way.

Another better way is that if there is a feature that you're talking about, let's say in the page, if you have a relevant testimonial or collect testimonial that is relevant to someone who has used that particular feature and how they have benefited from it and showcasing it next to that adds more value. There's more context to that. At the same time,

having much more, having badges, having social proofs, all these things add up more trust and build more value to it, to your product. there's one side of what people who have used it, they talk about how their experience was with respect to using the product. And then there is the set of social proofs, which are more like badges, stars, that you get it, that you showcase, you talk about.

Yash Shah (08:51.406)

That's an other way. And also, now these are direct ways of trust building. Then there are indirect ways of trust building that. So with respect to that, for example, having just detailed illustrations, are, just don't use images that are not of good quality, just use very good quality images. Just having a much more clean and simpler design, having much more, you know, good

the of the product, the UI of the product. You would see a trend in where lot of SaaS companies are showing directly their product images and UI inside the product itself. That also builds a lot of trust. Let's say if you are someone in a stage where we have encountered a lot of companies where they are in a stage where they still building their product.

but they want to showcase something like the product. They don't want to show any random illustrations. So try mock -ups. Try creating mock -ups that are closely related to what feature you're trying to talk about in the form of UI of what you're trying to build the product in, such that that could be a placeholder until the original image comes in and showcases. And also detailed product videos would also create good

It could be demos, or it could be simple, a few seconds of GIF, or a few seconds of animation, where you want to about one important way in which one important task of your product, and it's just simple of how someone can do that. If it's an invoice creator, how can someone create an invoice and download it? Or if it's a task list, how can someone create tasks and assign tasks?

know, schedule tasks. So something as simple as that. So these things are indirect ways of building trust. So it's just all these things come together and then creates that.

Yash Shah (10:59.736)

Sorry. So here's another chicken and egg question of sorts. What came first? Does design come first or content or copy come first? so should there be designs where, like in Figma, where if I'm the content writer, I go in and add the content? Or should there be content on a Google Drive that a designer should take and create designs and so

Okay, so I think the best way to think about this is when a designer is designing a website, especially someone who is designing it with, there is a flow that they are planning, right? From section one, section two, section three. And there's an intent with which they have designed that particular section. For example, the very promising flow that we have seen that have created good conversions is basically in hero section, we are talking about what is the product and product benefits.

And then we talk about who is it for. And just before that, we talk about what is the current way in which they're trying to do the task, and why is it painful, and how our product can make it better. Then who is it for, and what does it do, and who all are using it, and where can you get it? So that's where your CTA section everything comes in. So this is an order that we try to follow.

So this leads to better conversion, better understanding and flow. Now in this flow, I think this is where the content part comes in. I think the fastest way is the designer defining how much content needs to be there, how many word limit needs to be there with respect to each section. And then the content writers coming in and jumping in and trying to

right within those limits. And also there is one more aspect where you can start deciding about which are the pages that needs SEO, which are the pages that doesn't have SEO value, that are more about conveying the information. So I think the pages where that also becomes your home page, that also becomes your feature pages in those slides. So those pages, think the designer can go forward, design it quickly.

Yash Shah (13:24.576)

And the content writers can strictly add it to, like, fix to the word limit that has been mentioned by the designer and write within it. Whereas the other pages that has SEO value, that's where the content writer takes the front place. And he decides about how much work on that needs to be there, what sort of sections does he need that would help him.

with SEO and all those things that he can inform the designer before the design is done and then the designer design sections accordingly. for few pages this is one set of process for the other set of pages just to make sure that so the idea is that when you have a combination or when you have a hybrid of this work happens faster. So that's the idea and more effectively. yeah. Got it. So this is a nuanced answer. It's not

It's not like one thing always comes before the other. It has to be a collaboration instead of like a process or anything like that. ahead. Right. So yeah, Kausik, so I have one more doubt. In any strategy, so mostly the main focus of creative method is to convert to versioning, right? To form a website to sign up,

And then mostly CTA will be the main things that will help us to increase the conversion rate. So what are the, we can say the guidelines or things that we should follow to increase the conversion rate, respect to the CTA things. So one is trying to, so practically something that we have observed led to better conversions is having, repeating your CTA in some format or the other.

after every one and a half scroll is a good reminder for the user that they need to check it out. at the same time, there should be a valid reason supporting why they should. So the section should resemble that. At the same time, there should be some social proof that is supporting simultaneously. So every one and a half scroll, repeating the CTA is a good strategy. And also trying to showcase

Yash Shah (15:45.346)

you would be very surprised to know how many websites have very badly designed buttons, very so invisible, the contrast ratio is not right and it's just, it's there but someone cannot see it at a lower brightness, the button is almost invisible. So even though it's going to sound very, like very known thing, but just designing a button that has right contrast to the background of your website is very, very important because

So, at end of the day, the creation of the entire funnel is to make sure that users get converted. So, that is also one more important. Yeah, I mean, people often do the simple things poorly. Yeah. And so, like in baseball or cricket for that matter or even basketball.

the simple shots or the simple catches are the most difficult to take, right? Where the ball is really high or it's like a penalty or whatever. These are the most difficult because when you have the... And then sometimes we often end up doing complicated things really well. Yeah. It's always important to remind ourselves to make sure that our foundations are sort of in place. Yeah. Yeah. So that's very important. And you might have also seen this.

they would have given a CTA on the top navbar. But they would have used some reason the entire navbar wouldn't be fixed upon scroll. So I'm scrolling and then the navbar is lost on the top. So it's very minute details, but these things do matter. Otherwise, the whole point of putting the CTA in the navbar is lost if that's not done.

And even placing the, having a section just before the footer also helps. Traditionally, we have seen that people spend most amount of their time either in the top of top one and a half, two scrolls or at the bottom one and a half, two scrolls. So having a CTA section just before the footer section, highlighting the benefits, highlighting, you know, your product features to your user directly is also quite a good strategy to have. So yeah, these things would help.

Yash Shah (18:09.422)

So Kaushik, one real question. We have been talking about lots of design revamp of SaaS websites, right? Because at certain point of time, once a company is prioritizing more into GTM, and there could be other priorities as well. They're looking forward for a design revamp. What are the top mistakes to avoid while doing the revamp, if you could add to that? But what do you mean, Were our questions not real? These are genuine questions that we've had.

While you are remapping your website, thing you need to understand is for the sake of the remap, what is the motive that someone is trying to, there must be some metric that you are trying to achieve through this remap. So being clear about what is the metric that you are trying to achieve through this remap is very good.

So are you saying that my landing page conversion is not so great? So that's what I want to revamp. So then the thought process is that, I need to bring, I need to highlight my CTA as much as I can, talk about why someone should highlight, why someone should get into using my product. So all these things come into place. Or is the revamp more about saying that, no, no, no.

you'll be very surprised. There will be sometimes people say that the direct sign up or login is fine, I also want to know about, I want people to show my book demo is also a very prominent thing I want to showcase. So that again brings up a factor about how can you create sections that could convince them to go through that journey also.

Having a clarity about why you want to revamp or someone says that bringing more SEO value to my website is more important. So then you focus on how better can you design blogs, how better can you design the listing pages, how better can you design lead magnets, resource pages, and all these things come into play. So what is the reason for the revamp should be pretty clearly defined and then move ahead. I think.

Yash Shah (20:31.672)

Most often we are seeing revamps that says that my website doesn't look great. I want more. You see a lot of very quite highly animated websites out there. there's nothing wrong in having them. But at the same time, having an animation for the sake of having it is not a great option. So I think one, I think recently you were exploring, there are a lot of revamps, right?

Intercom recently had a revamp of their website. Then Linear, very long, it was traditionally one website design that was being replicated across everywhere and then now they have redesigned their whole website. So you should definitely check out both of them. Both of them have very unique illustrations and animation and the UI style that they have. But there's a reason for why they chose that.

Linear, for example, tried to bring in the product design language into their website also, most of it. So very productized, the website. Whereas Intercom on the other side, they want to move out how their product looks, so they started introducing more artistic elements within their website and stuff like that. even from looks -wise, need to...

One needs to take a stand about what do you want to talk, what do you want to signify to your potential users about your product. So that would help for the revamp. Yeah. Yeah. on the tech side, if you want to, we have some metrics to know whether the website is working fine or not. Like we can check the page speed. We can check the...

page resolution, we can see the if a user is going from one page to another page, right? So what is this conversion rate? So on the design perspective, what are the metrics with which we can we have? So like we look at this is the we can say the perfect website for the SaaS product. Is there any metrics that we should follow? Yeah. So one, two important metrics that one needs to look at is one is the heat map of the website.

Yash Shah (22:55.982)

about how to what extent are people scrolling? Is the page length that you have created, is the scroll too much or too less? That is something that you want to check because let's say you have created a very important section that you want to talk about, but it is somewhere in between where people are not scrolling that much. Then you need to take a call about, should I move that section a little down or move to a level where people are spending their time.

So a heat map helps significantly when it comes to website, especially since the fact that the website has a length factor associated with it. Second thing is with respect to dead clicks. So this will help you to identify whether your CTAs are placed at right places. And when we say CTA, one needs to understand that there are different variations in which we use it in design. So we use the CTA in a button format. We also use the CTA in a link format.

So the chances of sometimes people not able to click on the link format would also happen. And also another metrics, very important metrics is that how many people are using your website in mobile versus how many people are seeing your website in desktop. That is also very important. The fact that most of them, most of the cases they are going to start with mobile and check it over there. So usually, but.

Most of the time designers design it in desktop first and move to the mobile first simply because of the fact that the animations that they aim for or try to create are, it's possible mostly most of the times in desktop, not in the mobile. So then what happens, you have to start making compromises about certain sections that exist in desktop mode, certain sections that do not exist in desktop mode when it comes to mobile. So in that process, sections is...

A lot of sections get omitted and the CTAs along with them also get omitted, whichever is there in that section. this is again a problem. So you want to decide about, do you want to be mobile first as a website itself? Do you want to start the design itself in mobile first format and then take it to desktop format? but then again, it brings another question about my product is desktop based.

Yash Shah (25:21.43)

So that's why I want to have a desktop focused website. So it is, again, based on preferences. But again, these preferences are informed because of the metrics. So getting that metrics understood is also important. Then, of course, the page speed. That is definitely important, both in mobile as well as in desktop, to maintain the right amount to the standards that is currently there.

I think these metrics are quite enough. also, always, always monitor your page conversion rates with respect to how many visitors are visiting your website, as well as how many visitors are visiting the different pages that you have intended for different users. And also, see how many conversions are happening. Now, we are talking about unique conversions. Now, there's a difference. This is something that people need to understand is that

Unique conversions are new visitors who are visiting the website and getting converted. You need to minus the people who are already registered or who have already logged in. So that would give you the new users or new unique visitors. That is the real metrics with respect to page this thing. Because very often, we have seen the mistake of founders actually counting even registered users as

you know, overall visits and overall conversions. So that's not the case. So that is another thing that one needs to keep in mind. Yeah. Yeah. And on top of that, I'll also add that you should go into Google Analytics and like take out your own IP, right? So like your office, stuff like that. Google Analytics has an option where it doesn't, it will allow you to configure it in a way that it doesn't count.

the visits from your own office. A couple of people in the team will, people who are working on engineering of the website and design of the website will continuously see the website, keep on refreshing, opening it up in different browsers and stuff like that. In early stages especially, you end up counting that as a, it forms a big part of the error margin as well. The other thing that I'd love to understand from you is if I want to get a website done really quickly,

Yash Shah (27:44.686)

Like my turnaround time is, I wanted to be very short. What are some places that I can go, like some sources which will give me readymade sections or any themes or resources that you've seen that you could share? Yeah. So there a lot of platforms out there. I'll give you much more detailed thought about this. So we have.

One is we have two major giants in the industry. One is Webflow and then Framer. So Webflow has a lot of templates that is well -curated for your own needs. Curious how you don't consider WordPress as a giant. But fair. For SaaS, think Webflow is great. Yeah, both Webflow and Framer are better. WordPress, I don't think WordPress is still there in this

Yeah, I think got it. It's simply from the perspective of usability. One second thing is even from a team man from the website management perspective that I'm mostly talking to the perspective of after the website is done and website management perspective, the security aspects with respect to it compared to WordPress, a web flow and framework have are doing significantly better job. That's one of the reasons why we are seeing

quite a turn in the number of websites that are getting mailed, both Webflow, Framer, and other platforms. So Framer, we are starting to see. So the difference between Webflow's templates and Framer's templates is that Webflow templates, you need to do quite amount of research and time browsing around and just searching around what template works out for you.

Whereas in Framer, most of the templates are designed by designers compared to Webflow's templates. if you go to, but they have specific designer curated template sets these days. which is also, that's one of the reasons why we are starting to see much more better designed templates starting to emerge in Framer also. Webflow also has great templates, but

Yash Shah (30:08.994)

Compared to that, slowly now we are starting to see that Framer is also dominating the market. Then there are also lot of plugins that you could add into these templates that could make it better. For example, we were talking about social groups and testimonials and everything. let's say you went to Framer or Webflow, you chose a particular template that is for free. And now you want to use

that particular templates, like you want to add your own testimonials, your own this thing in an automated process, there's this tool called Senja. What that does is that it creates different different versions of testimonials, like video testimonials, novel testimonial, profile based testimonials, badges. So they have these widgets, you can have a pop up of testimonials on the right hand side. So you can have it in different different formats, basically.

It can come as a light bulb, it can come as a model. So you can choose. So these are widgets that you could plug into your website. And from the process of creating a testimonial, collecting the testimonial, bringing it and then making it live, everything is automated. And it's just a code that you need to just drop in along with your web flow and it's done. It's embedded inside your website. So these sort of things is something small, small customizations you might have to do because

One thing that one needs to remember is, at least when you're starting, no template is customized for you. It's just for the quick. That's the definition of a template, It's a template, it's not customized. Yeah. So it is just for that moment and for you to quickly launch its made for. then I think going forward after a time you realize that, no, no, no, I want.

it to be designed from a person and get it done, which also could be done through these platforms. That's why they are, that's their major role in fact. But yeah, that's, that's mostly it.

Yash Shah (32:14.05)

I think that's all the time we have for today. But I would like to thank everyone for joining in and I hope that this conversation was valuable for all of you. If you have any questions, if you have any open items, please feel free to write those in comments. And wherever it is that you're watching this, whether it is YouTube or LinkedIn or our own website, do

Subscribe, do follow. I've been told by our marketing team that while we spoke about call to actions in the live conversation, we should also have call to action while we are doing these live streams. So do follow, subscribe, or do something that will encourage us to do more of these. And if you have a very more big nuanced question.

you can always book a call with us. Head over to Momentum91 .com, click on, get on a clarity call. We'd be happy to have a conversation with you, understand how Momentum91 can help your business grow. But thanks everyone for joining in and the four of us, we'll see you again next week.

‍