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.
1 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
7 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

30 Most Exciting New Tools for Designers, 2023

As we near the end of 2023, we wanted to take a look back over all the tools we collected over the past year, to pick…

3 Essential Design Trends, December 2023

While we love the holidays, too much of a seasonal theme can get overwhelming. Thankfully, these design trends strike a…

10 Easy Ways to Make Money as a Web Designer

When you’re a web designer, the logical way to make money is designing websites; you can apply for a job at an agency,…

The 10 Most Hated Fonts of All Time

Remember when Comic Sans wasn’t the butt of the jokes? Long for the days when we actually enjoyed using the Impact…

15 Best New Fonts, November 2023

2023 is almost over, and the new fonts are still coming thick and fast. This month, we’ve found some awesome variable…

Old School Web Techniques Best Forgotten

When the web first entered the public consciousness back in the 90s, it was primarily text-based with minimal design…

20 Best New Websites, November 2023

As the nights draw in for the Northern hemisphere, what better way to brighten your day than by soaking up some design…

30 Amazing Chrome Extensions for Designers and Developers

Searching for a tool to make cross-platform design a breeze? Desperate for an extension that helps you figure out the…

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…