UI Design
7 minute read

Improve Engagement with These SaaS UX Design Best Practices

Jeremy has over 15 years of experience designing user-centric products for brands like Warner Media, Walmart, and Eli Lilly.

SaaS applications are among the most complex pieces of software written today. Implementing UX best practices for any SaaS platform is a useful exercise that can reap valuable rewards:

  • Reduce customer churn
  • Increase user speed (and therefore satisfaction) by streamlining the experience
  • Eliminate user frustration with help and support systems
  • Engage users with contextual dashboards and information

Simplify Registration

Registration is normally the first touchpoint a user has with a SaaS platform, and as the saying goes, first impressions are important. When considering the registration process, only ask for the most vital information up front. Many times, an email address is enough to get a potential customer into the application.

SaaS UX design
FreshBooks only requires an email address to get users going.

While their initial registration is minimal, FreshBooks gets more information from users after they’ve begun to use the application. This type of tiered (or stepped) data collection gets users in the door and removes barriers for entry like payment information and lengthy forms.

While refining the registration process, don’t forget to consider calls to action. A clear call to action draws potential users quickly into the system. Not only does FreshBooks have an obvious button (“Get Started”)—they also include a friendly reminder that 97% of users recommend FreshBooks. Tools like this promote trust and can motivate people who may be on the fence to take action.

Clarify with Onboarding

Customer churn is a key performance metric used by SaaS applications. Poor onboarding can lead to user confusion. When users are confused, they cancel memberships. A positive onboarding experience engages, gives a strong first impression, and teaches users how to complete certain tasks they have in mind.

Slack is an example of combining intelligent onboarding methods to create a positive experience for new users.

SaaS UX
Slack's initial onboarding uses a step-by-step wizard for simple team setup.

To begin with, users are given a simple, wizard-driven series of questions to set up their company and team. It’s important to note that users can take advantage of this or skip it for later. Giving choices like this during onboarding is vital because it allows experienced users to dive right into productivity.

In addition, Slack employs an onboarding AI called Slackbot. Slackbot serves as an automated help system. It can field basic questions or direct users through easy processes like making channels or adding more new users.

UX for SaaS
Once inside Slack, users are prompted to finish signing up, but they can also begin setting up channels, inviting additional users, or installing apps—all under the direction of Slackbot.

Additional onboarding techniques include demonstration videos and coachmarks (small overlays to point out important features or elements on the page). The goal of onboarding is to introduce users to the primary tasks an application can accomplish and make it as easy as possible to complete them.

Streamline Information Architecture

Information architecture and navigation are the primary ways users find what they need from an application. As such, they should be intuitive and minimal. Hootsuite provides a global side navigation that is out of the way but can be expanded to show labels if the user forgets what an icon means or gets lost in the experience.

best saas ux
Hootsuite features a minimal, expandable navigation sidebar on the side of the page.

It’s critical that systems like this are first presented in an expanded state. Doing so allows new users to become familiar with available features before minimizing to gain real estate for important tasks.

For SaaS applications that use multiple levels of permissions, role-based access control (RBAC) can help simplify navigation. RBAC only provides users with the navigation and content that they need to complete their individual goals. Consider a medical records (MR) application with three primary roles:

  • MR retrieval specialist
  • MR coder
  • Admin

Each role has a distinct set of goals and a UI to accomplish those goals. Since MR coders don’t need to see retrieval content or tools, hiding retrieval, admin navigation, and content makes sense for those users.

Likewise, retrieval specialists don’t need to delve into coder functionality, so their dashboards and navigation should only include the tools they need. Considering audience roles and manipulating the navigation and content in this way creates a streamlined experience that boosts productivity.

For complex projects, consider implementing mega menus. Mega menus have the advantage of exposing secondary and even tertiary navigation elements with a single interaction, resulting in greater discoverability for new users. Intuitive labeling and navigation organization is still required (mega menus don’t help the experience on mobile devices), but they can be a boon to task speed in the desktop environment.

Basic UX principles
Mobilecom Debitel uses mega menus to provide easy access to services in multiple content tiers.

Engage and Inform with Dashboards

A dashboard is often the first thing a user sees when logging into a SaaS application, so spending time on dashboard user experience will almost always lead to a greater ROI. A positive dashboard experience is one that answers the following questions for users:

  • How am I doing, or what is my current state?
  • What recent activity has been happening?
  • What problems should I be aware of?
  • What items are on my “To Do” list?
  • How can I easily start important tasks?

For users to understand their current state, it’s a good idea to report on any key performance indicators (KPIs) that are critical to the user’s role.

Klipfolio’s dashboards are a great example of showing multiple KPIs (social media followers, load time, response time, etc.) in a tight grouping that is easy to scan. Visual indicators like maps, bars, and charts help to break up the content and make scanning easier.

Frictionless UX
Klipfolio's command center (designed for a large HD display) features many KPIs that are readable at a glance.

A visual history of activity helps users determine what’s been happening while they were away. It’s recommended that this list or chart include actionable items so that the user can follow up on anything important. This could be usernames in the case of intranets, timestamps to view reports, headlines for news, etc.

Problem areas should be highlighted as well. Lists of alerts sorted by priority can be a huge help to users of complex applications. Especially critical items can be separated out as alerts that are actionable and dismissable to be sure they are seen.

SaaS application development
A SaaS dashboard design displaying an alert band with actionable buttons. (Darius Dan)

As mentioned earlier, well-designed dashboards serve as a springboard to important functionality. Contextual links like to-do lists are especially useful here as they add capabilities for users that are relevant to their current needs. The Quip redesign makes good use of this with their “Action Items” list.

SaaS-based environment
Quip's "action Items" offer great contextual links.

Ensure That “Help” Is Useful and Always Available

Successful SaaS applications have intuitive help and support systems in case users get stuck. Modern users expect to be able to get support for their questions without the time commitment of speaking to someone on the phone. There are a few key ways this can be accomplished.

First, the help system should be easily accessible from anywhere in the application. If a user decides they need help, there is a good possibility that they are already frustrated. Forcing them to dig for help content is a recipe for making the experience worse.

SaaS design
The expandable "Support" button near the bottom of the FreshBooks UI is always available to users.

FAQs help users quickly find answers to popular questions, but these can be improved as well. Agorapulse is an example of an application that has automated their FAQ. Doing so has allowed them to cover more topics and offer users an easy way to search using the “Agorapulse Bot.”

Offering live online support is also important for users who may prefer that channel over traditional support methods (this is especially important for younger audiences). While these user-facing support systems are vitally important, what happens behind the scenes is also critical. Following up on user complaints, categorizing bugs, creating cases, and constantly improving the customer experience are key factors to SaaS longevity.

SaaS environment
The Agorapulse help system is automated and works like an intelligent FAQ.

Improve SaaS Applications with Review and Iteration

To be worthwhile, UX endeavors must consider primary audiences and be focused on user needs. UX for SaaS is no different, so let’s take a moment to recap our discussion of SaaS UX design best practices.

  • Simplify the registration process.
  • Use onboarding to clarify functionality for users.
  • Streamline information architecture so that it is intuitive and minimal.
  • Engage and inform users about KPIs with dashboards.
  • Ensure that SaaS product support is useful and always available.

It takes significant effort to maintain a successful SaaS application. Engaging users requires an ongoing commitment to review and iteration, but it’s a battle well worth fighting to retain happy customers.

• • •

Further reading on the Toptal Design Blog:

Understanding the basics

What is SaaS design?

SaaS stands for “software as a service.” It is a way of licensing and providing cloud hosted software as a subscription. Like all computer software, SaaS programs are designed. The functionality, user experience, and user interface of the SaaS environment must be carefully considered.

What is a SaaS product?

A SaaS product is an application that is centrally hosted and delivered over the web. In most cases, users gain access to a SaaS platform by paying a subscription, although some SaaS tools are free. A wide range of industries are adopting SaaS products—design, engineering, finance, and healthcare, to name a few.

Why is SaaS important?

SaaS technology represents a seismic shift in the way computer software is designed and distributed. For businesses, SaaS provides a cost-effective opportunity to constantly learn about how people are using its product, which in turn leads to design improvements.

What is a good onboarding process?

There are many different onboarding techniques, but to create a frictionless UX in onboarding, one mandate stands out: Don’t create unnecessary steps for users. A positive onboarding experience engages the user, gives a strong first impression, and teaches users how to complete whatever goals they have in mind.

What is information architecture in UX?

Information architecture is a discipline focused on the organization, naming, and structuring of content in a way that is easily findable and usable. The primary concern is helping users find what they’re looking for so that they can complete the tasks they want to.