Design Guidelines

Onboarding

Onboarding is your first opportunity to introduce a product or service to your customers—and to make a positive first impression.

Welcome mat modal featured on application wireframe.

Introduction

Make this an opportunity to say hello, make them feel welcome, and show them around. Give users a friendly, high-level overview of your application, process, or service. Clearly state your value proposition, and make it easy for them to get up and running quickly through a short overview video or guided tour. Onboarding should be simple and brief, and can include setup or getting started guidance and deeper learning opportunities.

Onboarding should be persona or goal-based—tailored to the user's role or goals. Think about the different groups of people coming through your door. What is each one looking for? What can you do to quickly make them feel both welcome and productive? Give them the opportunity to declare their goals during onboarding.

Even after a user's first experience with the material, onboarding content should remain available in some form, often via a help menu or other persistent interface. It can also be included in the active work area (via popups, for example) for a set amount of time.

Start using our Design Kits

Open in Figma

Usage

First Time in a Trial, New Product, or Feature Area

Trial and welcome mat component.
Trial bar with welcome mat welcoming new users to your product.
Walkthrough bubble in a trial.
Trial bar with series of walkthroughs showing users your product's value propositions.
Simple welcome mat component.
Simple welcome mat introducing users to your product.
Docked assistant component.
Docked assistant supporting users as they explore and navigate your product.
Award component.
Achievements for exploring and adopting features.
Empty state component.
Empty states to encourage action and invite users to get to know your product.

The first time a user encounters a new product or feature, provide an overview of key features and benefits. Walkthroughs are most effective when users can interact with sample (pre-populated) data, to get a feel for features and processes.

To keep prospects motivated in a trial, lead them quickly to “aha moments.” Show how your app or service can make their lives better. Use progress meters, in-app achievements, and other reward patterns to support your primary flows.

Offer one or more of the following to encourage exploration, learning, and adoption:

  • Welcome message
  • Information about what the product or features help to achieve
  • Steps for getting started or setting things up
  • Tips on how to use key features

Salesforce Product Trial Experiences

Explore a few Salesforce trials below.

Setting Up a New Product or Feature

User engagement can help admins quickly identify and implement the key features that users need to be successful in Salesforce.

Use a setup assistant to give users a clear set of steps for more complex configurations—for example, getting up and running with a new social platform integration. 

Setup assistant component.
Persistent and contextual setup assistant card.
Setup assistant docked panel.
Docked assistant with setup checklist that can be docked and completed as a user explores.

First Time Logging In Since New Release

After a new release, user engagement tools and techniques draw users' attention to new features, show them how to enable or use the features, and explain how the features help them.

Use a simple one-frame welcome mat for lightweight announcements of new features.

Provide a list of short walkthroughs or help topics that guide users through enabling, setting up, or getting started with the top features delivered in the release. Or present one or more short videos that show the new features in action.

If a new release requires setup, gamify the experience to encourage adoption and engagement. Provide in-app achievement markers, such as Trailhead badges or a custom reward platform.

Simple welcome mat component.
Simple welcome mat announcing a new release, with a call to action to learn more and explore new features.
Welcome mat with video player.
Featured video in a welcome mat, highlighting and demonstrating new features.
Setup Assistant component on a page.
Persistent and contextual setup assistant card, to help a user or admin use and set up new features.
Setup Assistant Docked Panel.
Docked assistant with setup checklist, which can be docked and completed as user explores.