Sign-in user flows are an important component for SaaS and any other product or service requiring authentication. The user by itself has already been acquired with a signup process but it’s important to make it easy and intuitive to sign in, sign out and reset a forgotten password.
The vast majority of SaaS websites use a similar sign-in user flow. It might look simple at first, but it’s important to have it right. A well-designed sign-in user flow will make a difference between frustration and satisfaction when it comes to using any SaaS or app. The user interface and user experience (UX and UI) play an important role in the success of a SaaS.
The main point when it comes to design sign-in user flows is simplicity. It should be simple to sign-in to any app and should not create any specific challenges. A simple login form with two fields: email address and password, a link in case users forget their password and a login button to actually sign in.
The password reset user flow could have its own guide by itself, but we decided to group it with sign-in user flows as they are often part of the same page/form.
FreshBooks Sign-In User Flow
This guide will use the sign-in user flow of FreshBooks as an example of a good and simple flow. We encourage you to follow the practices, and methods listed here to build a better user flow.
FreshBooks Homepage
Like in most of our user flow guides, we start from the homepage as it will be the case for most users. The login link is easy to spot in the top right of the page. Adding signup and sign-in links in the top right of a website page have become a standard for a long time in web design. Users are now intuitively looking in the top right to find those links.
FreshBooks Sign-In Page
FreshBooks has a dedicated login page to sign in. There are multiple reasons to create a dedicated login page versus other options. When it comes to user experience, the main reason would be to focus on the login form and nothing else. It’s why the header, navigation and footer were completely removed from that page. The only goal of that page is to sign in FreshBooks and nothing else. Another reason could be technical, the way FreshBooks was coded might be the reason why a dedicated login page is necessary.
Another option than a dedicated login page would be a popup with a login form. If the user is on the homepage and clicks the login link in the top right, a popup opens and is prompt to sign in, without leaving the homepage.
Error Notification
In the screenshot below, you can see what happens when the user clicks on the login button without entering a password.
FreshBooks Dashboard
The first page after logging in is the dashboard. From there, users can see an overview of their activity on the platform.
Sign-out Link
The sign-out link is displayed at the end of the list of links related to the account settings. To display that list, users have to click on the gear icon, a standard graphic for account settings.
FreshBooks Sign-out Page
As their sign-in page, FreshBooks has a dedicated sign-out page. This page shows up right after clicking the logout link in the previous step. Many SaaS and other apps simply redirect their users to the homepage when they sign-out. Again, as their sign-in page, the reason to have a dedicated sign-out page might be technical. FreshBooks is also using its sign-out page to promote a complementary product, its mobile application.
Password Reset Form
The password reset form in the screenshot below appears when a user clicks on the link “Forgot your password?” seen at the beginning of this guide. The design of the page itself looks really similar to the sign-in page. In this case, only one field is necessary, the email address field.
Password Reset Instructions Notification
Once users enter their password and click the “Reset Password” button, they are redirected to a notification page.
Password Reset Email
The email received with the password reset link is quite simple. There is no FreshBooks logo or any other branding. It specifies the username of the account and a link to reset the password.
New Password Page
Again, the new password page uses the same user interface as the sign-in page and the password reset page, which is totally normal and is a good practice. The user is prompt to enter a new password and confirm the new password. Note how the label on the call-to-action button was changed for “Reset and Log In”.
Back to the Dashboard
When users click on “Reset and Log In”, they are redirected to the dashboard. There is a notification at the top of the page saying that the password was successfully updated.
Difference Between FreshBooks and Other SaaS
In this sign-in user flow, we can easily see how the signing in FreshBooks is simple. They use dedicated pages for signing in, signing out and resetting passwords. All the labels are clear and the instructions are easy to follow.
Discover More With SaaS Websites Pro
If you are interested in learning how some of the biggest SaaS companies and web apps have built their sign-up user flow, we invite you to join SaaS Websites Pro. SaaS Websites Pro is a library of hundreds of annotated user flow videos.
