Ultimate UX Design Guide to SaaS On-Boarding, Part 4: First Login

Default avatar.
November 28, 2017
Ultimate UX Design Guide to SaaS On-Boarding, Part 4: First Login.

This is the 4th part of The Ultimate UX Design Guide to SaaS Customer On-Boarding. SaaS Customer On-boarding is the process that users have to experience while initiating their journey on a company’s software application. Customer on-boarding initiates from the experience that employees previously had to undergo while joining a firm. The on-boarding process sets the tone for a good user experience. Long story short, special emphasis should be given to making the on-boarding process as flawless as possible. The SaaS customer on-boarding process is based on 6 comprehensive aspects, the first three of which we’ve already covered: 

  1. Sign up Form
  2. Welcome Email
  3. Drip Campaigns
  4. First Login & Product Tutorial
  5. Data Import & Notifications
  6. Check up calls & Swag

All the aspects of the process play an equally important part in forming a desirable reputation of the brand in the eyes of the customers during the on-boarding process. Today we will be focusing on First Login & Product Tutorial.

First Login

I cannot stress the importance of crafting a first login experience to delight your customer enough. The first login experience is where you should be looking if you want your churn rate to go down.

Rules of Thumb:

  • Do not present your user with a UI that is empty. You need to keep that in mind because with a SaaS product that is B2B oriented, the user isn’t going to have everything in front of him from the beginning. Services requiring extant data to function will need that step to be performed after first login.
  • Give clear directions to users for what they should be doing first. They are completely new to the interface so they would need a nod in the direction of the first step.
  • They have gotten to this point — it would be great to thank them again and tell them of how cool it’s going to be, once they have set up everything.

The first log-in screen at Mention is a great example of this. The dashboard is not empty, there are immediate options with simple captions that you can explore and there’s a very clear CTA at the end, which directs you to create your first alert.

Product Tutorial

An initial tutorial can be a great way to start building a rapport with your customer, now that you’ve gotten your first login. Depending on how you design your tutorial, you can quickly familiarise them with the interface of your app so that they can get down to using it.

Rules of Thumb:

  • Users have to be able to skip it. Going through a tutorial that cannot be skipped can really turnoff your user. If they don’t want to see it just yet, they should have the choice of opting out.
  • It should always be something that users can revisit. It is very common to skip any pop up or notification upon logging in for the first time; users just want to start getting their hands dirty. Just ensure that it can be easily located.

These are some guiding principles that you should keep in mind when designing your first log-in page and product tutorial(s).

Making the Experience an Improvement

A famous programmer called Kathy Sierra says that the app should be able to make its users amazing at something within the initial five minutes of using that app. Ultimately the user should be taking an action that causes a result relevant to your business. Try to generate an experience that would be bound to bring the user back.

User Communication

You want to establish a relationship with the user that is of mutual benefit to both of you. That happens when you begin to communicate with them frequently and that too in the initial stages. The product tutorial is one of the easiest ways to establish that channel of communication. Ideally a product tutorial should accomplish: 

  • Basic Guidance on how to use the software
  • Allow the user to do something really cool
  • Do this within as limited a time frame as 1 – 2 minutes

One of the best examples of this is Canva. 1. The sign up is simplicity itself. You can create an account by just giving your email address or use a social media sign in (Recall our discussion on Sign Up Flows) 2 2. Decide what you want to start doing. There’s a general orientation that you can select at the beginning that will affect the images in Canva’s database that you will get to see initially. 3 3. The guide starts. How long will it take? 23 seconds. As soon as you click Show me how it’s done”, a tutorial will guide you through the simple drag and drop process of selecting an image and modifying it. As mentioned above, the defaults are intelligent” ones. A graphic is created for you and then you’re invited to give it a try. 4 4. The interface is colourful, engaging and very easy to use. You’re immediately looking at the Beginner’s Challenge, which attracts the user even more. 5 5. Finally, you get to do something fun, like selecting a hat that you drag onto a monkey’s head! The whole process takes under a minute, and you’ve already mastered the basics of using Canva. 6 Within 23 seconds, Canva manages to capture the attention of its users. The interface is intuitive. The tutorial is simplicity itself as it shows the process of dragging and dropping images from its database, adding the relevant headings and downloading the image. It then gets the user to do the same. It’s light hearted as well as it gets you to put a hat on a monkey!


You can analyse the effectiveness of your first sign in and product tutorial. The sign in and product tutorial can be grouped into an experience called the first run experience. The series of steps that need to be taken can be defined and then you can do something called funnel analytics to evaluate the effectiveness of the experience. Tools I would recommend in order to build and measure your funnel are Mixpanel or Amplitude. The idea of funnel is that many users enter the beginning of the user experience and a few come out at the end. Measure user progress through the experience by observing the completion rates for each step. So usually, you’ll get rates of completion that look something like this: 

  • Step 1: 1,773 people
  • Step 2: 1,701 people
  • Step 3: 1,399 people
  • Step 4: 1,211 people
  • Step 5: 1,152 people

Now it’s between Step 2 and 3 that a lot of people opted out of the user experience, which indicates that that’s the area where you should focus. In this way you can refine your first login experience so that it retains the most users.

Aleksander Góra

Aleksander G√≥ra is enhancing user experience by crafting beautiful and intuitive interfaces since 2006. He is the co-founder & CEO of www​.5next​.io the¬†first application for strategic networking based on UK accredited business networking program. Aleksander is the author of upcoming book The Open Heart Website SurgeryÄîUltimate guide for leads generation for medium and small businesses. Recently featured in Rafael Dos Santos book Äú100 Inspirational Migrant Entrepreneurs in the United Kingdom.‚Äù¬†Currently working in London as a Product Manager and Lead UX Designer in one of the lead¬≠¬≠¬≠ing conversion optimization platforms Convertize​.io

Read Next

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…