This guide is designed to help people understand how B2B SaaS web applications and their marketing websites are commonly structured. By the time you’re finished, you will hopefully be able to see how similar products are designed and marketed.
Common concepts
Before starting our tour I want to briefly explain the concepts of user management and user onboarding. Each of these is implemented differently based on the product’s platform (web browser or mobile application) or end user (business or consumer), but their general purpose will be the same.
I’m also going to assume that you’re familiar with some basic tech terms like server and database. You can always check out our hardware and software basics topics to quickly get up to speed.
User Management (Signing Up & Signing In)
We usually use web, desktop or mobile applications to perform actions, like posting a video, writing a document or managing a project. For many of these applications to work properly the actions we take need to be associated with a user – if someone uploads a video to TikTok we need to associate the video with a user account so we can keep track of the views, likes, comments and so on. TikTok can then use this information to help their algorithm determine which users are making popular videos and should be promoted more on the product, increasing user engagement (an important metric that measures whether people are using a product).
Most applications will use a user management system to handle the technical aspects of managing users. We’ll go into more detail about how these systems work in another topic, but for now the important things to know are that the user management system will take care of user authenticationand user authorization.
User authentication is the process of verifying a user’s identity, usually with an email address and password or through an existing account like Facebook or Google.
User authorization controls the access a particular user has within the system once they are signed in.
Let’s use online banking to explain the differences more clearly. When you sign in to your account with a combination of username, password and two factor authentication you are proving to the bank that you are who you say you are – you are completing the authentication process. Once you’ve successfully signed in, the bank’s user management system uses authorization to make sure you can only view your bank account details, and not those of your neighbors who may also be customers of the same bank.
New User Onboarding
Onboarding is the term we use for the process of teaching new users how to use an application. The primary goal of user onboarding is to get people to understand the full value of the application so they continue to keep using (or where relevant, purchase) it. Onboarding can be a manual process, like a Zoom call with a customer success team member who walks you through the application. These personal onboarding sessions are obviously very resource intensive and hard to scale so you’re more likely to find them offered on complex and high-priced B2B applications. Consumer-focused and lower-priced products will generally stick to automated forms of onboarding, using popups and guided tour flows to walk users through a series of predefined “lessons” or steps.
Aha moments
Product and growth teams often use onboarding to try and get users to an “aha moment” – the point where a user has a moment of discovery or insight and recognises the full potential value of a product.
In the early days of Facebook their data showed new users reached their “aha moment” and were more likely to continue using the product if they added 7 friends within 10 days of signing up. 7 friends may not sound like many, but it was enough for a new user to start seeing the value that Facebook offered in their user profiles and news feed. With this knowledge in hand, Facebook’s growth team focused their attention and resources into making sure new users reached 7 or more friends as quickly as possible. One successful method was asking new users to upload their phone’s contact list during the initial onboarding process. Facebook would then check to see if any of their contacts were already users, and if so, would suggest adding them as friends to quickly bring the new user to the “7 friend” target.
A tour of Amplitude’s product analytics web app
It’s time to start our tour through a web application, or webapp. A webapp is an application that is accessed using a web browser, rather than a native application that is downloaded and stored locally on a PC or smartphone. Webapps can be accessed from desktop and mobile web browsers, but for the sake of simplicity we’re going to focus our example on the desktop experience for this tour.
We’ll be looking at a B2B SaaS web application – so that’s a business to business (a company that provides products or services to other companies), Software as a Service (a web application where the account owners pay an ongoing subscription to maintain access to the application) product. We’ll be looking at one of my favorite B2B SaaS apps, Amplitude, a product analytics app that helps software companies measure how users are behaving within their own apps.
Let’s get started.
Marketing Site vs Application
We can split many B2B SaaS websites down into the marketing site and the web application. The marketing site contains the homepage, content and landing pages, blog posts, support pages and so on. It is predominantly “read-only” – the pages contain information but are not normally interactive. The primary goal of a marketing site is to market the product, providing visitors with the information they need to get them to sign up and use a product, such as product feature overviews and pricing details.
The web application is the interactive product where you perform tasks or actions. You’ll normally access the webapp from a sign up or sign in page, and after completing the sign in process you’ll generally be redirected to a dashboard or similar type of page.
Some applications contain the code for the interactive application side and the marketing side within one larger application, while other companies choose to host the marketing site separately from the interactive web application. There are positives and negatives to both approaches but this is very technical and is beyond the scope of this topic.
Let’s take a look at Amplitude’s marketing site.
The Homepage
After we type Amplitude.com into our browser and hit enter Amplitude’s homepage will appear. Many people consider the homepage to be the “main” marketing page. It’s traditionally been the focus of attention from marketing and design teams as it was assumed to be the first page a website visitor would see, so companies wanted to make sure they were offering a good first impression.
But this view doesn’t really match up with modern web browsing habits or analytics data. Think about your own behavior when you’re visiting a site for the first time – how often do you open a new browser tab and type in the URL for the site, compared to clicking a link from a friend, or visiting a search result from Google? You’re just as likely to end up on one of the marketing site’s internal content pages, sign up pages or a blog post as you are to hit the homepage.
Of course many people do visit websites via the homepage, so it should contain useful content that gives the visitor an overview of the product and value proposition. It should also direct users to additional content pages with more specific information, like feature breakdowns or pricing pages. A common way to do this is with web links in the navigation bar (navbar) at the top of the page, and in the footer at the bottom of the page.
Most commercial software product homepages will start with a hero section at the top that contains text, images and a large Call To Action (CTA) button.
The hero section is often the first thing someone will see when they open the page so it should contain an attention grabbing headline and descriptive text that helps to quickly explain the company’s value proposition. The CTA button is then used to encourage a user to perform a specific action. For B2B SaaS this will usually be getting them to start a free trial account, or for more expensive and complex products, to contact the sales team to arrange a product demonstration.
Many B2B companies will also show a list of any well-known brands that are using the product, acting as a form of social proof (“If Shopify use this then it must be great!”)
If we look at Amplitude’s homepage we see they are doing a great job with their hero section. They have a compelling headline (“#1 in Product Analytics”), descriptive text that explains their value proposition (“Give your teams….”), a screenshot-style image to show an example of their product, and a nice big “Get Started” CTA to encourage people to sign up for an account.
Directly below the hero they have an impressive list of customer logos to show they are a leader in their category. Amplitude is an analytics company so it’s no surprise they are doing a good job here – we can safely assume they have tested many variations of the page before landing on a winning combination.
If we scroll down we’ll see more sections of the homepage, including images of key customers (with links to a Customers page), further explanations of their value proposition, and links to watch a demo of the product.
Content Pages
People visit websites for a variety of reasons and if we tried to cater to all of their needs on one page the amount of information would be overwhelming. Most companies solve this issue by creating additional content pages based around specific informational themes, like overviews of the product’s features or pricing. As I mentioned earlier, an increasingly large percentage of visitors will be visiting the site for the first time via one of these content pages rather than the homepage, so it’s important that content pages also contain some context about the product, along with links to the homepage and other internal marketing site pages.
If we navigate to Amplitude’s “Customers” page we see a hero section with a similar design to the hero on the homepage, but now customized to show off the strength of their customer base rather than their general value proposition.
As we scroll down the “Customers” page we see more information about their customers, including the results they’ve seen from using Amplitude, and links to case studies from well-known brands across a range of industries. This is genuinely useful information for visitors, but also acts to further reinforce the idea that Amplitude is a category leading product, and should be a strong choice for product or growth teams who are looking for analytics software.
Content pages also provide companies with great opportunities for search engine optimization (SEO), where pages are designed to try and maximize the amount of traffic they receive from search engines. You’ll commonly find content pages have been optimized for specific target keywords, so a project management software company may have a content page for “Task Management” that is aiming to get traffic for “task management” related queries on Google.
Along with customer pages, some common content page themes include:
- Product features overviews
- Pricing details
- Frequently Asked Questions (FAQ)
- Product Use cases
- Customer Case Studies
- Company information
Regardless of the theme, the general idea is the same – present the visitor with useful information that answers any questions they may have, while also encouraging them to eventually start a trial or request a demo of the product.
Landing Pages
If a company is running search engine or social media advertising campaigns then there is a good chance that they’ll be sending the traffic directly to custom Landing Pages. The goal of an advertising landing page is to maximize the odds that a visitor converts, which in the context of a webapp will usually mean signing up to try the product or request a demo. Everything on the landing page will be specifically designed with this end goal in mind.
Clicking on Amplitude’s Google search advertisement takes us to a striped down landing page that heavily encourages users to start a free trial. If we compare this landing page to the homepage it is very basic, containing only a signup form, a short list of value propositions and customer logos. You’ll also note that the navigation bar at the top of the page has been removed to prevent users from navigating away from the page – everything is focused on getting the user to sign up for an account, now.
Landing pages are often designed around a specific advertising campaign, so while the homepage and content pages need to appeal to a broad range of customer groups a landing page can specifically target segments of users. The marketing team will be able to tailor the landing page’s text and images accordingly, for example if the campaign is targeted to people who work in the HR teams at hospitals then the screenshots and customer case studies can use people from this customer segment to make it more relatable for visitors.
Blog
A company’s blog offers another prime opportunity to get in front of potential users and customers. While company blogs have traditionally been fairly boring places filled with company news or product update posts, smart tech companies use their blogs as content marketing platforms where they can educate, entertain and inform potential customers. As an example, a resource management software company like Resource Guru can have a “6 resource management techniques for successful projects and happier employees” post that appeals to the kind of people who need help managing projects – which also just happens to be one of their primary customer segments (I know this because I used to work at Resource Guru!).
Blog posts also offer the company another opportunity to target valuable keywords for SEO and to get traffic from social sharing platforms like Reddit or Twitter.
If we take a look at Amplitude’s blog we can see they have designed it as a useful resource for their target audience – people who work in the product team. We see posts on topics like product analytics, product management, and product strategy. As Amplitude is a product analytics tool the content helps to position them as leaders within the “product” space, and bring in new customers who find the posts via a product-related Google search (“product strategy”) or from shared links.
You might also notice the small newsletter subscription signup form in the screenshot above. Amplitude’s marketers know that most people who visit their blog will not be ready to sign up for their service, but may be interested in learning more about how they can build better products. By encouraging them to sign up to their newsletter they will have the opportunity to continue marketing towards them in the future, and hopefully turn them into a customer.
Support Center
The final section of the marketing site we’re going to look at is the support center. It may seem odd to consider the support center as part of the marketing site as its primary function is to help people learn how to use the product. But many potential customers (especially for technical products like a a B2B product analytics app) will also head to the support center before they use the app to get a better understanding of how the product works, and check for any potential difficulties they could expect to encounter if they go ahead and implement the product at their own company.
And just like the homepage and content pages, the support center provides another great opportunity for SEO, especially “Getting Started” type guides that outline how to use a product’s core features.
The Web Application
We’ve made it through the marketing site and we’ve been convinced of Amplitude’s strong value proposition. It’s time to start using the web application.
Sign Up Page
Of course, before using the application we’ll need to have an account so the first page you’ll encounter on the webapp is often the Sign Up page. If you’re creating a brand new account then you’ll normally see a form asking for details like your email address, company name, country, and password. If you’ve been invited into an existing team account then you may only be asked to create a password as the system will already have your email address details (from when your team member added you to the system to create your invitation).
There is a trend in web applications to ask for the smallest amount of information necessary to sign up for an account – in Amplitude’s example, simply your email address. The idea is to reduce the amount of friction involved in the signup process and increase the conversion rate (the number of people who successfully sign up out of the total number who view the form). Long signup forms provide more opportunities for people to get annoyed or distracted and not complete the signup process.
If you complete the form correctly and click the submit button then the form data will be sent to the server, which will create a new user as a row in the database. Once that is completed you will be redirected to the web application.
Sign In page
If you’ve previously registered for an account but are not currently signed in then you’ll need to sign inor log in. After filling in your email address and password the details will be sent to the server which will compare them with the records in the database. If they match then a response will be sent back back to the browser and you’ll be able to access the web application.
For the purposes of this walk through we’ve signed in to view Amplitude’s demo account, which lets us try their tool using fake data. This is a smart way for the Amplitude team to demonstrate the usefulness of their product as normally with an analytics tool you’d need to integrate it with your own web app, wait for your app to send through a few days/weeks of analytical data, and then set up reports to view the data. There are many steps that are out of Amplitude’s direct control that could go wrong during this process (issues with the implementation process, data quality problems etc), so by giving us a pre-loaded demo account they can make sure potential customers are testing a great experience of the product.
Inside the Web App
Web apps tend to share some common layout UI and UX designs. Most will have some kind of navigation bar so users can easily make their way around the app. While many navbars are found at the top of the screen, Amplitude has a vertical navbar placed on the left side. The most commonly used links are listed first, and then towards the bottom we see links to the settings section.
To the right of the navbar we have the actual page content. This will change depending on which part of the application we are using, but will commonly include dashboards, internal app pages, settings and profile pages and so on.
At the bottom right of the page we can see an Amplitude icon hovering above the content. Clicking the icon opens up a small help center section with a search field, links to common help articles and a button to request further support. This style of support popup is very popular within web applications, and is not something that Amplitude have built themselves – they are using a popular tool called Intercom.
Dashboard
After signing in to many B2B SaaS applications you’ll be taken to a Dashboard page, and Amplitude is no exception (technically Amplitude accounts can have multiple dashboards but I’m referring to the one you are taken to automatically).
The goal of a dashboard is to present the user with the key information they need from the tool in an efficient manner. What kind of information will this be? It depends on the app. If you are opening an analytics tool like Amplitude there is a reasonable expectation that you want to view your key product metrics, so it makes sense that Amplitude’s dashboards are built around reporting this data. Similarly, if you were using a project management tool like Asana then you would likely see a list of today’s tasks on the dashboard, and if you open an SEO tool like Ahrefs then you’ll see an overview of your key SEO metrics.
Since this is the first time we’ve signed in to the app they are also encouraging us to go through an onboarding process so we can understand the full value of the product.
Onboarding
When we were talking about onboarding earlier I mentioned that the process can be manual or automated, and Amplitude has decided to offer both methods.
When the demo account first loaded a “Get an Amplitude tour” popup modal was displayed. The model gave me the option of signing up for a live, hands-on workshop where I’d be able to ask any questions I may have about the product. If that option isn’t convenient then they also have pre-recorded “on-demand” product tours.
Amplitude is also using automated onboarding, like the “Want to edit?” tooltip that is calling out the ability to edit charts that have been made by other users. These automated tooltips and flows are a great way to educate users about specific features and increase the rate of “feature adoption”.
It’s worth taking some time to think about Amplitude’s goals with onboarding. Since we are using a demo account with dummy data we can assume that the primary goal is to get us to a point where we want to sign up for a trial account. Once we have our own trial account using our company’s real data the goal would change – they’ll want to make sure we are seeing real value from our data, which should increase the odds that we will contiune using the product and eventually sign up for a paid subscription.
Internal app pages: Reports Page
I’ve finished viewing the Dashboard and decided I want to go deeper. I can click on the title of one of the analytics reports the application to open a new page that displays the report in more detail.
Each B2B SaaS app will have pages or sections within the application based on the problems they are trying to solve – a resource scheduling app like Resource Guru has a page for the shared calendar, a page that lists project details and so on. For an analytics tool like Amplitude it makes sense that we’ll have pages that display analytics reports in more detail than we could see on a dashboard.
As we continue to browse through the dashboards and reports we can see that the navigation bar remains visible on the left of the screen, and hasn’t changed in appearance from the dashboard page. It’s important to keep consistency in the design of similar sections (like dashboards or reports) to make sure users feel comfortable as they navigate through the application.
Settings Pages
If we click on the navigation bar to visit the Settings page the first thing I notice is that the vertical navigation bar on the left of the page has changed.
We are now being shown a different set of links that are relevant to the user and account settings. The change in visual appearance is also a good indicator that we are no longer in the “core” section of the application (the dashboards and reports).
The Settings section opens to a page that lists information that is useful for an account administrator. Since this is a demo account we do not have the option to make any changes to any of the settings. This is a good example of User Authorization that we discussed earlier, where my role as a demo user means I have been restricted from accessing admin-level features of the app. If I was signed in as a senior member of Amplitude’s product team then I might see a different set of available options.
Some applications will have a long list of options to customize every single part of the app, while others take a more “opinionated” approach and will only allow minor customizations.
If I click on the Profile link then the profile settings page opens. As a demo account this page is also limited in functionality, but you can see that Amplitude are making use of the blank space on the page as an opportunity to promote their integration with Slack, the very popular team chat application.
If we leave the Settings screen and head back to the main dashboard we can see that the navigation bar returns to the first version we saw, with links to the dashboards and reports. There are a few other links like “User Look Up” and “Templates”, that offer additional functionality that are specific to Amplitude’s users so we don’t need to look into them now.
Finishing up
And that brings us to the end of our tour through a B2B SaaS web application and marketing site. Hopefully you have a good idea of how they are structured and can start to see the similarities in design and implementation as you use other web applications throughout your day.
To briefly recap, a B2B SaaS web app’s marketing site is usually non-interactive, and provides the user with the information they are seeking while also marketing the company or product’s value proposition. They use a number of different pages to do this, including:
- Homepage
- Contents pages, including:
- Product features overviews
- Pricing details
- Frequently Asked Questions (FAQ)
- Product Use cases
- Customer Case Studies
- Company information
- Landing pages
- Blog
- Support Center
The interactive web application itself is accessed via the sign up or sign in pages, and the functionality that is available will depend on the product. You’ll commonly find dashboards for quick access to key information or interactions, internal pages for the core functionality of the application, and settings pages for further customization.