Intro

Onboarding on mobile and tablet
Onboarding on mobile and tablet

Onboarding is the process of activating an account by providing the user with key instructions. The onboarding process can vary depending on the configuration of the app by the admin or the IT department in terms of data sensitivity and security level.

Usage

Do
  • Welcome users with an element of excitement for the experience ahead.
  • Keep the entire onboarding process as simple as possible, and use clear language that gets straight to the point.
  • Onboarding is supported on both mobile and tablet. For mobile, screens appear only in portrait mode. For tablets, onboarding is supported both in landscape and portrait mode.
Don't
  • Don’t repeat onboarding after the user has completed the process.
  • Don’t skip the onboarding flow for first time logins.

Process

The onboarding process consists of five steps: Launch Screen, Activation, Create Passcode, Agreement (EULA), and Authentication. Between each onboarding step, the loading page may appear to let users know the application is processing content and data.

There are four different activation methods based on the context of users: activation email onboarding, discovery service onboarding, QR code scan onboarding, and custom onboarding.

A visualization of the onboarding flow from launch screen, activation, EULA, create passcode to authentication with possible loading pages throughout
A visualization of the onboarding flow from launch screen, activation, EULA, create passcode to authentication with possible loading pages throughout

Anatomy

A. Launch Screen

The launch screen is the first page new users experience with the product. It welcomes new users by showing the overall mood of the app and briefly presents what the major features are.

A. Application Details

  • App Logo (Optional): Recommended for branding purposes.
  • App Title: Use clear and concise naming conventions for the application’s title. It’s recommended to keep the title length to two rows for mobile or one row for tablet.

B. Top User Benefit
This describes the primary benefits of the app and is helpful for users to understand the app’s purpose. 

C. Demo Mode
The demo mode allows users to try features of the app without needing to be fully invested.

Variations of the launch screen show that it can accommodate an illustration or long blocks of text
Variations of the launch screen show that it can accommodate an illustration or long blocks of text


B. Activation: Choose Options

In this activation type, a user can choose how to onboard with the discovery service or QR code scan. Once the option is selected, the rest of the process follows the flow of the activation type chosen.

Activation by choosing between discovery service or QR code scan
Activation by choosing between discovery service or QR code scan


B-1. Activation: Email Link

When the user cannot complete the registration through the app, they may be instructed to go through a different process by email.

In this case, users need to go to their email inbox to check the message and click the activation link.

The email link activation page describes instructions for the next step and displays the email address where the activation email was sent to a user for verification. There are no action buttons. Users must open and check their email to move forward in the onboarding process.

Activation by email link
Activation by email link


B-2. Activation: Discovery Service

For the discovery service onboarding, a text input field will appear on the activation screen. Here, an email address should be provided to start executing the discovery service-based onboarding process.

Activation using the discovery service by entering an email address
Activation using the discovery service by entering an email address


B-3. Activation: QR Code Scan

QR code activation requires the user to be provided with a QR code to scan. Users can scan a QR code by using the camera or by scanning via images saved on their phone gallery. Using the scanner has the benefit of reducing errors and streamlining the activation process.

Activation by QR code scan
Activation by QR code scan


C. Agreement: EULA

In proprietary software, an end-user license agreement (EULA) or software license agreement is the contract between the licensor and purchaser, establishing the purchaser’s right to use the software. To move forward in the onboarding process, users must agree to the EULA.

EULA (End-User License Agreement)
EULA (End-User License Agreement)


D. Create Passcode

When users are prompted to create a new passcode, they must follow the list of passcode requirements. 

Create passcode screen with passcode requirements
Create passcode screen with passcode requirements


E-1. Authentication: Sign-In

One of the ways to authenticate is a basic account sign-in through the user’s email address and passcode. 

Authentication by email sign-in
Authentication by email sign-in


E-2. Authentication: Biometrics

Depending on the device, certain biometrics methods may be utilized like a fingerprint scan or face recognition. Since the biometrics come from the Android system, the dialog for the biometrics authentication uses the system’s default.

Authentication by biometrics like fingerprint scan or face recognition
Authentication by biometrics like fingerprint scan or face recognition


E-3. Authentication: Passcode with Enable Fingerprint

Another method of authentication would be to allow passcode with the option of enabling unlock with fingerprint if the user has fingerprint scan set up on their device. Once the user checks the option to enable unlock with fingerprint, all subsequent authentications will be through the fingerprint scan with passcode as the alternate method.

Authentication by passcode with the option to enable unlock with fingerprint
Authentication by passcode with the option to enable unlock with fingerprint


E-4. Authentication: Basic Authentication

Basic authentication is a basic login method with email address and passcode.

Authentication with email address and passcode
Authentication with email address and passcode


F. Loading Page

The loading page lets the user know the application is processing content and data.

Loading page with progress indicator
Loading page with progress indicator

Resources

SAP Fiori for iOS: Onboarding