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!

Analytics

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

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…

Web Tech Trends to Watch in 2024 and Beyond

It hardly seems possible given the radical transformations we’ve seen over the last few decades, but the web design…

6 Best AI Productivity Apps in 2024

There’s no escaping it: if you want to be successful, you need to be productive. The more you work, the more you…

3 Essential Design Trends, February 2024

From atypical typefaces to neutral colors to unusual user patterns, there are plenty of new website design trends to…

Surviving the Leap from College to Real-World Design

So, you’ve finished college and are ready to showcase your design skills to the world. This is a pivotal moment that…

20 Mind-Bending Illusions That Will Make You Question Reality

Mind-bending videos. Divisive Images. Eye-straining visuals. This list of optical illusions has it all. Join us as we…